{"_id":"@material/mwc-formfield","_rev":"732-441e71e8a99293d515bd54398a0800f3","name":"@material/mwc-formfield","dist-tags":{"latest":"0.27.0","canary":"0.26.0-canary.0af8ade5.0"},"versions":{"0.1.2":{"name":"@material/mwc-formfield","version":"0.1.2","description":"A [Material Components](https://material.io/components/) formfield implementation using [Web Components](https://www.webcomponents.org/introduction)","main":"mwc-formfield.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/form-field":"^0.35.0","@material/mwc-base":"^0.1.2","@polymer/lit-element":"^0.5.2"},"devDependencies":{"@material/mwc-sass-render":"^0.1.2"},"publishConfig":{"access":"public"},"_id":"@material/mwc-formfield@0.1.2","_npmVersion":"5.6.0","_nodeVersion":"8.11.2","_npmUser":{"name":"azakus","email":"dfreedm2@gmail.com"},"dist":{"integrity":"sha512-QLMHIE7fk92Ub8aGa27NJiO1cGfQQWxwc3Y29Jisd7dVfwDU7yjSh4kHOLeA/ZyeZrSQtDpqH0YW+O4OqvTZOA==","shasum":"64d7039fafe9fb21df1436435b835447502cf93c","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.1.2.tgz","fileCount":5,"unpackedSize":8189,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbIvFVCRA9TVsSAnZWagAA+UMP/i+UcJC+GhlX+rjkuep8\nukdxxCi7i5I3aT+s5yvvrCy6gNtf0Q5ZAI10K9zbIxc+5dGH1xxeKclK9xyd\nZ38H+g8+gAAvdr5tABC7HwGKGeFNaq/mgJYPG/9FK1ld7lrFMy4Pqj5/kcGo\nmElklpQOjGO/tgIkNrOOb9K6qyvCMbjI/yDJSchPQQx2vRyGaUwdEJwIIi/c\nZlXxjwZn5bCnE+BGVpLpsHQzeeQdc8VOOa3kmOUeAKUyfoIt198u7axPJPYl\nALHLhiJxjzBhCR1XixJdU+DwYbyyG5wJp6XYtgLAkhyLTJzcYUnqXvwUyZdI\nWLfUP9Cu1NAS2tAjNodr7n1vM5Tr7fxvc6IwTeyzWGsPfOlxxHGQrBLE+85d\nN+xA5tksaQ1nk7/alytRKuasbPtrhwbaJVuS+gHfmH74tMlOKup/0IVPRdMY\n0C+5spohkP8oqjuGmKwbi4VnSdZeQspzYlZtxxyb7pN17wLHDAFpMLkfZlHh\n8amLu09Ryi/hayvb6XmIFmGd0pA6o6cKseTc82lPM8xyAl+s7m8M81sVbfhN\nxS9uW+J36dfLstaFq+pCbt0wZlBW3yW7xxegMfyuGdciJWWNMficHf9MX/w+\nf0muNCNAOLzr6Al0YNqi+YIVnuKDKQ2CT+NcOqR2GRqoSUTlAF9m0+d2G7z6\n0afq\r\n=GV3d\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCtH1p5HwE/xbja6yLKXbTo8+e/SMcY6raYi4wjqrdgKwIhAKBCHsLkjB8OUQ6+ciyQpznsF2Mp9fWkyBoA7W4xMZFo"}]},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"lynnjepsen+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-formfield_0.1.2_1529016660899_0.5937794826407643"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.2.0":{"name":"@material/mwc-formfield","version":"0.2.0","description":"A [Material Components](https://material.io/components/) formfield implementation using [Web Components](https://www.webcomponents.org/introduction)","main":"mwc-formfield.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/form-field":"^0.35.0","@material/mwc-base":"^0.2.0","@polymer/lit-element":"^0.6.0"},"devDependencies":{"@material/mwc-sass-render":"^0.1.2"},"publishConfig":{"access":"public"},"_id":"@material/mwc-formfield@0.2.0","_npmVersion":"5.6.0","_nodeVersion":"8.11.3","_npmUser":{"name":"azakus","email":"dfreedm2@gmail.com"},"dist":{"integrity":"sha512-NhCx9/HuH22+GkIfh/ppxCzzvU2Ozx4Ive/dyvHj2EtSNCrOErEGzt3dqjuykBbh4wNhixmiypfqxayBEx1bCg==","shasum":"249ab4c8533de95508e0904bd82b7d7ac25323b3","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.2.0.tgz","fileCount":5,"unpackedSize":7336,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbmwKPCRA9TVsSAnZWagAAiKEP/i2CLigi0XekCDszNDd2\nG88JJCB9uePfBk44Po7R2AFEzwqk6a6aThNk7aU8wlCY0B3jx1LlTi+BMpmH\nRHGCVXaoI0ff5c1hcslom8mc6ODChW1AnHoZpqoQGaSNiidC34CuidYnMGlu\nP6Gz+Ab6PT8CIZYA45pOuO0VNUqleY41Fsi4Db5jhULpkYC7X+nuRpB3/5pM\nszr1+esiJbmbHoFoF0WrkPqUd3g/sYzrqUpBKO/OpidAfHzCq51SpVM0oyNu\n96hb/+AEPTttnJWs4NObPMG5mdsK/dKhMlNQPRD7oAaTxA6XHNDEk1ubaw/b\nKDo/G2xcv9wZwKxoyxcf8VFYGB5X4HdAuSmRujbuL2b1Stz7wNsiA1rUaclJ\ni4GlDiwSoK/50oGzDtgaftw3ZYj6bR0qnxe7B3TV0+ATPGtnu2cpsoKNbwY2\nv5UsXaI86Bq80EQr+jlPyjiGOpORiXqhTKIZaP/dyPe8KQ36BGRW7xAaLPW6\n0lbXDfLAJy3CStwfrou6fgjq9gk2M8wyz+bxTooRVzGsoOcS3wZFCp5bwlss\nTRXv3er1+u7A7iMqb9JoswPSObbZtltUaFJ3Tn3Nxgls1mkiCyrheJcyoSsM\n4JM6pWeJxDk9oZojOd4FH+ZnI4d/gTNI6E0fXO7vHVOtcIJjB1juBfweROuw\nTXWw\r\n=kjZO\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICcM+ibI7RQSeVltKv9eR/45p7d3WkHlsR/6ZjOi3zhhAiEAjLPd3cLPEdZeaEDv2nORutxwlBO7P9+Vjy0up+6HeKM="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"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":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"lynnjepsen+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-formfield_0.2.0_1536885390839_0.532825146470933"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.2.1":{"name":"@material/mwc-formfield","version":"0.2.1","description":"A [Material Components](https://material.io/components/) formfield implementation using [Web Components](https://www.webcomponents.org/introduction)","main":"mwc-formfield.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/form-field":"^0.35.0","@material/mwc-base":"^0.2.1","@polymer/lit-element":"^0.6.0"},"devDependencies":{"@material/mwc-sass-render":"^0.2.1"},"publishConfig":{"access":"public"},"_id":"@material/mwc-formfield@0.2.1","_npmVersion":"5.6.0","_nodeVersion":"8.11.3","_npmUser":{"name":"azakus","email":"dfreedm2@gmail.com"},"dist":{"integrity":"sha512-bvrxCG5JbMZxV8ALrXQ8pWwppx4pSjcQFBgBWy4xUE0s3xiRYD5XAC/SqJg+UZUmmC4Uzd36dw/tovK6XZEPLQ==","shasum":"c50ad1bae096bb760a253cbc40da6ece0293dcbd","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.2.1.tgz","fileCount":5,"unpackedSize":8098,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbpZQmCRA9TVsSAnZWagAAmnAQAIa404PCfgKawlEMITVr\nv3aq3iztoycil6JA+8HBgLeVYwUhuSyfu1fcp1n9sociFNhvC2V4gpGXoTm2\n7+/49juJBLk5g0pPH1bWwIEAfJBpmyJAEds1chTbu0o/+M03ShBb6iXqgPsx\n4H5plRm7Fi+FBU0xQ1heIuXVSz4TBShf+XzaG5RwOHXPdpUVPUjjJTI/T+WT\n5UwxvBcs3NzFELqBqGyqhI0PrvVtjTW9sm+xN7TXdlGgfQxTJaheuqQ0NNDL\nuKS1efvjr74GJwbU349a3IkkpZmZskgmVXGCeiRfRGZpTVjtx1HkdnYjlhyQ\nv57jUBdUtVcvOSyxMb+7+jCjUBnvoENBvcnWbPvVc8vT3gMdLXV/7/uMzDIG\n7GieW+C55M2rVZfO2kp40pJYAfGsfrmngiUmc8EHbAFg3aiqa3aIt4mK9mnY\ni8+P3TASFGrm3tQPFP1khgkO9tsb/Q4uPu40tp/eFCnIWQb+rbH0IJbKS96E\nPaLlJksvHB/mhXg4m7SBp0loxPCgroa8xAR7L9ThevzGhNf7LjYkNmYmRbLr\nTPIEGkpOxnkjJ87vFk2oG9PvLn0bK7yA5oitI9vRdnjwaVazyXm7ZW905ikH\nRj4UxqvyHGaXAd/kR5jKO8dfbjbHriul/h0R4WcGtCPJPJNV9y5hGwbMm8D1\nDh+E\r\n=qdXc\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHnCh4zlH2cu3lWera41OVIRuQGZKHrxu0Vru+ijUqY9AiEAt/dZ7Ieh2YTbuB3qeUIc5NgZQc+6PeuFnZrAzdFeQ4Y="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"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":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"lynnjepsen+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-formfield_0.2.1_1537578021333_0.36090814706844476"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.3.0":{"name":"@material/mwc-formfield","version":"0.3.0","description":"A [Material Components](https://material.io/components/) formfield implementation using [Web Components](https://www.webcomponents.org/introduction)","main":"mwc-formfield.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/form-field":"^0.40.0","@material/mwc-base":"^0.3.0","@polymer/lit-element":"^0.6.1"},"publishConfig":{"access":"public"},"_id":"@material/mwc-formfield@0.3.0","_npmVersion":"6.4.1","_nodeVersion":"8.12.0","_npmUser":{"name":"azakus","email":"dfreedm2@gmail.com"},"dist":{"integrity":"sha512-njSIQDAxsilvjDJqWKDVtTlZepU3B1lP+cdhSHay5yn3Ls9uLjRSxjvrnicAlzn+8Zi/IE92IhDyMA7UN8oHBw==","shasum":"a49467565c29db8f1eb6757ff27925526902b1ce","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.3.0.tgz","fileCount":12,"unpackedSize":25949,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbtqGACRA9TVsSAnZWagAAcCcP+wVhKPk72ZXI6OAQ9NgU\nEnsBLKZx4qSKCsMiP2x+O+YfB/Pnz65xRO9QjqAeEQFsPCyEePKPdMKXHFFR\nmPXwFn3p6xADZoC3sGcagl8Sqc4I80sA9xRdgKlF7qX4RJ4Prq5SwJJThroZ\nhoAcQKw4PYzcEdIcavTkHTjN1up/XddX9EOJjdnFL2TehGp4vUDFbm87sVyg\n1YTyXIlmUzRF9JmVoXVNdGVBwNY3WF93g0VBtgmKB8aLCGathQHqeQfpOOfH\nx6oPDUN4M2+XZQOmL1/xSiyU8ydDxIFJHNMLv/SmC8GDsq1sLUbOF5pXDQLj\nJ+CvvJNneD9r+lVEXHyMGbnsKfx5oNxgisWKj8td6PNTI+ZeCdDUHVhYUxra\nwFRvH98yFoDySuEGBz88pjCHpqOkcEIyHNJF2D4bNtajAcY+pTg7+7+Fsf5F\nJ5fPJS5M3U37qtDR58GlDy/rOM8v9YXA3k0YkKlkP2w5ENzf6OeFnv8TMVbm\nSULB69pVOXkH0atwOQJ5J5FuLZIQedMIMf9GQSFh4FFJqvjkKu2gWeXNAGxT\npv4gfuIto15C4BXNb7RuzGZMY06cWPJCnm2JQkMTH6+7fm1AA4UHTcmi8Bbp\nfAvcL9Q1MbYuOq7Twh9Q/z5l4s5CELOF/UV1o+UrPUyBPbQ3WZkBC2e7G2E9\n7adT\r\n=yMqX\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCKKeTNsy1pAB2Yt6/9jjHj4n9H93Msu1sPMPeAIyrjXQIhAMpGCGo0jSxfVV16WH33C1XJ6lgsqkrkVEBCkCDPtWaA"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"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":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"lynnjepsen+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-formfield_0.3.0_1538695551466_0.9849979042269901"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.3.1":{"name":"@material/mwc-formfield","version":"0.3.1","description":"A [Material Components](https://material.io/components/) formfield implementation using [Web Components](https://www.webcomponents.org/introduction)","main":"mwc-formfield.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/form-field":"^0.40.0","@material/mwc-base":"^0.3.1","@polymer/lit-element":"^0.6.2","lit-html":"^0.12.0"},"publishConfig":{"access":"public"},"_id":"@material/mwc-formfield@0.3.1","_npmVersion":"6.4.1","_nodeVersion":"8.12.0","_npmUser":{"name":"azakus","email":"dfreedm2@gmail.com"},"dist":{"integrity":"sha512-feksYtWdrDjqdhyplXoS7oCyAUzCIpvMPkS/WrgOrNpftAEbKSCk2gxsXLYS87vkCPaRWv12Epb3VxVDAJ4yxQ==","shasum":"95fc344dfb9c90fe0b24d370963af187085ad896","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.3.1.tgz","fileCount":12,"unpackedSize":26033,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbu64FCRA9TVsSAnZWagAAQWAP/jK0SjVb3XwyutIYr+4D\njQf1nx56vu9X0Rl9O48SnVWojuHypoHF09YVyg7CTVQeo+S03eCuQbRAuZcX\nMj0zW84Ukt6J8vGXNh+rXy1uUiu2EIpkhr+GrPpPu6xevuxBwEnSvx1Znhnd\npHjcjTUvH3qp46f2f649ntVfs22NsxOlXLohoagBfYT393pzvX37KH/LSthh\nLuDTpL5RdajK0s5nq8R5iNGkaqPwHot7ei7Tjq0v83jicHUyFqFFi2IYjm1/\nhU7VmbxXeex/NLvSP8pL18SLx+GkUKQk8xUOn0Vliz2tD+IQYbZcilJUV/aN\nvSxmgtZDgyr1ImHnh4aGIZaXFFZaU53UQQm0hVnM5VmARLuUYShWDvXEy+59\nGOMlAo/7Q4N6ZCj2kIqKCx67jDMzC5hgc2lQ6PNFmESLbldxzdkRWPokfstV\nPemXw9TnVzX+IMTCHTCdVsr3rX9cnX9J3+WaSA/6sL5FDKCiOkagzH6jFSup\nSYQplNsUq4v//f16wDNKwjvPXEb94I4MnKcLXRowxpD19l3c3/u/EIvhxnt+\nmTmDxTL/P/PrCf5bUrbi9gUISk4nZATS+AQlz1op6U3FjoiJ0nrpI0Yjp71M\n3qwy1zZ7QbGBcuxe/yFUUj3i00+TWd7aUFW/7noxhnHNKg2QAjppUEG5mSFP\nGmSB\r\n=L00o\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCx4asIvR9hLH4p7Pen8VNZa4BiMsWcJFWh9RbK3tNUDwIhAPmcmum2OIfHvA+9AKakDnZHywLNc3Nz0X48qbWtYAX5"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"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":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"lynnjepsen+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-formfield_0.3.1_1539026436487_0.5893813361017388"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.3.2":{"name":"@material/mwc-formfield","version":"0.3.2","description":"A [Material Components](https://material.io/components/) formfield implementation using [Web Components](https://www.webcomponents.org/introduction)","main":"mwc-formfield.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/form-field":"^0.40.0","@material/mwc-base":"^0.3.2","@polymer/lit-element":"^0.6.2","lit-html":"^0.13.0"},"publishConfig":{"access":"public"},"_id":"@material/mwc-formfield@0.3.2","_npmVersion":"6.4.1","_nodeVersion":"8.12.0","_npmUser":{"name":"azakus","email":"dfreedm2@gmail.com"},"dist":{"integrity":"sha512-hxEMj/KKD62bQfqNESIOF4G5MW3QTHUqVavwQbLfb4+9NxdhAj7zp3kQqOVwncTESeTvxre3xwNZcarj3IMn1Q==","shasum":"9a79bb94fbfb2814b1aae63e6be65b842b302eb1","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.3.2.tgz","fileCount":12,"unpackedSize":25948,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJb73eECRA9TVsSAnZWagAAZggQAImAyKuhcGYYplpdbqOS\nJ4fiwwaiGD4mXnrfwXjKpI1WNNEYt23JqgEykhzaKchsbDYNXDPLWVwULaSc\n69IP/BFZM8Fg2wU3AZcUUEjFWORpuo9/lWtOdKzmf7IQB3SfR/0Dzfm2a9c5\nO3pqWHLfEqLdcrmikrEkftotXfNCKovIowXlb7mlqBiaqKV/nFIHIhD/OYPl\ncKcjGR3BWCm1oy4JTlhLFEtngW1aA2P535ZM7D09LDmY1GM/Av+tyoCaKahf\nwr2BSYRyco9eWBgDyemMPGpq3kd9DQ40Jfdy6utnOKaRXIl16Ik6H86I3Rpz\nY/dsbk2jpDN16KWivgc67NjSNanWXwisUW4ExcKXfibeLHmSnuLPXj+cSLQ5\nIA7k3iVfykgaCIvI5VNUbBfYf1WV0+yEG9RsQVQqG2zorDhuwk2d2D+mc12U\nY46eRZXYbTvmewivCLRQrFTDoEliVjpgqPAfQpNDHboUEw6L8ovrZo+cCC5P\nbH4FAmh9JPXuJf+CnG7RaTZ72Pvv6yD0GpNV+xADiLkCk4H8Ss0MVCudob7S\nv+8k60nFJ30HMNlzIzMhvAsqQR42txLyXFjcshpr4FOY+Hmg2KpOX7Fc+oPP\nvMp4qRtg+L7z1fha5rbUqn5LV+MafBQlsMxMJphmuNTvxDlS4DQKG4mp/VPH\nlRnL\r\n=TF9K\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCrJSLdhn91mVDf8+mk4X8AhlolWlGvQqQkg8ifBocnDgIgAh2O3+2JsyRppVgfvSdK5D5DwStfuMZ9+SU7PwZsyNY="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"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":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"lynnjepsen+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-formfield_0.3.2_1542420355846_0.38676881972673205"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.3.3":{"name":"@material/mwc-formfield","version":"0.3.3","description":"A [Material Components](https://material.io/components/) formfield implementation using [Web Components](https://www.webcomponents.org/introduction)","main":"mwc-formfield.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/form-field":"^0.40.0","@material/mwc-base":"^0.3.3","@polymer/lit-element":"^0.6.4","lit-html":"^0.14.0"},"publishConfig":{"access":"public"},"_id":"@material/mwc-formfield@0.3.3","_npmVersion":"6.4.1","_nodeVersion":"8.12.0","_npmUser":{"name":"azakus","email":"dfreedm2@gmail.com"},"dist":{"integrity":"sha512-l1B0fiQkNMYWH6X0oVqovWBEzT1TdTm8JsoMfeRfSahAvkRLJajm92GArW8xte5YNuFF/sKQPswxL2RF6yNS0g==","shasum":"cb6a0759cb16093ea6487455165b9d62966f7cb4","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.3.3.tgz","fileCount":12,"unpackedSize":25948,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcBdEYCRA9TVsSAnZWagAAq4MP/0jevD732JiGxRM/06dL\nNT4ZwSl/MancSD6OiLwAdre2rg47yfxAZa+galHHpsVFARDGySeN7bDgbfJ+\nbb+R31MRTDWit1jivOTI0LEN6dlc9lw9HwvTw9Nt3vd166MopIhtDdRpDlO4\nTXVx2brYi3WcH/2oQZfSl37olaRY4ccPa08HxWaTcTJLBk7VrldcknQvcRgZ\nLqoHvk0KTZT22dXv95BAN3Wm6sXowrg89H08QFNIGwldg6EnUL6Y+BMC323/\nLcu3PdAE33b+KmBVs9/ingi8KzXp6ESa0h2l8zE4efLY3eW6q/LnHB4euYHr\n2hTuEnpdne2Zbj0QcwDiPlYu/32bz8Wu9kIyzyQFWHOZNv6rXGvwgIPCcVuc\nA4wZX1AiQoQT4uew6zcoON2JXyk99I//9S12XNV1Os+zVBApubpGX+gWa+en\n6iJsn6l/IqAjyoj1ZOhyZGnlgzNXia4sw2T9H0dOCS87r2x++1EFPuQEppk0\nmYjP7bvSvR+4Fw4venepuBpsENeVlrTgghlCi/MerZrtyDqeGrvIL/vhv0XG\ntKrESRrJgciuVfU/TgtiEPR0nZIDlId0tnoo/Bo9Y7gQgPNdBa4BDGG45V7l\nDwCNr8FixhX5NPh0lDlKeYWcmk82KwZtVqhugHgQvJRqP5k7QDIF6ryimNHR\naufv\r\n=VwqO\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCJb09L1bXj/mID8bGZGNG/LXdgncbCJABdStKqXNlS4gIhAL33N0rijv7V35wFogjxt6WrVTEPdK7bTL0+rhyKQHCj"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"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":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"lynnjepsen+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-formfield_0.3.3_1543885079879_0.25683060357383836"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.3.4":{"name":"@material/mwc-formfield","version":"0.3.4","description":"A [Material Components](https://material.io/components/) formfield implementation using [Web Components](https://www.webcomponents.org/introduction)","main":"mwc-formfield.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/form-field":"^0.40.0","@material/mwc-base":"^0.3.4","@polymer/lit-element":"^0.6.5","lit-html":"^1.0.0-rc.1"},"publishConfig":{"access":"public"},"_id":"@material/mwc-formfield@0.3.4","_npmVersion":"6.4.1","_nodeVersion":"8.12.0","_npmUser":{"name":"azakus","email":"dfreedm2@gmail.com"},"dist":{"integrity":"sha512-kJnM/3zTcWHgZh5O/n1+MQZ5NQc9c+uQXvsHZaI5LVBLazojgj4X/pYGlelN3r5qQ1kiMGbaCUe461A3kf0iIw==","shasum":"3b8725ebe2fac5839bda73142fbc6fee240b3388","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.3.4.tgz","fileCount":12,"unpackedSize":25935,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcEsNyCRA9TVsSAnZWagAA3QkP/jzcEsE8gmIwyWspUOqa\nbzMlr0/EA8e6vx0MRDahbXEt0kkA9fmoZE7j0bIUgBQbcpzVsa9hwOiGxAMY\nnxHqfZAXFAF36Qz32q3FjwcbW41LP4eBDRRtxaP+ZVfBedMXM3RtjKgg6IXu\nvGovwlpHqI/0Q68G3PGH/jo/UYcUFHFTAZSuTqHQ5fQ17CwPN8w2rU4Yfrw9\njqQWddBgIXC4CJb+43K2sBlMbOW8u9cAJ6m5BdZ8mquyVo3vB38BsRqPlZwk\n+MhK/8fVfY5wQf1NPeLlFhNvyBmjUtMIc5js13MgHabepf12ORPikq1NgIja\nCKm1O7+a6xv0q3DZOTU1TcK5swE2oOoc0O2fs96YruUJcF3Q/F8K0Ackrj7s\nLbqaxo+6LAIjag+B/WiGRkQoS4+7/vk5U1p8bBRwGJX9sTvchbq1AkOfSMOf\nNvpoS+/sDVsVe4dTAPuowM8tOUDcIaii+9JJujIRyz/aOtS4MLxsPwwNuSzl\nvA0yAOFGDZOGKVaZv+3UqqNWk6J0oCspmyKgmOJXyLPc3ENEBoEz4RX/aDkg\n+5i53rovqOgYzbwuQIy1/4Kw03PMduPTpK1yL5QwIeDwYsFB+QyQ1iRI59BK\nQXWQ/38yIJMrzyu2n5CLwcw+fZSXva6FdxPXu8s7QytNZW/ishxGSr8YFMg1\nCGbM\r\n=bMZU\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCh70+bA6lftc6HXCv8PrlJ9st+jjkuO9usih3zvKlPyAIgTTennVySIUxf4BuQUd2RF4haX5WiHlGdHY3KrzPB3Co="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"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":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"lynnjepsen+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-formfield_0.3.4_1544733553198_0.5117416747003405"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.3.5":{"name":"@material/mwc-formfield","version":"0.3.5","description":"A [Material Components](https://material.io/components/) formfield implementation using [Web Components](https://www.webcomponents.org/introduction)","main":"mwc-formfield.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/form-field":"^0.40.0","@material/mwc-base":"^0.3.5","lit-element":"^2.0.0-rc.2","lit-html":"^1.0.0-rc.2"},"publishConfig":{"access":"public"},"_id":"@material/mwc-formfield@0.3.5","_npmVersion":"6.4.1","_nodeVersion":"10.15.0","_npmUser":{"name":"azakus","email":"dfreedm2@gmail.com"},"dist":{"integrity":"sha512-B4vFGp4A3+zlvfVa6xyy+VYHvzA98j8XZ1WxjYv0g4QeV2mCS0Ool0ib9v672am5yt4ZcTmIjxrnYNiZ2WJc8w==","shasum":"01fb286f088ab07d9aea5896729ca7edf1879861","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.3.5.tgz","fileCount":12,"unpackedSize":25905,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcORXICRA9TVsSAnZWagAAhPsP/jJucDG2NdWIw4XafZ0Z\ncoCrVyxfvWtLH5RuYi70g0q9cfe5Xwp12kra3qVYvJENdltiNoRnHqO4G/Nl\n4t3KyTWCcuVK7QZ0wOJLgtR4d2E+LvSAXWm9Gd0LXxOWbAP9CcEuOtmhz/Zw\nF4W424DZRM+8ws/C/2VWy02jYxYXGhNrW5OK3uE6Zx2CijUCO71kBIuD6O2C\nwn221Lfu1a46+NVqoVJLTF4Yox/2XKxjqm1gxyytKIy5VZ96mF7/jmPWbkK4\nHSjaLxyunPK8/IlEJf7fyVuk097kyjsD1BrFZxObOKpyCnMVyeDWX8+q5gfO\nx4Nw6zAr5gIaXXOFaj5b3JtNr+6Q+70aEhzNNO354Eb0EjOgfYS/+Or1VZUW\n/MCPgxJnA9hMZgCMVMMPQiSVYAgq5pycUYZKdI0PTOotoqj+xCg0Lgu/LYUZ\nUyzuUBQkXIulm6p0yOlKmUC6da/18+J9DoI7dtOjwPs8CZidA1Ub/UnodpXj\n0zowNsOITMXAoVqTDi7E8PwgXO8IXoxmUgN0tiLTKTO3JM90vk+oIgbg4m5R\nQXWdit+T+8HhovLCCgff+kba+sw2Pp32UkJnGLBAtcWSSZC4aIl1kps/RZPQ\namASPuzcY+E5YpZvIiBCO3vzMPnoy8okTAIa0e71obD6qXU+7NZO644LVpBI\ng1qg\r\n=MlV4\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCO9PcYomkB9TMDR5uiNVRiEXLVDYPpJQuNc7k7l3bo1QIgdQTaxurAvYLoJ1HgV1CFv4ESltClkHUeouyqTT4CPg0="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"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":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"lynnjepsen+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-formfield_0.3.5_1547245000226_0.5399959725130608"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.3.6":{"name":"@material/mwc-formfield","version":"0.3.6","description":"A [Material Components](https://material.io/components/) formfield implementation using [Web Components](https://www.webcomponents.org/introduction)","main":"mwc-formfield.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/form-field":"^0.40.0","@material/mwc-base":"^0.3.6"},"publishConfig":{"access":"public"},"_id":"@material/mwc-formfield@0.3.6","_npmVersion":"6.4.1","_nodeVersion":"10.15.1","_npmUser":{"name":"azakus","email":"dfreedm2@gmail.com"},"dist":{"integrity":"sha512-h/MboPEzqYNEHIYjDa9Q4Q1DhMhgL09g/zpDpqkKXfMm8JWGPO2HPnJIFMWABJyDg1pvvh6pcWBKfa3vPi2Ujw==","shasum":"132fccdb6aa5a77b80526699f7e60e8e0616ba30","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.3.6.tgz","fileCount":12,"unpackedSize":25519,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcWe+ZCRA9TVsSAnZWagAAPsQP/ijYdLM8fDNNw7drVtDv\nXsE2Jao1ADRWzLoBHj9AvWrLUduUkWsMPmaWNyYBNDPBhB6+keQ+M4mxDwzb\nPNmCkkngUI9my3owUwB/VocbeojNLbEjp1Ue+YL0TLE7hmmAnrDQ6T/c01y5\npDWzHVLwPbrsdfb7VhiDhlJdNwR5wzsxvE8w3WPdGQxVQYWW8mVHEd9fmZrv\n4ClN8aVjJUj7OFhFgIwTE0WBJJD38HhTBvyIKnVb2PTGXnyFDS84XxzdxdGA\nCStFTe/o/1w/pLUJFakT4OOKViO/7huDXShMI9/55f5Q7Uy3TyNqwF+RbRc+\nahb77NN4uwXmqpqTgWUver5cWO0hcRdYczcgt0GePVCFFRePwGpbysI4Vsn0\nerM01wtx0N0fRswwBu2Wxp2ET5IPS2xWOPpdpg/DwxpE4jC23nL7ZOONtbm+\nVbDNBN3FaxC4Me4PIwauArOoa5jdE5JK0r2GrpjvLtDL28vabytoeMduKfO2\n2WOtXqNAUhs2Oiy2t1YX3lyaY3gsQVvxigOJKHCL2CknkfBD0ZgW7DmDgqDb\n8Nc+t18fLn7dQXlGtSZ8G08crX0fnGHYVY35hBAsMhF+jPWOFyKrwi7SoaJV\nUGkE0kG0yYFmisWL4tY/eboLgqOS5+2LIdPe/3ocyRpc2M9IKjzA59XELXyl\nVkVB\r\n=wUgg\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCMYB6iqzbvbg8VPh21lu/DhKjggOkQhVYZV7RHBMSIYQIgMPBw5aqRIh0s5mdc8Kr5Lk6Z7lBhM5vINWjz4JL589E="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"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":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"lynnjepsen+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-formfield_0.3.6_1549397913177_0.7115869916553972"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.4.0":{"name":"@material/mwc-formfield","version":"0.4.0","description":"A [Material Components](https://material.io/components/) formfield implementation using [Web Components](https://www.webcomponents.org/introduction)","main":"mwc-formfield.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/form-field":"^0.44.0","@material/mwc-base":"^0.3.6"},"publishConfig":{"access":"public"},"_id":"@material/mwc-formfield@0.4.0","_npmVersion":"6.4.1","_nodeVersion":"10.15.1","_npmUser":{"name":"azakus","email":"dfreedm2@gmail.com"},"dist":{"integrity":"sha512-QP5vilu8qbgR7aKV3BnLFPEquHX+th7fcLB09GvsZr2EGdgaXyMHIWzSiC2iLuea2botHR4WbD1GJLXYWxXipw==","shasum":"40b167121023d19f602ab16cf1db4502bc5f94d1","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.4.0.tgz","fileCount":12,"unpackedSize":25519,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJchvbRCRA9TVsSAnZWagAAP1UP/1TIWmSMYA+ao2DueIAf\nOc2TwvYSogjj+tiWk/RI8+wxoUCbJGU6F/n4j5FP1GN+oc5MbwMptT8VMxMB\njzBteDS50mKao3cKIJH+2UW5mLDHugpX318jxcwjmeMjdBsECpkE6mYJILse\nyC7m6OcBo56EnlSVUpLOIj9QLb1wZtUEA9mOlwluYpHShPOp6EjS1sN67R1J\n74QTvrQD00hnczc8b8x7ady0ROb7U+E2m3q3mkkPeOKWi2Jjj63NclrICgas\naIrv332BoOZ6O6Mysfbw+K9OGBUlb45505giTTXsTvGKxPOYeOk8uFnb4Qwo\nOJClcV67YEN67EkQDkEEjxwCWpyqJL7eQR9wGYnSEf3uHBvbUGEWyAaNPcbo\nXz2n9l3n23ehCyvLoUXK459IR48gOPNfyLinTSuuDodaev0KJ/Mtej9MEVTc\nt4Pw1A81aXm0T1gFevMo0XF4R5ZUSmiCzhgHXRW/9DjRAT5k0kEcl4X3xSe+\nZZLYz5K0GnMhcSGfh65n4NpnAEew8IAjwECGJMTeNuPoLyL0fANGly66FkYQ\nYuxW7nvM+kqaxVzdsDJd7KBP5DgmhLBbEsvFoF8hiTsPQBBiWSxuNMssC4Ej\ntMFWQf8/879VvEjI5C2b9Wp8SKmsO2mG+2VmCaOwuno08N+eHsYQ4RQh1rCt\nDarq\r\n=tjwH\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDlWnLbNXT29+p7WDwIiwoWNrrPCBfG0kwxV6goTQ9SJAIgXkhnR2Cgwgh9u8nUXcnmdtYX3BnCPHN3HPlAkAdvDNk="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"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":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"lynnjepsen+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-formfield_0.4.0_1552348880603_0.6178058480583009"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.5.0":{"name":"@material/mwc-formfield","version":"0.5.0","description":"A [Material Components](https://material.io/components/) formfield implementation using [Web Components](https://www.webcomponents.org/introduction)","main":"mwc-formfield.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/form-field":"^1.0.0","@material/mwc-base":"^0.5.0"},"publishConfig":{"access":"public"},"_id":"@material/mwc-formfield@0.5.0","_npmVersion":"6.4.1","_nodeVersion":"10.15.3","_npmUser":{"name":"azakus","email":"dfreedm2@gmail.com"},"dist":{"integrity":"sha512-sAQaIXY/s5MQdl/xvGkTpkd+VEBRiF3IOcBN2VKsp8hzSGQp/K6v/k6DeND8Yua/3s/re1Tuh21iHNt2anxUCw==","shasum":"53e5c8cb14649c4d7e71634a67b5cffe6583326c","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.5.0.tgz","fileCount":12,"unpackedSize":24853,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcmqn1CRA9TVsSAnZWagAAGHAP+gOMal7PYFfjRyKBg5hl\nQV5dj3rcbyhfiaNPcVtz0YWIx1kml6POxdv5tEXPakPSQP2+Kp8VMUDUbqaE\nZiSW/mvU6TOYYX47gGJ9Cyg8nZihkBFx9joUKfyo+RZ4Hj0KawzyzRIYwlws\nkibzaTuuAE6kcUU+Hv7R63lNEsK3jY8oiHdVsfXgFau6bjMJOyi7ziS/U9Ik\n2SBi6JOdg+plu2oIv5dPJhj7AX/l5DOvj+HFINQNEFcKS7zLPxR+YVO6Pd+f\n8CBJgO0vgcIDZyXjOgZ0wNlxBEWFsaOmhhG0L5KeXDmgChYlw+mW2sup50T1\nNQNJUX08NE20zSeYwCo4hkJrjl/C5U0Wjmv8fdykW1qdIv865OiPlbL6r8A8\nxcnw56KvfUyWFT9OXwEecWbGNgY0SRniFsLCCUaUb+X4rcke12a4oToxtHjN\nOe2oXhgha1AgxZkJCHvIWU/UagZkoPtAcEs77/+lJHv5iSGJHcGdNuCBN8aG\nOS4pWneQbaNMJGi5PfFBOby4vHedX/GP7PvgXaeE3eL6pPSG1O48ymWs6RFv\nNff+k4O4WPpHfc3/v9eSET4XexOceWwuc7ve9EwbeqKvOgV8l2JYAdNuNAUL\nn43RkiYUqmlC9xMGNZo4c3srYhg5Nta3XkC6HEj+FCARMyZjNnYMcmM5MSlN\nVn3v\r\n=mWEs\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCCbPRcpj2dtRgNVx6nInbVkhabDQeBHjk8CweCXmGoXQIhAOtPNLYxPruVBUKQ5Ffzicxw1II9QLmK7f/fBUKYcQkO"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"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":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"lynnjepsen+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-formfield_0.5.0_1553639924955_0.38247998862234733"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.6.0":{"name":"@material/mwc-formfield","version":"0.6.0","description":"> :warning: These components are a work in progress. They are pre-release and should be considered experimental, as they may undergo major changes before release. We are experimenting with alternate architectures and approaches with the goal of allowing u","main":"mwc-formfield.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/form-field":"^1.0.0","@material/mwc-base":"^0.6.0"},"publishConfig":{"access":"public"},"gitHead":"1961a2530cc20bc020bba88f4da76d085ad1f1e0","_id":"@material/mwc-formfield@0.6.0","_nodeVersion":"10.16.0","_npmVersion":"lerna/3.14.1/node@v10.16.0+x64 (darwin)","dist":{"integrity":"sha512-J5En/wloc8naR6ZkWvDjZkX4NC1skjqr0dAm9vH39UMcndioGkEX1GrvnUwWOAmeThwRBqxkfiqIdZUWjn3S0g==","shasum":"8c22b36b730f40cad8d2d917e1b2de65e6d03273","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.6.0.tgz","fileCount":15,"unpackedSize":256774,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJc+EAYCRA9TVsSAnZWagAAzBsP/08cNLYj48gcOP+8KhVw\nzLLc1IwLJjU2EUgH0yj4vUIt1UvboVnJrAav/ibykW2e88WjD/sghrn7VjSN\njTYpmRr0EbMBRDGcnVkcY5QRyqUrxlTeFn+Mg9wUXtqNHUzPB+Xx2Xgc8Oii\n6V9G+0toYGKPraz75SrMKE9t/B7QPPm3JP/YBCLW7snRBsJDIn7hAjTAle1G\nng+S6OfTLSy5vSu/aoV7M3scXkygOR9Rdb9npyWHaO2yaC13W1pAZJiheuTc\nDigagPWoC3UtHOwlr+cKp/zsM0JWjwsNMd6mmT60WFUwkT8OQrnjQhvug+Rw\nA1hWAF95dlCtxPLdoJ3l6g2a7aTxNUDa5dYlLquYZBSsCBLecLqsNbsgjABo\n+aBjKtHjmDVPUlLFOqyhFt8cTsSSnGWRH+9ed5/4UzkTpp9m0OCCpB8WMufO\n5/DIl00QRcQMWrpHFdKRBy9Y9hc5GL1/F3lNVMZloYlxZGFcbO52dJPfcic6\nIwlGe6CDDGRkJ5AStOKFPvekiR9gGqDH/D9UXyOnFJKV+wgZGpoRvPvEqc57\nhK4aRKc0PERKN5sStW6HNxVHfx2BgrIo3hJnOxZv0PrfG9UUzXRscKnUwJpK\njthV4T0nirIl6eCvjoISX5buAEzWmz/IWT7vEZ3SG57EnyMVj+IlnmXaxDIN\nJ7hs\r\n=c04m\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCEGVw8uH8m2dlHZ+92oD27Eg8+R9Sfv7EQOvN92msWIwIhAN4045ur6+pZoPykXnzkOsQ3pPv2L2/4zK/V+tmWYOXN"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"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":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"lynnjepsen+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-formfield_0.6.0_1559773207707_0.5566837400881561"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.7.0":{"name":"@material/mwc-formfield","version":"0.7.0","description":"> :warning: These components are a work in progress. They are pre-release and should be considered experimental, as they may undergo major changes before release. We are experimenting with alternate architectures and approaches with the goal of allowing u","main":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/form-field":"^3.0.0","@material/mwc-base":"^0.7.0"},"publishConfig":{"access":"public"},"gitHead":"c8c5d01ad2103af63e3d7656b5d1acc5ccaa05db","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.7.0","_nodeVersion":"10.11.0","_npmVersion":"lerna/3.14.1/node@v10.11.0+x64 (linux)","dist":{"integrity":"sha512-68nryyXPuFnnIPB0VkBu//E/fMKK3pOpqloW5/hS5HxzRmLAPvKNJ96oDNoseAayjBmJNemkVXnlNPDvoHNRzA==","shasum":"9e5e4b8b77ea07cec8ba7b42266b1e23e0de903b","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.7.0.tgz","fileCount":16,"unpackedSize":40569,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdZZ9aCRA9TVsSAnZWagAAdzQP/ic4WgMJhUfumsp2NoUr\nu5wIc1rsaCdZRfz9xItcqjMlrQ776EuXydoGfck0kITlcBZvcPFH5TnjChtW\ny7xtTZJHjQAYxrXWrX5FfTjqp1FIz7b5/cslmNmEwDjvJ7AbLgxi5DYIeWaW\ny8PKE8c3D2Yb7J42o7rU2RnQg1FxMEF7EmZgU9/Pg3bG1sgqtqLKLpPtq6mf\n3DsPj9Rtnmm/Pm4IAwur22/+JfXXcaM7iFe9AC84rB4r8MljDhq1/C0fcWOL\n9Bu8g0IQMVYSbpMP4hO5dRVZw1h6JsRodVGSZ40e0uFApzLmMBkvzh//AV1B\nPG4D1MwbevLU3AXYyW3e8CiOhaeRtRNWuVFzOu7Pf6B5saFkhCTFICRgn3mV\ny9a0OpKoaJc4yA5NwclnrmFplUdYPRTgI5OhTT0Z8iC/xJTT0S92pvwYcYSX\nQDqudLCJf55p4feZclhSNS6YS7wuZNAWu8F2zJxrEO2IjNVRz9OLV5PKlMaN\nykp6ICIbioXrFRfzqApNDEys0l3nHDHvzliEA2Z5bYI6vmS3+42fPpCTEmg4\nrw6wUYiTMAgSkowCCRCpTWYz+vMI7eI2iycGXFJS1haS2LlIk0r8VFomFL+y\nVF6krqxU6FaFFgt+Tx9b+9V9udrN+y9NoEffBP7+2kkjlgw0zrUSfk/Nt2sh\nllc6\r\n=xjFD\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCW1/Klh3cAx29dechiUX/8xa9cX7/dSVYDDdTnAPDxBAIgSgf9ed39aOegr72SqEBqocm9/G3o13zjiZWiREJxsp4="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"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":"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-formfield_0.7.0_1566941017840_0.6511923334238676"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.7.1":{"name":"@material/mwc-formfield","version":"0.7.1","description":"> :warning: These components are a work in progress. They are pre-release and should be considered experimental, as they may undergo major changes before release. We are experimenting with alternate architectures and approaches with the goal of allowing u","main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/form-field":"^3.0.0","@material/mwc-base":"^0.7.0"},"publishConfig":{"access":"public"},"gitHead":"f8389e38b66e6261a8578f4a748efcb7367da176","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.7.1","_nodeVersion":"11.12.0","_npmVersion":"lerna/3.14.1/node@v11.12.0+x64 (darwin)","dist":{"integrity":"sha512-AT975yBPnuaDVA0yE3HYZBJ/BJFivFpO8eUyDaAKaAXxlgM5/VdTvhZgdoN5Za+GgraXUTDgEBUYOGUZKyilBA==","shasum":"b8ab18f31ed2f3a8e186795d7fb4fa08e759b8ac","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.7.1.tgz","fileCount":16,"unpackedSize":40561,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdZezZCRA9TVsSAnZWagAA+pkP/jjcc1v0DhynWsj7Boe5\nZBhA2zv3jUZGtxrAbKltERPLvb5tZ3wqSVzafOHUnsU0EVam3XfkfRyomgnp\nBazZPZX1dOhPidpY3cVZrwQFHdhSNesb9WUAJCS1z5MqxUmjyRhi6pKOaajf\nguR63uC7O/U04SLWSnO/TUotawOqm9YcHNdvzXOKZzUZfqaxkVR1QT4iM0sv\n9YKd4GLfYg2fA6ugmApSUtN/foLfOp8xGJSGIWI6pCux684WAvtQMCV/j4MO\nDs6I5/CI99txGQM/UeMTjQxcsSF4hnLnCaXvhOvcKXYa/huzY2sl/XIxPtSi\nMbWXD3AsST8PEicru1B6q/kXq3feqicLEbeaUxFvMVHZu+QPW6OFLvTxf5v+\nTnYJ0kjcSl5YH0Fkoj4H3Vi0iopoI2iMtMnXePHHzdWuBuk2TLqZ/QtHWMnV\n70/plVbcT9YkHlnYOSqhBGKp1xaCVs2BgttgXWUcKoGoGK8UUKdcQKbFvPiu\noryJm9zJk+y+/1bX+MYxnS7EHHba1GeP2c/SpHAzFVmGzXGRtATboiI0MNag\ntr95q5Oq1iZxxedTDf4F+kHHusKbs7yR1JNh7lg/BjDenMu7tPovYEThVxgF\ntsR42ZBNV7khZIQ5tTm56tQpT3+aSGcPei4GIlidAxLs1dNuKTb0jf0LZVKM\n8nKK\r\n=ERL1\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCrZNG8cbXgCetdRDz/+eSzFL92jnTepsWmf+sXnHbDMQIgYVukVDTjQcAhWn1d4a14FtS0Ao3KADZJl7jXen/n9wM="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"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":"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-formfield_0.7.1_1566960856646_0.6492893805953772"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.8.0":{"name":"@material/mwc-formfield","version":"0.8.0","description":"> :warning: These components are a work in progress. They are pre-release and should be considered experimental, as they may undergo major changes before release. We are experimenting with alternate architectures and approaches with the goal of allowing u","main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/form-field":"^3.0.0","@material/mwc-base":"^0.8.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"e47de0d9d6e556ce8c4b0b92f87be25a3e18da79","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.8.0","_nodeVersion":"10.11.0","_npmVersion":"lerna/3.16.4/node@v10.11.0+x64 (linux)","dist":{"integrity":"sha512-xDsmQHtM8F9rQMSuiaY22mGSdVlYKLXUV7oHZ0GX3fqciafd0XSK03rjfmSmq/HSFmftWZgb5rbRbJWfOcUCCg==","shasum":"42abdf94eb81d2543517bb7c77831869b4a5bbb1","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.8.0.tgz","fileCount":16,"unpackedSize":39543,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdbv+ECRA9TVsSAnZWagAAgRQP/izrrEbMI/uKMGQxsJTm\nuZgbsdcU69BUU3FIEY9F/Op6ix9emeZ4DGLxyNmCL8cBmqnXKBMxEDDk9aO/\nrjPExioO6+1PNW3jUIPGfpxsWV2NGLgpOATSmZtBWLgSyqQGtLBNN4a26IgW\n2MYnfPpU3H5MmpIU6iAT6V7Ym32ZVUTR73qElXYIdl1Urg/WebZe7FDrRHEb\nDEXv1Xx9GKrMgpgKomJSHd2eL8SPC9LeZuV27rGQYH3EEMX9mpyFj1AOiDz0\nCkyHs1pwZm9u9Pb2UAUuNODc6VcpSudbZ4+mpByG87stXb4FXOthlQH+mqmZ\nDy8BOjBZLS/mixj3gP/6hx+B60uXV4vt1iz6mMW6xnyvc+vX2evqeQjAn/AD\nmXaLNM9lLMbSxPZW1J7QtM+seCfMegegLHZQ1tbMtCIkaFitzPXbhM81R+mx\n41tQ73PLSsvu9PqFPnz89AqrDkNcOSseYr0IzI7z7B8KLt+FmrAzGNsFKA0Y\nClFJsc0ukZEZ5+VTE3qWjbFFBPi+TLGIvlhdvRXGq2WVsjPpLhNj/pP3zFc6\nydxDRg5HvZJTZHXKiHstnVF0NxomPUw4fovQjSrsf7wY9MD6Mnb8RvPbw3p+\n7peadAp+fG8ynOv/Dd/5tEKLwLaZEjA04fUMSVcBsnwQ8hUN3Uj8X7aaq9cb\n3uK7\r\n=BPJE\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICOavPQqTz/538BkW9act5+hIh7z2IlJU6pUzWgl2KYlAiEA6Ra5gd+ZIRcewoZJ/MJEwLwsu7nc28ULYtghsa+n6NU="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"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":"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-formfield_0.8.0_1567555459642_0.11248225413471724"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.9.0":{"name":"@material/mwc-formfield","version":"0.9.0","description":"> :warning: These components are a work in progress. They are pre-release and should be considered experimental, as they may undergo major changes before release. We are experimenting with alternate architectures and approaches with the goal of allowing u","main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/form-field":"^3.0.0","@material/mwc-base":"^0.9.0","lit-element":"^2.2.1","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"d6db9ceafe4b21572f967ac4acae9189da8c9c4f","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.9.0","_nodeVersion":"11.12.0","_npmVersion":"lerna/3.14.1/node@v11.12.0+x64 (darwin)","dist":{"integrity":"sha512-wYokZnJuA42X3EomxNJzrkV7SoZKbWnjpMo4v1edkr9wlMV6YQkdcS5udBRPn0A1Lk1RTzjzvqF/SzCIHG7dUw==","shasum":"a5ca1e770c3af8cc253d0e7bbabef83bbae40333","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.9.0.tgz","fileCount":16,"unpackedSize":39720,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdjWeICRA9TVsSAnZWagAAFDcQAJ1xXD39sdzNFIN8iGV5\naMovmTV7w46ef+17l/4t/lFUda+zuagSDMiodCE13m0hPBb5KxVrZWY4aie2\nX0ZbzYBfXhEziXcX+818FmBJ6/cJtRmoROHwuFjtMQUBf8GLvDL7hJOkOuEk\nWtu+mxyi08rt4vOr0FOhcCYDYkODwiDm6Wg4WsK9aWsJuwTHwC2i/NfUT2Np\nVhgnrWOWNZ3+QaagETNfYb1fuS9WVWMzM0gswCs0SP6TsOxDP6JOIfUfVogZ\nHsaPee1VkU9UtybYwh4X9mE4dmqSCzzc4L4RjuV208KVqjlUr6nj7TMxUvyU\ncJwa/cDeyAfBep0ZzsWPV0mR/qbUvF2lbLzgL9P440VoBl/p4Ff66CJtXwA2\n5vSLc+jJVPXGMkSswv9PmNljp8HkyLrvdmZUEVpomxuA0t8D32GDVnZEQ03p\nbSO08fKwXIn2aqNr2UZidcq9hXJ1t47q5yC7CKKShGVQ78wpfVrJGgeukcg1\nI/zliDnbYLcyGkwhip7pzmQTNo4cOso3jHbLBtqMSN3o/HIyNwy9ShAToVpW\nX3O6a/QB3BsPZhwD3FGURrjTvR05265eICuVYJrYQBfEP5/XBP86qDuxy9RK\neZ5z+RSXeEqqlJfsSz4GNWF6QtSimeqWBZTWWNk3xe55t6XxQWAUoX0qLF/V\nbtgU\r\n=+EgR\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDzZ/FU3RUIeuFW7Se0q9jxta9bQ1MshpJnPWgECFhgkAIhAO1gPdqBCT9FMv4PweMEYGgBXzE8gvl4uX1/zgTMbqpU"}]},"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-formfield_0.9.0_1569548168107_0.2428906724056452"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.9.1":{"name":"@material/mwc-formfield","version":"0.9.1","description":"> :warning: These components are a work in progress. They are pre-release and should be considered experimental, as they may undergo major changes before release. We are experimenting with alternate architectures and approaches with the goal of allowing u","main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/form-field":"=4.0.0-canary.e851d4f40.0","@material/mwc-base":"^0.9.1","lit-element":"^2.2.1","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"2b2676d71b8d393aa61348cb8e3d9ed03dd8dc08","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.9.1","_nodeVersion":"11.12.0","_npmVersion":"lerna/3.16.4/node@v11.12.0+x64 (darwin)","dist":{"integrity":"sha512-MzBnr/6oNjsgxuY+TR6YxJcgYwm7xzj1q4RE4ZG7Qs5LhsCfzJ0ogvqzUvpUgrGipJOiLWEr3xrTbTVO4FelsQ==","shasum":"c69f77aaa694fd5219caf6bf6260854a6cfd646d","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.9.1.tgz","fileCount":16,"unpackedSize":39695,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdkm31CRA9TVsSAnZWagAAErwP/3BFvHccvsg48q/X6HZW\nAJLmeQfTni1ZuiSHTHJ9QfgKoNoN59WWVAiq87kBBaIgJi/QjuZpLngkeIWS\nuo73xVc76cmS/rzwBEeCH+asNRseIVXDgl0rbSzBGWUzEdqgwXL9lfophsys\nV3jN0Ir6PNYGqRYMvbXUL6MkrEIVRhao9xOpwG6IYEYGgxSNajJx1DIZ3KPP\nqb4sfXlxhwVq7CwUc+4s9ajS5DA82g5PFgyUXWfHQCg93U0sRyqR1AgWygHE\nIliiT85jEE8kpCaamZ+cZyDDb7LovHqrIMDKHIEhpoBK28KDTSmD86G8H7vB\n8HuxIR6ZLAIwkQVujSz6EcMRjJU+oLWvV1MFVo7LnJKuMojS+YutFHRC4yj6\no3YZTp068DlwS5s3rBZfVasOJhOakIbwNJQIV81kiHt9GI48KP8+CYbqSaNM\nl6FJqFUa6GnmviYfTT5kzUy0t+LS6W1xlJC4syV4hR+eS0ZUj5ouj2MaBpD4\nIxNVbRYkiYwmcpyHdf1cB7evo7CTGi+IX3DykSAx5oLpMihw0xubpfBBAYIP\nBzOa7Sg/Cu4gHemqbhOpaH0SBx44LFg17w62fhEe2BjDPELr9bIclaKEnmXg\ngZVLWf6Mx3hHCtYeUe/qe4ybNsnEgZBCIdW6M2lIruiHgzZFcdauOevARcn3\n8TPJ\r\n=IHCg\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCvaFXzBvbM6boK5rMi0kr8ILXMFA9AVgP/uEaGEl8U0wIgA16bNMm1FjoGPqquu10h17QI8Pw/fwEG+H2oVyn6NoM="}]},"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-formfield_0.9.1_1569877492845_0.3764954354111496"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.10.0":{"name":"@material/mwc-formfield","version":"0.10.0","description":"> :warning: These components are a work in progress. They are pre-release and should be considered experimental, as they may undergo major changes before release. We are experimenting with alternate architectures and approaches with the goal of allowing u","main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/form-field":"=4.0.0-canary.e851d4f40.0","@material/mwc-base":"^0.10.0","lit-element":"^2.2.1","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"631e70e3a39330ccade8210d1a72edc0f22ddc0a","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.10.0","_nodeVersion":"12.9.1","_npmVersion":"lerna/3.16.4/node@v12.9.1+x64 (darwin)","dist":{"integrity":"sha512-yiuwg0EKewvVOBqb6ulwZsSJlhY93HjynMfFxBJn3tYEzrMyKKNvspShZPx2UbrhXLjkGyukrXcFofBpm8ndlw==","shasum":"4fd55ab033625d615f7c68a95cfa8b3c496a93fc","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.10.0.tgz","fileCount":16,"unpackedSize":39737,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdoRALCRA9TVsSAnZWagAAYZ4P/iYFJoeRP4vr+jCZXAY8\n3/XWNMcyUtuxlXE98ImaV/57pyyS71aqaF7V9m68lKukEga9yAVO0TgA/H4M\nwIQMOIyyAAyLLJfNNaJCHPu1QiAc8EbzDYneeKK7b2eJXymPkUar1hKnavZ4\nxrtXOYq9dBbGd27FxLK7FVRfn56qc3lOQifSWnjFiB/+96aQbfBJSO2+1hQo\nZxWEVUd8I4aYq8ys9O8lWyCr0+qPMbm6WrDToDnZvbyzgzeagej2nbHfL3YW\nZoL0gSxEVsy/B5XMlTXTo4Wwg9gXy7hDTxf366Aqz4cxlRiUZRyW8JBTTyNs\ny3jcGfxsAKmK8+MsgGxs9uri5uqR8++7vBvD2NMnIB+WiikHaVwOlZyQG3EI\nMBeP53IQoJNOdpOStRuDkYToQw7URiOvffZHoo6RdQaVteUqzmrLbW+Jiut0\nfFMl26UU1tCtpbDvR5ep7Zj7wC2a1kjmHPdYLCOOy5BCD0eecPgsckWW8xMg\nMjIvPxebIVuuzwdx96zJ+ztjHNO9mPECksiHqRlXtGDwFBSSAGUFxzBPzFOx\naL+qXdkBDlSdb2/dtn2aiLqpAGjkg1x1fTlYO055xCowC521Thj0i+EupnM2\na6+0aRwuFTgXfB7idybwEiRpIcvyzuCErIiGYmGEVLq4j2s9fBnMIEKVRegn\nezLg\r\n=vNJ3\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGl7koUxYcLQlaYkDyeTMImOB1t6kXaj5JN43ataYHnVAiEA4y1GJhm8fl+P6YHgAfIWs8QatgnkRaj3/ZkW4EbhzV4="}]},"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-formfield_0.10.0_1570836491234_0.7860014012711092"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.11.0":{"name":"@material/mwc-formfield","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-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/form-field":"=5.0.0-canary.5729943ba.0","@material/mwc-base":"^0.11.0","lit-element":"^2.2.1","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"147d9789d99bf7a5ed28f6b066b8db58f5b9ab0a","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.11.0","_nodeVersion":"10.17.0","_npmVersion":"lerna/3.18.1/node@v10.17.0+x64 (darwin)","dist":{"integrity":"sha512-E1x272TW1fAId3kLMeqrhepKJywxpgppqHCmqAgQ4DCJRXHljkKkIkf+48nGcnYFR1l/pDfxZrl3/4QPSVUCTA==","shasum":"2f2add6df5798f3c2454593b05ba53e89229ae73","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.11.0.tgz","fileCount":16,"unpackedSize":40479,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd3Z3nCRA9TVsSAnZWagAArM0P/ijl2eAd0LmPbDyFl+a4\nfJMTi/h307n0l7oTnPl0Q3zoBWhpf6PVANabXoDqauAiOpmokpA1K/9ZBOfu\n4WBIiAYA9l4S7w1vmbUaptgzxFKe9Rpjx4kqyvpnSGP+YEm1RMdCefEebC4c\nt5jVk0HfurSU9rAxQ954l7JPZtQwoK1oWOENvLFz1KyJUx3NHBziJYI9ogH5\nEvjAelD/Wn5K4jtFAd+BKAfekP806O3XbwaStaQeE6GHFXw2Z8sYYu2WwtTZ\n/wPn9fkSgd8pyLSUD1sDcekDDg2v8/6K9Ge1zZulNUdNzTZbHEew2INaZc5V\n6gZbOJ/r4akR/8HAelKeQwVW5lfPtLFn63AVYxOVshqR2UE0XjhABjMPJNfz\nMdHqUDqzzZh3AUalUkT9H42mTKon3ctENwVuK9Gj9RWGOu2M69LOb3ir1z9y\nA1dWUfB1ABfqHIn78WB8VzOJhft+13p6NIGH5y10+j4AP7Ap4zLC0oWC91B1\nEGe3K9xi0TAwBdF++rbGUfgsTIxr8VFopnlfMKH0qGdQZtUudPZ/YohJjaxq\nW1nPwpLj83hf8DCNTofmUG67lfNachrEibHfdP/TjqJTo957LNvAQjhJe2J3\nP2fRjvl/llREUK+hm/WA/aMgrnZKe3Xh8sEJTv3EBtl5cTFTyKcWKAH+MUFN\n0Y2/\r\n=kFIz\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGOuPMTw/KAUKu5tsI7YknynyfBTGhYVTD/bcGJV8p9JAiEA/Wpdy4VHLW91VZjKADgGIjDCUWpsAd3yL+WAfmWCqrQ="}]},"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-formfield_0.11.0_1574804966755_0.4271999582774342"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.11.1":{"name":"@material/mwc-formfield","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-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/form-field":"=5.0.0-canary.5729943ba.0","@material/mwc-base":"^0.11.1","lit-element":"^2.2.1","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"395c02244bf15c2658cb110eb405ff2e4c0477fc","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.11.1","_nodeVersion":"10.17.0","_npmVersion":"lerna/3.18.1/node@v10.17.0+x64 (darwin)","dist":{"integrity":"sha512-vaTLmlgPPVnm0cbdkC6NFUzkLbjwWyKuP5n5AzZSHsV93YpODbNBk6vtk2piqqrK5YM5q3Q2JSvcwnHdV7JPNA==","shasum":"b6669b5b161f74a6050faac9f9c7da42f943e865","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.11.1.tgz","fileCount":16,"unpackedSize":40479,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd3cK2CRA9TVsSAnZWagAAf/UP/1BsydxYzFvm5c6Dzitd\nOM02H1DkWBUOpOz6vuUBGu6iC3x1Ey4ZVp3ULW3/xJk3gw0zXAXJxtaMqTB0\niSio5R+wqqisRXYu2yP32wIBj9MI9ywmFgexXA1F0Rdhcp33tYHksAc5LJzQ\nTFogsKW1qnlDilfn94sfeKB7UrLtAY7NbxGK8X974SdtDa9oR4P6k5TC1wX4\nfYkysXRtKwPsOaOB+ig2oq+fBThII1wpk0xNrLF436G3GwDMdk6CQsPWpbEy\n8OMhDDOwBctBHS40fP0zVC5LZHMNXIFHYmtVlqH89Ti7YkaJl1NDH/3OuTSt\niVpDT/GsTr6D6AvucTSwBa/8PH08kw0NsQ4htZlLV7zVYKknZiRAAH1NT4OW\nXqKWTg6hXRRfOMfPkzFTU82LMZ6cWCeALqqqeDRJbLV+cXU6dzhjKIHfkwpX\nG9z9l5k0pRyXzqE/9CCgwppIlpMNXajoRY+DkQykbD8lAe5IhfIrKsBhmRNr\nCT4DDBKDZzJTElFMJkaDe67X8DEfjxdnKho/c1p4tg+nCNw+hdgf3synUuWD\noZgHdtknifHP5YBGxrZbKevmYT2cKkLNv/vUlF88ABeSNNFlSmheDQfh4X9c\nBF79W3jGGjGu3NiGH23EksymGWOtWDQbiGlZlwA7bxTiEiKggH1qjNze6Bqw\npEzL\r\n=yZ+3\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIARFCW/BzJCseV2ApPLASD6CmJsbokKjUJC6O9J1S5nlAiAxdFvtJ1XH+PRE1Dd8X2W/C/QIvyxcUxs7X0T395MhpA=="}]},"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-formfield_0.11.1_1574814389852_0.3586525503475628"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.12.0":{"name":"@material/mwc-formfield","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-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/form-field":"=5.0.0-canary.1c494e567.0","@material/mwc-base":"^0.12.0","lit-element":"^2.2.1","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"4c0dc16b89066f24fca4efcf78c36c87657f0a03","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.12.0","_nodeVersion":"11.12.0","_npmVersion":"lerna/3.18.1/node@v11.12.0+x64 (darwin)","dist":{"integrity":"sha512-iyT8W327L+MBMRwEBNFlYf5vGpiRH9sbujz0FOEOlpHpBiXGcDazKULt4EHdDkb+zbTtZrZsUw6LskOwfOLzbg==","shasum":"5f82e399ea52c476369b28d112796a9d26c2101d","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.12.0.tgz","fileCount":16,"unpackedSize":40479,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd+WkjCRA9TVsSAnZWagAAPHEP+gN8T/7PvklpvG+Gyh9J\n+uWXsdrHFvsgwzbQU+B48sd9nIsa0vX/ZHBa7P6TItGM7QTWLh7K6zElpW60\nKQ7C2ZNu41Ff2fQK23734Jx6YXo/ONunKC4cCnZoX1Tp5N6dx/8ozShg1hVt\nNWfOrsPxVcf9J+v9TEGruUcF+kBYfEzkUA5b2fl+fuRMzcucYbH2B32uz2FO\nXVSxBzs/zAZGpbdmQbWBcHfjsAFRga9bu1UxOE4JkvzfTKU0qjG6yQYu2VR0\nnLUwz9/XzTQ7tsUqReCa4nKv2NQLi19ipM/I8g5MpReHb3jHRAcM5NICzNdB\nIcnAPx8iuJzVmypnLf12VMxHHnvpKHCttOw453nKxqohKCDv8PSp8sbRLLLp\nobjziJG6Yby7Sj7OQhRFK5Ihh4oyFS8iU3BsohFQO5MhFho2HpKlNs+M+HhN\n7lhWmborRc9qcopq555Jbc4ILG62/9piOWm7SNQ/eiVCx+VN3nuSdHygcrLA\nYduvpJK6KjhXAQ7CT8LuCxeeFemRS8EFJcrj3PqQo5udU4En+t4zjzlb9lQA\negWZfym5EuipGGTw+NMQWpb3tn4JJi2rm99FJ8T2+vphIxPUbNOEB8LvjSdE\nyI+ALSE2PshKsosgK0B15QAbt6eX7KE2A9EjW7TIMZxG666o4OP83rJloqA9\nv73h\r\n=zBq1\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEJ96hreswWb7WLBC8AG5FUwb9EIt+y8OCsFOAISVRhrAiBtdKOBMarjszt3PyxnUBDIEDR4Wm6EpaZezVAHrFoFJA=="}]},"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-formfield_0.12.0_1576626467077_0.7058418282978491"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.13.0":{"name":"@material/mwc-formfield","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-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/form-field":"=5.0.0-canary.a1a0deb3e.0","@material/mwc-base":"^0.13.0","lit-element":"^2.2.1","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"054d0d234704a274e8aaf7d8a8a0399f525914eb","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.13.0","_nodeVersion":"11.12.0","_npmVersion":"lerna/3.20.2/node@v11.12.0+x64 (darwin)","dist":{"integrity":"sha512-LQ4cOEq6jDAiOyCk4zpIVhizkuowY4RozAqVsGhDzgpAbt9j+8RE5dzNhYfSw1cmubamQN15AeCh3A7NrU66jw==","shasum":"f7bcfd493f97e6557d53dea42193139d3e2fc17a","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.13.0.tgz","fileCount":16,"unpackedSize":40476,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeOPckCRA9TVsSAnZWagAAPZUQAJvBUG5QqBgw3xWDVGHn\nFSXWo21f5uutziu8Xsxz9pbGkjnFTkIPAhvvi1VhzVlA5Z4wM37CgoqqGvyO\nXJvnXwhZRWKoquqmZRwVmSgFC1V1tiwx+gQ1Vv8cTJeJMxnuu46fVJzkNTDM\n91NcVJrvomfNZft8RbGw+5ttM9pHV6BH/ZACP4CJdYiV2BK7+rAnC3dwT3/u\nzck3pwgQYU6mQnSTmqvoVbiIoNaXbUvrPMSfErp5/iMv+l1J7ijvZ1OiIr8J\nadiiw99AumoONoAY2uUhFbUAiSDyagQLBdHjKSpjjLSAHTx2mq9ji3LrF+sT\ntAo/RKP4NSvS1QYY/irq5qfH+AmGfQiD7knewuZPVqu1V6xx70FZakeO8se4\n4r4fL9ANczz6rbx2Z4nv5aRxk4/cFOJZp/1ygM+Cx6A4iZAbh/M7Fj6HzQXV\np+TFcK8JP2+OKTEMDxroxrLZqVrYvSrRasGCPsRLlYOo0GcxL27nZTJhfGf8\nIAhRtxeLnilb1Ez4uNo2nG3UYurLHrzs5KRSW3rtdQnNnfygo8/Bm0cT8Rbb\nJS0Z1NnZVsTZ5S/kStm8xwIM9BbyWG2DVXmIpOGDf6k7pFm1mWKYdpouRTxU\nOPAL5YbM51w4pN0XbhZy0kCK4rCmUL/G8SzWEh4hHPVrqmh/6CCjaQXHLzOH\nW051\r\n=0xag\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEx16b6GPeTpglFclJIDtA8l5iL5mlr0xaF/9GxX0PcdAiEAtl88XHdlR5dGoLQ0i8hamSbtC0IQul0+NNvY+opsBuE="}]},"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-formfield_0.13.0_1580791588160_0.532968313863101"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.f790f713.0":{"name":"@material/mwc-formfield","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-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/form-field":"=6.0.0-canary.781434a92.0","@material/mwc-base":"0.14.0-canary.f790f713.0","lit-element":"^2.2.1","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"4ccf0f734c9b727a925e62b9999d4380351c7936","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, 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### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4ccf0f734c9b727a925e62b9999d4380351c7936/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4ccf0f734c9b727a925e62b9999d4380351c7936/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4ccf0f734c9b727a925e62b9999d4380351c7936/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n*None*\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.14.0-canary.f790f713.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-5zeclh6adFEbQI9CtRdEWX7oxRr9HdMPVPyarXfKZ90PaC/d3ImPSkE63N8GcagwI2shsq12pECsYzdYtPUtKw==","shasum":"2f87459a54cea3c8134e2a7605b8438e774cd685","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.14.0-canary.f790f713.0.tgz","fileCount":16,"unpackedSize":43469,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeWHquCRA9TVsSAnZWagAAO4sP/j5QUMgdFPbP1qdvW6ua\n7OB06uPgp02q26tCJyyl9PqgwTfTomxhMF0HSt38SFqV+Y2oCiy9Bpyew/sZ\nh9bTnx1HTmz4OlYwjrOD5tNXURnkI5hWCtMj520MlUiY8CRNmwUW486A0gaG\nlPR6xNJh8FS3sW0oLk2Il5/n+sR+wPdQKa+JIcqjkfutYWcGg+pt+1aYxS+j\nAqqeJhaMDm7VlQ78u3IZ6HoVW+ykPC6D1CnIv24KTsnxASgDVIqC6alNYLUP\nAObeG8GrMm+rlMZQ3YfqcgR5GaFiUhbzQlUu4vdbbkS0CWs/9YeAuw/9c9VU\nF2Z9mTJ1c7SerCUnctMEhYAhmmEoK0zoAW7VTDb/OPRe6W+vgogFw7E+dBTJ\neCm0AqPDLBZwPfNykeA4cuPfJN7aNSoe4Kb8Li14fQFL4A+ez2ByU3u3K1xx\nT7HFSYKty4W/QctYY9jnfsGpaqdHImpYpRsoAFnM1x5zO05oNIrv9TnqWYtV\neuHvqLzeQ4GXmNJhSCb3BChG/yzWI/mW7rG3391f0moYjmW5SwiQnVYQei/j\n8XY0AXSzCsWUYND3V7fQQy03sxK7y1CxeltjwMO9ANiC13n9WyqL4+2o9ea/\n1Hq292CZLrc0JK1LN4qciwG9ixXXUk4AjezL1BX6/ypd5bkezUnJtHdkYgc5\nXryX\r\n=5DG/\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC0aucDP+GmEjoIpbO8L/bv0uFMoKbPkACH429KSReeFQIgDK7jAI6T3q+qAHbSTPqyseG4CZDA4LbnmljAtnKRkTo="}]},"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-formfield_0.14.0-canary.f790f713.0_1582856877592_0.7744977374378623"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.c759cfbc.0":{"name":"@material/mwc-formfield","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-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/form-field":"=6.0.0-canary.69edc6e28.0","@material/mwc-base":"0.14.0-canary.c759cfbc.0","lit-element":"^2.2.1","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"e0a8ac49c085c004f390a2995879e67aea1010e7","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, 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### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e0a8ac49c085c004f390a2995879e67aea1010e7/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e0a8ac49c085c004f390a2995879e67aea1010e7/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e0a8ac49c085c004f390a2995879e67aea1010e7/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n*None*\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.14.0-canary.c759cfbc.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-fqliMWW8ojrl+UUfzDOWcsfccOlf2H/6VWamkhF3DDhRFG9M6gZPZvIAMXSOF3FxoYetYquWawPUcd7E6txkKQ==","shasum":"82e0def14965b88afa0f02a973078c18c279eed9","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.14.0-canary.c759cfbc.0.tgz","fileCount":16,"unpackedSize":43469,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeWaqSCRA9TVsSAnZWagAAi0QP/i/4a/PYdW9KlAk7RNLE\nzNV18jOyOm1Qesx/m/kpDT2rkp+d4IIwVoGcZkegfZ3gqLo+f5XBrdDBm8OI\nn58aMegPzBEKbqja1JQxmpl6X+DWcAIATdzgrC75W4r9dDZLyLb/ymluOYZi\n6Jpe4togJR3Nl1eEav8Mgbx47b6JcWc+4cqMhEqdc/pn4wQy1hetfo4/o6Vs\n1YFFrsd8MLvk9tSQ3B2F54x2YDwRX/Jwsf9g+MY37FdvfZ6s2PWmbwFBZ9II\ne4kHIl7kajEQI65WJLxDAXXfBJoi6oBfuYNJkH/ji4Cey33WNndcXShVoOBi\nrLESD3u2Rur/pl7MA0Ayn9Kz2LEmZdWgJ+RDNL0KYNm6BOr/Atj8jncg8zd8\nyXxPrMC8i44oK731araN4V65aXiBlIfpbwWJdWPe2+NwG62nyarLVA3Uxr7n\nRUM9YNrCC/W66CXUPvgplPgEEsO0Q+WeuxWhEuGtORmsC/cE++hh35IZIu2N\nfhbIl0bKADCLIx2tExJmokv5wDEje12Uaa8cVDl8sYwQkptIsScKNPwEJpGe\nB0qYMKqJFcB73Kie1fw6fnqw+gN2DsF8i7U5eUcv57pUW9zdn6xDhTcVYchl\nNJRngLlnyDHDHiZwZbOGChgEcYMeq8j++0eMvtK8vo/8gw9fVGt/W71XaJrx\nj11l\r\n=ly+l\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIF6KI1H9HBTXamJ0qOmUUue05QQPwzCOSMtMDkrIagBrAiBqHlHTnNcA3pXVYK0nsrh1H1fXDXI7rH/jrC2prLSkAg=="}]},"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-formfield_0.14.0-canary.c759cfbc.0_1582934674060_0.3929627784317431"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.97ef53d8.0":{"name":"@material/mwc-formfield","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-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/form-field":"=6.0.0-canary.69edc6e28.0","@material/mwc-base":"0.14.0-canary.97ef53d8.0","lit-element":"^2.2.1","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"c6865476c6b2c4ccebc9f20145aa8fdf93e1252f","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, 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### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c6865476c6b2c4ccebc9f20145aa8fdf93e1252f/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c6865476c6b2c4ccebc9f20145aa8fdf93e1252f/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c6865476c6b2c4ccebc9f20145aa8fdf93e1252f/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n*None*\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.14.0-canary.97ef53d8.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-XSsmJS+6sCJD0TkN46hxVMQpU5dKr14j67eXqGorCrODzplMgIGfI/b6zwURGXD6iule+29WwgD5noutyCkEqA==","shasum":"3db7a923d0c669eadf04d698dfa30df7c34541f5","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.14.0-canary.97ef53d8.0.tgz","fileCount":16,"unpackedSize":43469,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeWa27CRA9TVsSAnZWagAAw/cP/3+IFxY6KTbPLF38dIbq\nNftyZ+hVFtSAI3S0oWko/hTmkByHA5EuVQ3YRxRySy3Fv0vu7QIsNRkujrJK\nd6J0R+Sfo41AmGRKqT7RFLBHdfexeeTdz1pjpf7u5GR4JsRS0kbcNeNlmlQ7\nho2s1lT4MN4vjun5Uy/OcpE0dstqYuH2JFT+tvwjxc04YLB+uN3NVQPbxo9d\ngPENnVVUhv71/Sji8+D4f1BI+yd0ldcWmsY3FcfbQxfRz3746wxY0NXIg0Ms\ntQrCavhvEQ9YOSLUCvcApVEROSEm6VbEjE3Fz8lwr6FyF2brLDDSZ+/+U02F\nnzoNAsDNRhcXG71qa3zGykSf8/9Y4JzUb+1+VlBJiv6uuPlDWaAnKS2op8mV\n4gIfg0eaJZazG5Fg3TrBdk2QpGBoOAaaL30X/rbA16OD7S5/l1Rhh0Pr6LQ2\n84HJowHARIdgMj2CenKqbMHU1YI++PF8UKWZvdwTx3xY9CE7CgD5GygYy38P\nGEnvfYyBTKeitGmBs+UjRf4FRB8m5TpsOQsngBwmkBlIt4/Nwz2+xMzEHubz\nFzcY9bKzQKzTPRsY4h+hgjAp9pWHQA4SPNaPEbfWjVIa9TqGYbHjs/ZDGSRw\nG4BAF+Itz3HOlboIpfowADUwzchhgwAPO9ZifIhoqzm9CNk+7WghVAgVkRD0\n/qMS\r\n=DQLG\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDqw8U3x+WGuVgYxzDnf/nb+tQHk5ohAUf1OwqNqMv6GgIhAPfQ2jomYv5OAysXti0DQlPfFLk5yOJjWaVTkdm6UWFh"}]},"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-formfield_0.14.0-canary.97ef53d8.0_1582935483441_0.5951145306802046"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.24f5fa6e.0":{"name":"@material/mwc-formfield","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-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/form-field":"=6.0.0-canary.69edc6e28.0","@material/mwc-base":"0.14.0-canary.24f5fa6e.0","lit-element":"^2.2.1","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"e884595521a6f82f63b8dec96fc4450410e37a09","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, 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### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e884595521a6f82f63b8dec96fc4450410e37a09/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e884595521a6f82f63b8dec96fc4450410e37a09/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e884595521a6f82f63b8dec96fc4450410e37a09/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n*None*\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.14.0-canary.24f5fa6e.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-NqMaayiioLTekljgPOB8s2S33YrmUwhqgD41sSe9TxYPYpuhnb+blZHJVDm6XJs0K3WjNesYZXoB35q0QrbDrQ==","shasum":"bb2bbb12c007789b3b487e2b3867758c69419e9b","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.14.0-canary.24f5fa6e.0.tgz","fileCount":16,"unpackedSize":44039,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeWbmMCRA9TVsSAnZWagAAM68P/0B3G+gO9AldLuzp/a5g\nK3sYoHsj4yLUm+7I/PJl8imzfEkTdQhx7KuAsejoD6/PKr/yhJsHnvKB9ene\nee7RLNVgtb5BdDH/1lDyX1nespBthvkTJGSlnMwWiIDAs71yNnbBl2uabjv3\nlZiQ5UKc3i+HP8fclJm5mlSnCX4uuBBMSKNOKyZ0/yEXiiUp0AkI8FMkayTE\nwys73m/TowNNauMkbItTJwRtY/4ViAk0wC0Z5ahUEA1l3YCLCkUPkXxSPSDV\naqOdYAN1uptlbMssakwe//CU7aw0516BPAZznqzh0g6urMtGkhkGlWcJjz0b\nPOSrVvc6mh9Cw+QxUV+V9ivrSwpWIWqRZc6BvXk7W55pdThZ7dwWaBcpr8j9\n5T3ScaEjAScuDsCnX7REg4lv6jb+HzITl7oiS9BbrogdGMsROzFI1Wixm/LF\n0OjKItkif2iiXIKVEB+Ya4hDQhwddj4Zm4YcvH1A9PvHWKnIo2l9ql6yjQHz\nEFBgaRwFk5sif2CWGVDO3OT4Np4JSTee7bVaKxVKnRxZ78yIKxCnJnktAYEo\nZggrpy39bCLW1ps2EdQvqLMTgDH82rS6+QumBvzQHCocm9vPXpbCMuHkN3Xj\nfRS1KzZz370Q91ghybpYI3i6Ntxddbir3ePdhZOO3Gshb3vvIpvWbwiYAddO\nEcOt\r\n=eMo5\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBF2WKUFJ7dlyAdNv8J2mPuBSFU+X0rznB1wSHNY6QA7AiEA1Hm9df8WPyzkLon8ExPyRtcALVef6yMCsyAxAqOI4Fs="}]},"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-formfield_0.14.0-canary.24f5fa6e.0_1582938508518_0.1972252020693379"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.960e214f.0":{"name":"@material/mwc-formfield","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-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/form-field":"=6.0.0-canary.69edc6e28.0","@material/mwc-base":"0.14.0-canary.960e214f.0","lit-element":"^2.2.1","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"9c56e2bea6eda03e423f3f7ba00cf95f684660f2","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, 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### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9c56e2bea6eda03e423f3f7ba00cf95f684660f2/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9c56e2bea6eda03e423f3f7ba00cf95f684660f2/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9c56e2bea6eda03e423f3f7ba00cf95f684660f2/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n*None*\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.14.0-canary.960e214f.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-DXd8iqNQPKOMrWp/OfAJgFggMKP+6PasNRZBpznxp5OhUFk1aH+No9btCocmdw6Ph3NU8F2+2dBMBZODTNi6sQ==","shasum":"9ec374cd60d77f3f64a3f7af161c7d14d8d2a280","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.14.0-canary.960e214f.0.tgz","fileCount":16,"unpackedSize":44048,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeWdW/CRA9TVsSAnZWagAAdI8QAJFtw5R+rlGRDaBIMIa1\neqeQnRMT2pbAek9x3YEFvn7IBolOGCIlyPIHaHUVyyaQBoFtUrzjfgLlDQGB\nyaOvdkeEB41PpYLbiB+fckG9OzBK5e3Mk4rng5HmvNv7cV71NqGmP9HVylue\nB7OvNhR8RuJLO1Hx+39MRuw+3KGe0PYnP37Z4TvK8ZTYgrafxgS4SuY36EWA\n0pS2AVoWnXmwOzxhNhIrpQ3fwkNwnXzWSmhZ1/AG2hjqApPYAvhHjtOiqoEo\nd66TQ0NoO/5ET2ASjm09VugLEbInbLlpn8RJ46TQT1N5KHQYllHs5LqqD7QW\nkw8QxArqj3Lnuh7gpRBVfCCTa6TzZAeYzJOG5HayAsHEkQ5Vm2B9VRvElMEr\ngq7/XHNizKGbp4Oc1a/a2ju67AHTlUfNeYbbvwuaTEsKO4cLNR8+xzNcXdNx\nV3Yi7y52hzRerEwPuWTL1ldjUGaHuzlZQUFGrhgvzFWLBGebkelY4Dn5CO5c\nW6q1EZlk3x/25Wk5wuZDPCqd9v6oQWeG9h/X6qu4nSSDYZ1AsQCS/0eRodfI\nn37YjC4spPXml1nMNWrT/0/siyG82kwajE/SGwohw8Wx65TgYZSGiXYOHeb7\nUGlRPwxMYKr7SFPFQNhlOF0qI0Dt7rfl/9Ir4nYIF0FaIGX6kaY2zKGEJ9Yl\ne5MC\r\n=puOQ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICr24wGlzLu88EQbijoDyUzDfBiu/0fKNETMBwTn842mAiA5FDY1cKDoCCnhiLr/kcrKL261C/GgoNYCKoVMaG36hg=="}]},"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-formfield_0.14.0-canary.960e214f.0_1582945726976_0.9014209128568611"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.a2f046f5.0":{"name":"@material/mwc-formfield","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-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/form-field":"=6.0.0-canary.69edc6e28.0","@material/mwc-base":"0.14.0-canary.a2f046f5.0","lit-element":"^2.2.1","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"b2845ca1286088f29e79c96b6d5c5367873cce11","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b2845ca1286088f29e79c96b6d5c5367873cce11/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b2845ca1286088f29e79c96b6d5c5367873cce11/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b2845ca1286088f29e79c96b6d5c5367873cce11/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n*None*\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.14.0-canary.a2f046f5.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-4gMKbajm9Hu8DWVrAVIPCWpQl10e0C9E9lokp8+ldqiclc9e/LPmGBWToQfbvSU5H2uVeOOnQn6PgaaYtK7DAQ==","shasum":"1c9c8fc012c32c703e74d5c378aef7c7b35f2bf0","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.14.0-canary.a2f046f5.0.tgz","fileCount":16,"unpackedSize":44021,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeXas1CRA9TVsSAnZWagAADq0P/0RiDoROF517ns0QCx7r\nYd9Qyy5GWhpEu3NstXeb+Fo63HK3jELpamaK1aMjUfruF86zjimTO3t+Uw7F\n5me3KvRwSO2pP/O8XugyZdNO7tj/jR0JVMv48lTkNuU4T0ljHRvWSoZLhjCe\nv+MRENPj+m0+KRSZGb2ZiEWYg7LNNkBnbYAv8ZPBFcL0UuLu8CthUm7gWIdb\nZh3BsvNJLDO3tqwh7pTWUKkIf4Ay0NwVSuZmFkay5hZa4tpqaERGVuvsDAwB\n5J6XlXCQYncnz28twbW09EZ402R2jHNxqCixAdgnsYEqZD7P/qD0nM4FzU0B\nWTNcKkrcqQPAKau69vlwThHZqNtj/jPBz/p1TL9yQQ7WLEYh9bY9yHLmmcuO\n8G3Q3pMHog4Q5vLRoJgQGLMC90ZkLc2msCPIptcOQDa3ZHgzyGC2OayGxgxQ\n3J/HVHce1DjRUQjBsazPgBIQQOhCmxfc16D6Fd1PmJ5ftCri9UWjByXJrI52\n7T+qyT7t5BX3cRWlx+t/EJQVJDyNE34pBL1DgoJYJkShdcuxIvmncSeoEHH6\nedsqxO0ZVGEPzl/Utw/sILwkzOAgAgiGuELoTm25isxLhK3+iA1q4UotiMNM\nmEJ7c/i8N7RJLCEWGT8US+MpLQGTrGvmkH4kRPnuCiJBJOV9Yjwt9g5soBdX\nI8X/\r\n=InKa\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCID0k+YmqxEyxy+00DQNkHKppa/N+tTMbsoemxQEYfl5kAiEA0Eqs+KJMOnSS3Je3z+BCZjcsIeCRfrThAHBlmr9JB2s="}]},"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-formfield_0.14.0-canary.a2f046f5.0_1583196980745_0.9655616346580844"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.024f371a.0":{"name":"@material/mwc-formfield","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-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/form-field":"=6.0.0-canary.69edc6e28.0","@material/mwc-base":"0.14.0-canary.024f371a.0","lit-element":"^2.2.1","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"efde2be2f22a9a7e20f2b0d57c4cddee405ada0b","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/efde2be2f22a9a7e20f2b0d57c4cddee405ada0b/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/efde2be2f22a9a7e20f2b0d57c4cddee405ada0b/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/efde2be2f22a9a7e20f2b0d57c4cddee405ada0b/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n*None*\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.14.0-canary.024f371a.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-PSfsdR4tALViwvval/7mZNx96ZX0ODs7X1bBsGDip4St9Qvtg6zGZsn0saXXXJUIAwB8THgaHT+9qYWP9pFQ/A==","shasum":"f0d5879f74779f74940b64785fb9ec66607902e7","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.14.0-canary.024f371a.0.tgz","fileCount":16,"unpackedSize":44021,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeXbLHCRA9TVsSAnZWagAAlHUQAI6W23bCS6zjxI0EQem7\nv/2wH9ss/du3nufzDbQdC7N4I0e02nulvnsU5XOFwXW6XU1tw9Fdm7dgOach\n5+kCDoQgdHsul+lPbMU/teSSaFGNsr2yC2x7BDIIFPHb8dzsNnoXLgX+vvOf\nVPyfeVlWYqkiRQl8BFrNmwZ95TkXhb5BakfiOwiZpLchqsXuiS0BPn7HBLZA\nr1TBJaFKiQrweuwFkd9ASqRZjAaSx/Jk8WiqiQz8UHB6Em0I9CRF2FDYm87f\n8sk2XjZKMQqFFAxFVoi9H6Q4Cd4y2ze7FOm8xEIZ9KrTb3PeGYsZbqvXFTpu\nfZrsunn4rj+cq2h5JgNbRW8lI0tGApz7nVdaTig62lh8vtKLUTdxNjq18v5J\nb7KXNqQA52WY4NBEEqLGrfG2Uw+ihvylmdwyRwFXjI7uvd/0cjRuSPDAmA/z\niyBdyuh8suSjtXki/ir79n44MbcE1akBQq6wG6eV6NPf9r1qr+ybr1CpX0Xv\n+B0wDHzVg37YKWHP2Lw3fHtxrl4HQJi2+HXMxSc+Zi+dPQDHycEF12o7gcj3\n6LOOpNj4OyqFZkbBmY/jk0RNiQ+NHT/E1C08td4eZ8BWikQ1L7E8dADXy37O\n2Qj192zSIJHcwCuK26Vm9bSONbHQxh+tCJa8iuHefE7HkN31vuoxNSoLtjqy\n7v4f\r\n=gB/7\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCGziBpI8ZURj+xZfgK6IK4r4YH1cOJ8k0Pcan7sByQvAIgQUuMrYiVesp72RgYQaj1gdcX7KYcjtv72K4OY3YpNmA="}]},"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-formfield_0.14.0-canary.024f371a.0_1583198918767_0.500318661412525"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.2f164110.0":{"name":"@material/mwc-formfield","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-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/form-field":"=6.0.0-canary.9372e4939.0","@material/mwc-base":"0.14.0-canary.2f164110.0","lit-element":"^2.2.1","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"288331a2ec51b59facb4791d01e4d2ba8f4b7cc0","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/288331a2ec51b59facb4791d01e4d2ba8f4b7cc0/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/288331a2ec51b59facb4791d01e4d2ba8f4b7cc0/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/288331a2ec51b59facb4791d01e4d2ba8f4b7cc0/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n*None*\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.14.0-canary.2f164110.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-wT5YKEYewqbIO8XaCpqEPNrEkn55f8htUR1H42zTyx0Cgcv3PPdR1UiEThLJSCRFSDm0h+uDJNjUTN+kY4Dq5g==","shasum":"8cb6eba7540e2ef52b0258fd8b56d63ef5742126","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.14.0-canary.2f164110.0.tgz","fileCount":16,"unpackedSize":44021,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeXs0sCRA9TVsSAnZWagAAd7kP/jr7QRwtGYIl0DucF+5i\nie7tWF4ZLD+4nbXW7IgTYeG++HbJVT4C5RV1PM1yy1r+JrmHirX05MMv1Fdi\nG1mAISlUTcmHppaHetdygyXc3vsOARjpxugETX8xdMXcsyv3MTbw2HXAcRb9\njTe+tyZtMwb3GnIfUKQ8ppArkO3mbWiO8F2I/yfYpAw9gpefUYLsrqOfcYpq\nO/GxWA2EuL7W2KqY+4NrwOpbxXcGyadH4b3b3Vsb3neeAUi1/qCQJJNAYGHl\nCR+tDN8lkbVMoE19LqB8o1xu3gaSc8rZ8iYS3cV2rqBfl59oFFbm1ucayyZU\nPImorOdpYhZJIV/iap6RuU960SFlBokddzftz7X+B7f1HoNRikshC13Q3xvO\nRQ7Amd5Y0Jdcq0MRGslhciXRKVxXC/wl/WRCxC2SlNmr9iGFxUwOtHyIMgsp\n1uKKm3Y1/cRk8rzkDLoHrox+PnZUEVJd0Tx8Aw4mCqOVvIaw7F+eA7anGaYn\ni73J4zL5h2HrAJNXGNitYqj58GzOsv8AKtzkkEWrg3b2ClQGnME5u8dorVpC\nxjG11IYTavg8nDmtW1bsq41PgFWPcgQKB6K3fJZuvVB89nITLd4eW/QEvUpu\nZq3HD05hSoh9Ou1mRAqmQJWgt/vsUV0MRDVQs7uDG/BwghWxGCbRFe3cDwmw\nskuX\r\n=cnQj\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHGutg6bZlvNw2MP6d/aWoYMk++XkReIIE4oXaZA8ZcjAiBZ8yWOMhrFDzt1Jb+q7JkoWK3CC0WjW6EddSc+5EqUgA=="}]},"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-formfield_0.14.0-canary.2f164110.0_1583271212342_0.08360095932898104"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.edd465cd.0":{"name":"@material/mwc-formfield","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-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/form-field":"=6.0.0-canary.9cf5e9842.0","@material/mwc-base":"0.14.0-canary.edd465cd.0","lit-element":"^2.2.1","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"3954ee24dd2fd1d9171cd7a967586e7d2b34ae38","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3954ee24dd2fd1d9171cd7a967586e7d2b34ae38/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3954ee24dd2fd1d9171cd7a967586e7d2b34ae38/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3954ee24dd2fd1d9171cd7a967586e7d2b34ae38/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n*None*\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.14.0-canary.edd465cd.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-tUM10VE0u53kFOqigSYJCm3DLoZpgQ1Z0x6EXksyRdQjZwgB9qYhOeOM1xRZqJpPnrjK3V7A5kSmI0aKZyYqIQ==","shasum":"93f68fdcecc8a209ed80ca209c94a031c82a56fe","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.14.0-canary.edd465cd.0.tgz","fileCount":16,"unpackedSize":44021,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeXvH0CRA9TVsSAnZWagAARpgP/2R84QgSLUMGcl1MwtEk\n/sGvnXbD30HuM/vCk6d3E+FeV2xhWVrlgMTuNmNBiB4zoJcoRt768Dfl/KxZ\nIjGp8/8C6hX++y7MEqZZW+zv7k5gBcK4d+RcDZ3CAVPwpZhAJ/t/PodxVvCy\n/oo4xkqoFWvjlDgXlTpyR9kY81JFkr4LPtbvS6mG3PfCy0Gwu8ES8gq4JLSw\nkOdZoV+Bav+1Va4KmbWS+AtbIOWObk3Sav1faT93oc65GYOJx+6Fxc4C58+k\nS1Asyqax/dGaQS7+E5Laoemz/iB/nU3ezDxN2I9tqwAu0hbLQNI6YuMQWjpM\nuTvXBhvLkp2sgPvb78bEzJynRYrbJysxP9lY88kEwiAguZM4XzO/e7ZlCt+D\n5CKqEwKr3t8loIbLX8b1jdSI0U5aoBoT4Z2GrPuAGgnz0CKohnSjkxfZFn7n\nyHEFWVO6TbDeTxpNQPt6NNEeukgajpdBl++tppWQv3OiU8WNKnNJlKUDkAid\nHxmKayBTDCKgVGv8G1+lT72VyoeddeLQkIfnwY55I0Y/ItdzFta9CSIIN1M7\nV9WxU4dtRfXnbNmh18HiSD6AbpAxnmXuaJhxC1AmlhqxGcDLf4b9kaMq3P6r\n8OP/U3hOW8syHE7q+PGcGD3wgOFKTxDE7YAtOMMCptb4xGQDvPnjmnMx7D5L\n4Kq4\r\n=dfot\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFaJ3Qhgj2sfSLOf9akKG//uUHS8aQqgeumAiMumbKdkAiEAjHVtYWNlX/fnH//uY2ZameqMIqIpz/sLgtDjhKBwd20="}]},"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-formfield_0.14.0-canary.edd465cd.0_1583280627796_0.9161108470044077"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.2b02d017.0":{"name":"@material/mwc-formfield","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-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/form-field":"=6.0.0-canary.9cf5e9842.0","@material/mwc-base":"0.14.0-canary.2b02d017.0","lit-element":"^2.2.1","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"2f2999d0bc0326feb2bf856866fd9238c59ca246","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2f2999d0bc0326feb2bf856866fd9238c59ca246/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2f2999d0bc0326feb2bf856866fd9238c59ca246/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2f2999d0bc0326feb2bf856866fd9238c59ca246/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n*None*\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.14.0-canary.2b02d017.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-hY/V/EmrYCJ7pL4GV5+5KbXiIOw7Z6LiTS7mD5VIge+kLWrvsw6ltWLAnUF8RezDAtNPKnS5izvF8zYnrTgyrQ==","shasum":"4e1bcdef38fd4079a0473ee07dc913a1ebc76664","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.14.0-canary.2b02d017.0.tgz","fileCount":16,"unpackedSize":44021,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeYA0sCRA9TVsSAnZWagAAbNAP/2v88qoZRpg5u0fcph92\n+SOg7nVVZClFoQDv0HaIjj0Fm52AWM5DY/+zP3+VbcwwnPtr35HFU0iZQYYh\n7DeEKQts6+R2EH1bgyppPG94xvEqq0Df13qMZTgbnLdtUFFVEA2emUU/x7Hn\nwXnqyvj/+FSloL7zHU9eAxAq7ePKgDty9wAKYqD7eIvmmlskExVCPm97sO5V\nB0gYIlecCPvgffBIwWXW2ydKwoxQBitGB0HXHoqZrrPAEpaLpUaSa8P+IQAD\n/cb5eY8f9h49hlsoT5MGhDLInL7sK1FH9kC/G9WuNtYxlmDqg/MCIv8FD6MR\n6kIKIWs2ZEuKG+PjAR9kO5OCFe13gFRSIgDGBJdkPQsFMieZk9ROITNyQHd8\nt1eLx9LyeUg+C/+MY0f5tORBzQ1ksg0yxK4WXVUni50QutJNBTcUfynzUdJd\nSOs32xukRZavbHb1Lm4iKE8McIrtBsC21vfWzn19QzX/cMpNN/jAkbw0xVFS\nhfm9EGmJ8yyLXF0L1K8UwP7KTLRnKkUKv5/Gb36eIlHxYLfGha9jx3vW+RGk\nmCZGZ7yJVY20l83h2ed9iwkL28HSfu1Wa6m0y3Ga/e/ELUYkpHVHnnX2R5PV\nWjhXwcwXRr+AOJkXFUdKI4jTFRsJCZQDxwwn21P8t6jh0Sz/QGW0iNJ+kNJZ\n9aom\r\n=o6v7\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCoSkxRCoH9IYLfq99fP5YRXpvLlX1jTC67QR/aUR5qVQIhALEqNhJNMKypNiKiupuJ0pUcWQIc9yy4Imzap3BLX9nl"}]},"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-formfield_0.14.0-canary.2b02d017.0_1583353131821_0.36000910173328293"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.cbdfe453.0":{"name":"@material/mwc-formfield","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-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/form-field":"=6.0.0-canary.3657f8863.0","@material/mwc-base":"0.14.0-canary.cbdfe453.0","lit-element":"^2.2.1","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"473c76376428d49a6811e677bf7e1450ef90b5cb","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/473c76376428d49a6811e677bf7e1450ef90b5cb/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/473c76376428d49a6811e677bf7e1450ef90b5cb/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/473c76376428d49a6811e677bf7e1450ef90b5cb/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n*None*\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.14.0-canary.cbdfe453.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-BkQwiwHuZ0x41UCJE7kB8+h8MRQ6ktEIBQgpI9gudwdWImOe+0lHeTgT1mqhidN33pMExEFdE7YGk+J+0BpP4g==","shasum":"b5605292960ee389b3f2391e75acd337a257ba13","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.14.0-canary.cbdfe453.0.tgz","fileCount":16,"unpackedSize":44021,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeYCEwCRA9TVsSAnZWagAAJXwP/Rng9pY7OBGfPtgurfpk\nzr/BLNPhCnnQguQRsjF8BpmF1txUWZRmszPZiB+zLASw0mWe+9kEKjJHlC1S\n3FBGihv3FF22TY0SG+PlkO0XVqjHKvtjvAD51R811kSEfqz7V+/tBPKBd4DT\nI0z1oMAkajtYBS2202pwkMeY17ySTNMyvy0E7+SrT9JwEnTtqCfOGoh5ZLfo\ni1g/hERIesFKKI4A/scj64WcZv8BbUizIdUy1oY53FwD7a9nGk9jqh5TuOi8\nzfdwmlBqtYCWslaaF6tABEbhSF7ri9YLQA3jIVwkmuifVajZA3wl6PT4pETw\n3XyRrSWhOFdUC3D94ZXV52nPXsPM5MFlqJzBZGaLsngyq4A2kmItlS6oZQOH\n+WwJbmbgl+VWqlbuWsS+ZimhMs73hleWvF1lltnnQWMaBJbFSYLMz8crMfAd\nmoG8RdS4CC5GlTrkbgnWRv4/GUAT+yFKXDJ7jzSJltlyzW0wr/Ys29krcpQO\nQqU/um4nrOzCCte3Z3awDaN8mixveW8B1phUlgGCfoB1Md8t2EkhDotL97S4\n3Z8aLHU4TelM/lT6W8OYJNlFe38oQr8jD+Bg4olbSRL+E5SY6v5Dw4isaQrT\nqMD9Se/fLem9qZU2hG7+9KRIRYKd5ER6jxZCxgkikbXy7xvx0sRLUksfEk/U\nx4iG\r\n=AXvx\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIF3rcJaRAMpUUek7ghoAUQd1Wx0xvu/7cbtSxEVeq3FvAiAL1aTMZs9B0/78laj+OjFRu27k1rXwxr8aXWXH0vohIw=="}]},"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-formfield_0.14.0-canary.cbdfe453.0_1583358255788_0.7783692321469902"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.02aa8a98.0":{"name":"@material/mwc-formfield","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-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/form-field":"=6.0.0-canary.17b9699c4.0","@material/mwc-base":"0.14.0-canary.02aa8a98.0","lit-element":"^2.2.1","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"97bedf50cad33662f192490eaffe0e04894aa3c1","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/97bedf50cad33662f192490eaffe0e04894aa3c1/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/97bedf50cad33662f192490eaffe0e04894aa3c1/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/97bedf50cad33662f192490eaffe0e04894aa3c1/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n*None*\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.14.0-canary.02aa8a98.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-Ns1fTlfPLX/1tbqRzTWhjZKt+YgdNYXarpVXIM5sIVBK7zOgFdhVmYFNDmgLXtJwpZO7uhprv4FxnKNBszNQsA==","shasum":"f3693ab4635f0aa07ac0bdde33ec56a6963dffc6","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.14.0-canary.02aa8a98.0.tgz","fileCount":16,"unpackedSize":44021,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeYtRSCRA9TVsSAnZWagAAnJgP/iqvB/5rQIWZpb7wQUGc\nH6fNDiZBLy3AHTLwl1PC+KvUSljvlk3xGK6r3iquArFc+OsYSOrZwy2RGHJJ\nQzQY2xeNBsGFGGTmjMhdjO36/F3ODJQ/U+zlhjfOt6GgYiz5AU1TNAH/Q0ig\nMX3QHyL7/h2yM+bqAui68R/xGq3YsknoAENR6Z2SeW8kiVtAVtR1YLHd9RAc\nenZpnh55huVvFNI2rKWKKE2VsNcViqaTds3tx3cXzAtvOd53CNqSriHKs9M9\nifDvhmyM9E9qHYkUH9eV1cjStF6mn5kLF8Px3DYg8mnN7PTbJnnSCp8uwurS\nFtux3dT7YNU6DqR/DXxWxMyoNENKDbkWLFrD4EXokXjAuU8jNQoyX+DmXYwc\nay65xKj6db3er6rpAgANn9XXoddS29Xf7KT/FEeuLC5ADA03Ge4tJmejV4Nk\npKAARse6XGn/8/Y7NlB6sOT53E0j+9kFghrk4mliX2UgRjsDRULgn9IT/Fi1\nN96nLoZ6v+r+vq13XLAgV2vQNlE3EobLYijgdyQnHM/9ms4UvsrHB/FAiC6o\nW3H3eQry+se86Bs4NowQHPMHbBuuxmTvhJxokVRTKCCbpsC0/w8aGQzmA1y4\nG4BWAmKzBAAsjaCom4giiCokjsxHLdK/0wMjXTNVN5ENPvlJaqpW537JNC/1\nqCM9\r\n=nE4v\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC5mvnPGKgOICXthdUCauIRVJneoFpPX7Wn/Oa+9ueuQAIgcd0OHa42/A4SRyxp8T8+6SIzRHssWxrf8yv31CVXsxY="}]},"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-formfield_0.14.0-canary.02aa8a98.0_1583535185927_0.05554379412456134"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.7cd5aad6.0":{"name":"@material/mwc-formfield","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-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/form-field":"=6.0.0-canary.17b9699c4.0","@material/mwc-base":"0.14.0-canary.7cd5aad6.0","lit-element":"^2.2.1","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"02d47be94c90a6674486253c11ed001b63502d73","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/02d47be94c90a6674486253c11ed001b63502d73/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/02d47be94c90a6674486253c11ed001b63502d73/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/02d47be94c90a6674486253c11ed001b63502d73/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n*None*\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.14.0-canary.7cd5aad6.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-VB+RqLpJO4ZstsHw7rKrzjPE4LHYrVdK3KSPu7msG9AOrA9+/X8Q81PjF536tsK8YLRK/ljUuZlVHZIRdGGs2A==","shasum":"7b53c9c654025ffbcf58de3f01dad0c987d31a98","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.14.0-canary.7cd5aad6.0.tgz","fileCount":16,"unpackedSize":44021,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeZs8ZCRA9TVsSAnZWagAAE5QP/0rt9iLp4tFE1k9PzHZg\nWYZmSmrdhRAE/n52G2sYYn5Qrd6m5lf8sZ0nO19JYZyYG6dQBO02zZT2tp1C\nU6EwMVjzA7GHGRZOu18IkcTxnCkRy7EOhkzSod7BahVbPcB4TWRQw+FKNNvc\nLvL0fvwmdmhxcmlt2t/19oDmR6aa4mgldjDqyuNtjqEk39PEp0UsKy41EJG9\nIfosA/O0uQb8w37ERzgoINzgJTDdz/aYmYdX/o6gb7JGjJhfWdmKFl1FMjAE\n9WzwaJSkpCALNY5sH59ZIAI6Ah4etrnMPC9d6FfnwuNuk1FTuBry1sBmWO9c\nJ7Q0UHYQBPRJ1Qm8sSXxGUAdzqbnC4SvpZVcZFO3kK+140chF0lxflYQGKNg\nIdTvRND1EpbiuQ8C0dvvDtfzowTPkZHEMygX1VAjk5cpm45ElWQazpR4qgn9\nXEi14a+ZblEolomNRHdc1Dan5N/RFJa4XNeVt1cSKPxAtY2SQHgszqsb7GMe\nK+Uvyar91DSBX3qrEIlVhsQxE3BaFRi149XvxkZQrwcEKbfY8y1O44yaS4Cn\ndiAQ6UGxXLUX3xCUOSpMLC5+zrocLTM6uJszNdXYWb6XTAmve6REzEGwNYn7\n/zd2tnfHuqMKotXQS4wm+9udYKzgV70A2KN6+DVOpORDdD16CvjmIUH2b81O\nMEs8\r\n=9AMs\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDmL80A7X0GQzpvN2TVIUVDn2+ilyHFbOKBo1tfXFnnmQIhAIJBJoJVqqWf81RoUhlITHirnklaYd04Jc5y+a46bJjB"}]},"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-formfield_0.14.0-canary.7cd5aad6.0_1583795993259_0.14591311595433276"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.3a79dfa6.0":{"name":"@material/mwc-formfield","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-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/form-field":"=6.0.0-canary.bd33cb56b.0","@material/mwc-base":"0.14.0-canary.3a79dfa6.0","lit-element":"^2.2.1","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"d8c4d68989d9c1489104002dc0f43cfb89ad0488","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d8c4d68989d9c1489104002dc0f43cfb89ad0488/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d8c4d68989d9c1489104002dc0f43cfb89ad0488/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d8c4d68989d9c1489104002dc0f43cfb89ad0488/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n*None*\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.14.0-canary.3a79dfa6.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-lp2BNc+FHfoicZ+X6lDYx/NcVZGWVjhe16tawviYmaMRQwZS88quYYyrHsj8R2kDSGM0GV7MoB9/TMDu1WXqxQ==","shasum":"d01540df267736728d9c2561ede8fe25662e2eed","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.14.0-canary.3a79dfa6.0.tgz","fileCount":16,"unpackedSize":44021,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeZwG5CRA9TVsSAnZWagAAQYMP/1INBh2BIMD8vnzPdjuF\nimOC41Elc4+TnzNRcqj7olieJMfqKqqIh7/ZpORcwkI+krzXcYbUEs0Xb7Ao\nbLYzHxuCgRZbNwsA30Y3XAI7I9J+oOIKLSz1WR9SZz4/z9Pfk/kJZdasHqLr\ntvB6W3c2FtncqHoiPfnQ7BUGJRAD/qkKNttxNaDwXg+4FFYQAhLM+shqG6QQ\nOklIoiSQfU9ZnmQCo2UwH/wtTtNE0ucYAXMmcaGTa2A+9y8fOTF3vdtMxa/k\nAIksn4wYozDUzScoWma2jSVfrSJBxPEJaTpO8DQjvn0cy+1v6cOfpKnJKyQ9\nMCxKh+qfvVvlm+PXvHpTDMiH9atm5zpZImQfmwdtSyzU9z46z7vIGswsblKS\nSgE9oMuRkA2KbbLr0rRfENf3llFnPISeyAzLg6mnEARmAa330JJaALkdXb4g\naQpSiYse7mMHUsINIFxJU2VXKDJPeUBavSkvkp1NlxNZcvjzyLceEXxCvnl4\n8XAfF9SAoGnBI5Vps38CuwjN1RT+WTIbsiiHdqJv7wiRgteaYV0AX6QIejOW\nc1psc1pzH5W2ht6gqxbcahjSx02+nocIQTv2DLExUvzbF0hnxtf2y8sh/hBl\n8IK1IJeuOLkj0Ny2yWyF+m52TKPFS4pIM31roJy8ApdG0a9JeyGtfXqqBggQ\nFp0Z\r\n=ezVE\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIE5/89/lBS+mH6kxrLHi1CWqXOlzhI2YefeQ5euuzXObAiAkbHBtk89mEkJYJyXTxSdNwLW4Anq7TaH1hrTHVVaWaw=="}]},"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-formfield_0.14.0-canary.3a79dfa6.0_1583808953346_0.33075298333834846"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.22e0f5c9.0":{"name":"@material/mwc-formfield","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-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/form-field":"=6.0.0-canary.bd33cb56b.0","@material/mwc-base":"0.14.0-canary.22e0f5c9.0","lit-element":"^2.2.1","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"ccb096ae11e367b4590851e53c023abbb22d2774","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ccb096ae11e367b4590851e53c023abbb22d2774/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ccb096ae11e367b4590851e53c023abbb22d2774/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ccb096ae11e367b4590851e53c023abbb22d2774/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n*None*\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.14.0-canary.22e0f5c9.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-3AQ0nqzsWCQXlEigcrzsPgEU3kLlF1tM9XRhCYxSxRxmonjTIhw12WxmnSZs2Zh/4h3iTp5DDVRoP4i/oSmvnQ==","shasum":"0b3e5200d1255cf78d6c396f1548438ef238cacb","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.14.0-canary.22e0f5c9.0.tgz","fileCount":16,"unpackedSize":44021,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeZwKsCRA9TVsSAnZWagAAp50P/2G/rZ6I1Vt8Y+1Y+9qw\ngpP9A3Gzv9UCwNDaFlCz+m0SEgBT7KwcXHGu6PD7HWDEfOBpPkqYMTtohGQQ\nu0ZBn+oDdhlWXmL0j9b37vo7mJbhjCqFDuhuHKg9AhpkB1mrAMqa5bjykGj7\nkqKC9+JwYXH9eS1sNmF7NVaX7Ofzr+7tdi2OkkxQ5svM1FMQFygQIv+jwUVX\nMNxhKv1oIOt8p1RllUTmsIwIyWsrm9BW+GHUGSYuajAi9taNfgXQkJtnVJDn\nFAv1z3m+3UU8Mywjs/hR8X1RzxWjiSG6On0heCpFQS7tnMbvCcccWhrx+aok\nU+QIfVXP/PQgH28gZtDu1Ectm90Bct+5SUynmGKGBA4pM4Mel9Ysaj6+ep4k\nCvdIy7gpU4dZdBa+HadvaZ3uWZX3MBww4EArj/HEtTn4aQO35aKdLp4UoFR4\n/sOJVD284M7KA9UUx9I1EYAqRLXk2tAXzx83TScoR9cLRm6RiD6MbAAhXEj4\nZ5Xm6NQoj2M0eC7EGym6LJA3buTH5ZiQnX5FfHoqpXKo5GjEhIBEClCHX9Mv\nbbIwiW7LVpMSX8qL2U6tSwiNHbfQXG510pyWUZJItsR8Z5R7uMBa4XQ2N5N8\nTBY7+6aZ6gMF/eNfg/zVZ9VSS6g4odeYMGE8xvtSfI5/nA+chi2WtLpv6EpW\ny0Qn\r\n=bzao\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC3oPXNqrtF4i2R8wtU98PvpX3CuUoOOGe8jm6mppawGAIgLmlHjeRoaQGIMHdod5zxYOh1pxQ4jN4tOflUKcIhcwE="}]},"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-formfield_0.14.0-canary.22e0f5c9.0_1583809196135_0.7599563955272302"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.f23a1d1b.0":{"name":"@material/mwc-formfield","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-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/form-field":"=6.0.0-canary.26c049afa.0","@material/mwc-base":"0.14.0-canary.f23a1d1b.0","lit-element":"^2.2.1","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"625010e9abdb8adc901198fa1ebdc99269b946c4","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/625010e9abdb8adc901198fa1ebdc99269b946c4/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/625010e9abdb8adc901198fa1ebdc99269b946c4/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/625010e9abdb8adc901198fa1ebdc99269b946c4/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n*None*\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.14.0-canary.f23a1d1b.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-X4QkS3cKO8Hpz5FTRzjaqzmJTS1Nm+wdpUPO+DlL9d1PUguQLIcBvHL2jXEEHyfdxTQnQpgXQqEJod6uMB3T0A==","shasum":"83c3e71562444e83a1be4ce3bc2654828f365381","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.14.0-canary.f23a1d1b.0.tgz","fileCount":16,"unpackedSize":44021,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeZ/7vCRA9TVsSAnZWagAACQ0P/2ynk2juUF6M7QpCK10x\nwsv0otIqonwpRYK+OALjcSUgGy12HmtfV7frYM5HWojJd/KOaZMayrBLKDbn\nXwqruzCkW0bYGmRKMPSDf/MmcjNoDAB+lUr9MZbWVy37OoUaAz7kd53Q4aWq\nUYxwC+ktLRrHfDfCC2ZNHKdDwAdyNDnqwX8LM6RBjefiWks5Z057h/a37Xuv\n57Fv2ZEvT4MzaEQSmX/rZS8Kl2w1xEU+J38ZnMx5H1JJ3rzGb4+XfWRkPk02\nLN3jLIaYaEj3WBFr/tZdAAXf4zopZ8b0n5xjRm04ozyXLejHkBaSxt5dwr4T\nRBjRH8jZ4ft7YmLEH7VUPJIBsl7Pw3r9//rOVUq9ilTu/QP/6hO55cVJVtip\n1wn46iC+iKZA+wITE0HTXin0Rvb0S9mMXIII2qZApJY7ek88ESVtPG0Zcq8s\n1PNgARrgfpkc0C7xomySLFIaVtNk/u+pMD2J+gJ7DXblBYJx6FuZorJjng+k\nRvRfaPc4H9icSGXmaHQdZ5X9ZkM49Kq9brlmKLa+gixV5u83VnwKv4TawOh7\n16nFsLSCivtzOtb9DYH9WtAf5DZ0nQrqVoC2tE9uDLrsPgNXqL/BldJt+EXw\nWimOObakKHyph6J9YPHGL1qE5RmhpMaGXMMeRMiD2sgopz4J9Qk/M87Q3xsA\neOMt\r\n=y4Vy\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHRvpx8yYvOR687q3DbYMug2UUB2HJ681lFUN+tbdC1VAiBn+AI0kqSG2/q7joVX+e0Aeo4nryfAXDbvabIp3fOnpQ=="}]},"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-formfield_0.14.0-canary.f23a1d1b.0_1583873774691_0.9531664352171474"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.34b2d69a.0":{"name":"@material/mwc-formfield","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-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/form-field":"=6.0.0-canary.26c049afa.0","@material/mwc-base":"0.14.0-canary.34b2d69a.0","lit-element":"^2.2.1","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"b40bf9e324ad010a2ec93cf8677b25b843ad9c46","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b40bf9e324ad010a2ec93cf8677b25b843ad9c46/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b40bf9e324ad010a2ec93cf8677b25b843ad9c46/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b40bf9e324ad010a2ec93cf8677b25b843ad9c46/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n*None*\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.14.0-canary.34b2d69a.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-86QSUxWFJgDuyHC2iA9aWEjaidv6muT3i0pDOLjxXv5q/Ak0PlmPdvr9b8C5Uambp0m2/W2VZjwncXXTbRv0xA==","shasum":"d91fd8cace82edf57d511d5dacd72d1c7d76970f","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.14.0-canary.34b2d69a.0.tgz","fileCount":16,"unpackedSize":44021,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeaAM1CRA9TVsSAnZWagAAEVYQAIsVYgXHfApExpa8W3Rn\nshnLuTeOWAxm7Je32u/3s8fET1RaP6EKkzhbHV6dZH1gp24ltKCoAix9zKJY\nFlEFLSndUqyeQDfTjQmAwK5Pw2H9cPSfLyfjJVRcHL8UD7r0T2xGGd1inVyu\nvyGFhYsvcO3TbimzsS1PRFswe3cXjwti0XLv/3lgdg0Mx3yd90Ba2NI4xdJ/\nZkC6yqfqlyGxOBkxy5cMjRJC2uO9U15UVp6T7DABZADWESYuG93QWN6gsMFm\nrSLO6HbZ9gt5ZBmMK+SMjPYuzhUecsaLvLvYYmIxErXgYNEskz2FH3X3OqKf\n1MnGbNhg+fJrGbVWit8seLFyeVnbcC5h5FkW2S/y0w1XCTsLxDcZnfXnPpQt\nJ68sP+EHh4dq8oEji3K5QAvAJ1GGOTKgvEtjDtlklK1EWbEbBqtxLDINWBhH\neQGxCKbLakm1y4bzjiDkV6hmMNdQ9yhuXZ0SeWggz+VHk8RZzOMyZhAqiStq\nVYiAwKXa1hZE5Rt5lu/G5M2NcbPYyJ4Gp4TPD/PmwIuCfbsy1GK+IjA3j7Sl\neX0H41EqJUCElPDJKXuYvzNDzkFaNjNDzBbQCMCOdhEoaIrpKtApyUmwZNxB\nYIfiRA3or25IXFhTOav4+19OvWxmCX5YVKD5211niElzjaWdf0yGpPbich6d\nJS1h\r\n=bONe\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIE0JwfxYKXjPJThwsg2ZECuGcP6DLHH8ePQBCTbjnaH4AiEArl89Ey5W6FlQX70TeD8oTiKxy6nCF+eilm8W0Z15YOI="}]},"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-formfield_0.14.0-canary.34b2d69a.0_1583874869036_0.46999961209693364"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.dc04abe1.0":{"name":"@material/mwc-formfield","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-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/form-field":"=6.0.0-canary.1db5c9fc8.0","@material/mwc-base":"0.14.0-canary.dc04abe1.0","lit-element":"^2.2.1","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"83603c5af2141bb893dc17dc4ff73baa5dbc7b64","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/83603c5af2141bb893dc17dc4ff73baa5dbc7b64/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/83603c5af2141bb893dc17dc4ff73baa5dbc7b64/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/83603c5af2141bb893dc17dc4ff73baa5dbc7b64/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n*None*\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.14.0-canary.dc04abe1.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-N3K9G67oJMSAA0OzU01OVOKlVTo9t1di7TkYxm0yF+rHvTJvN/wce+P3LQpvv7BVuhbTBtGiSxsp6GOIESHQAw==","shasum":"82f176ba3d1139c88c74889a5657273f041a13db","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.14.0-canary.dc04abe1.0.tgz","fileCount":16,"unpackedSize":44021,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeaA5YCRA9TVsSAnZWagAAMHMP/35EAf4J/COjPb/m2JnQ\nq/j7ryxDYrf/BteYWpekGmMAPQFHJTWqPd9Vdn0V7H/WHcca6M/iqAdeHl+6\nyXmozL/U1Em8rFO7RJzxcvDOEWS6foMkps75IMBO1ucroYTPESXJNRFZQrUw\nrmNncN+UlQD3BfHiFHkMB7nYDfzwyZD4a2EzLQ7uv2pBIbQJaX/3KwtDxj2I\nFe75oj6o25N49m892n7HDpa+UzWJ0IyB3CaFbJCznE7+tk21mwMk85mF5qNp\nOYcri+YlzrBhp6DbeS6rY8ejdYFYNu1xhvMuWH/3Kyqm494iSLIDrB+bQ3Cb\nnRb3LVMMNq1+Ud8B9U+T4kS7P2JC4hCD2Mbc3mnIcQiTuU7+rC5Me3h8RnWx\nIKCCXIYPuU/odskymdApNg9JP0uDCMxc4xku33idsDdiI3QKWF/Q97Inyb7n\nW8yUk5P9BPKuMvwjgnoLpmDHrIf59//4E596UENlYxuTNgguI5VXfMALNMV0\nQ9T5cATOflQQgSgRIwIA8xNwiYdfUYDyYrY+8irBF68RosnZRXKW/riCYVlF\nvFqyd94PF9h5nfHigiU26Hl19m+pbEflY1Wxu8jzUAoC1sFPXGHRq4CprczE\naZo6+VV3tdkljn86p1XnQ5YZ/u38EwyHzQiAKFM+DVNCZvuZonNX8Org8Ii4\naB92\r\n=wI/l\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFdsA9GLcIUDuHQQ+b2XMubA4L5Mc9uuZpXm810QmEa8AiBxm3TBRPlhWHQ9qS5f2JwsPDwP3lvOxlS3z8NUQol0pA=="}]},"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-formfield_0.14.0-canary.dc04abe1.0_1583877719755_0.34244437252404825"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.04ccbc88.0":{"name":"@material/mwc-formfield","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-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/form-field":"=6.0.0-canary.1ae8130ce.0","@material/mwc-base":"0.14.0-canary.04ccbc88.0","lit-element":"^2.2.1","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"bfcaa800a510585165a925b6961a7e6316f30f57","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/bfcaa800a510585165a925b6961a7e6316f30f57/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/bfcaa800a510585165a925b6961a7e6316f30f57/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/bfcaa800a510585165a925b6961a7e6316f30f57/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n*None*\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.14.0-canary.04ccbc88.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-ohDb2y1PEUc9+KPEuHW8OJAe/MLuBa6oH81eM6Cn+5+GvsPaB5diOpIAgYtVtGFQd4yNypuqxf9dOdScCwqWNw==","shasum":"006714fe7d53629e6aa22d80609678c88d112f14","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.14.0-canary.04ccbc88.0.tgz","fileCount":16,"unpackedSize":44021,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeaDIgCRA9TVsSAnZWagAA2pUP/iruiA+U4G1h2TWXaeWQ\n5loU0dBABSipaIUdecMWuDiFs+Y+j7p61y3ydtSdK3KaerfOc05ENBm+npkk\n5lsZOSOjfZCiC6wCrVBEpmP3IsGUxg9JwMRxSILkKSWa/xW0yGRXMbW/gSQ8\n0dXnnqtxCIFZgbaTaWjk7ua2/IiWX3gckSiN8z0abD0jp70Y7Ik+KvYDbr5+\n9m4Edpxp6QY1RStsh1SSpQYccyRTrwOSro7j0GDURwqVAWSFMJ3RtgHvFlkH\nsZ+Mrc1ibheJuiMoSDuWznx1TtREq+8G2Hoeb3KDCqdJDKUIuUFwtIDD/Pm+\nWWe7yUwUhA0ESa7JY8cUqXHCUlqsz/q1aF12crj2/+8qp0eMbmKPJ3CXuKmk\nds6Q6LRxchyF++8bEJdrUQQJIG8OFln3x0gCdODMfpHuFzm5qb76TJSZOi47\nfz6NrbxyuM8lMWeQ6feI7/H92UyIKaIP9OkTAdjHVvDfbfQ9uJmjXUXjMuqZ\n1uYVMnILVzI889egLjmI4ZSm7K9CNFR7d2PIqmP0UiV5mC+tIKMnVvtxVf+i\nfbgsvY0ajhAK9pFz3MrSNgmzlPBjiYixNk4xDoRoR6EJLMR8DNaYfvlaXPpn\nQuCg6UzTSctU8Vx9kbCq6sPQVWn7b+AzzQ51o1XEYhz6WIKl2z4Cialr+jfn\n5Gfy\r\n=TBNW\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICfNbsj1vzjsxaH5iBx2yTddoAAabzVKsnaKb5SaW1/YAiBEKy67RduDYHMHcIW6FxdajDUsu06etQRV2eqv86J2NA=="}]},"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-formfield_0.14.0-canary.04ccbc88.0_1583886880298_0.739057040602717"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.55338c25.0":{"name":"@material/mwc-formfield","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-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/form-field":"=6.0.0-canary.1ae8130ce.0","@material/mwc-base":"0.14.0-canary.55338c25.0","lit-element":"^2.2.1","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"6251bd82d8c2b37985e6a165d6904180ec7a96e3","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6251bd82d8c2b37985e6a165d6904180ec7a96e3/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6251bd82d8c2b37985e6a165d6904180ec7a96e3/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6251bd82d8c2b37985e6a165d6904180ec7a96e3/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n*None*\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.14.0-canary.55338c25.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-mbnuvJjYJd58FFVIxD9JhGld8csjgNEgw7IqQEGlWZ+XHDx9sI4aEvFt0hBh8eYSOahATojkU0xdqGuchGA5Dg==","shasum":"e23cf29018977799b4a830ecc685110d87be0140","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.14.0-canary.55338c25.0.tgz","fileCount":16,"unpackedSize":44021,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeaIWuCRA9TVsSAnZWagAANygP/iFp31QeGtGViu3WefME\nxxodiIKH4fyDO76JrURZr0aAGbrBZH8JXbqSsp26LnQxvlTT+rNsdWbPEtPl\njtYBZwBQsjTPp4aYm3vzg+a8ykR1A845+15L7YC3G3Vpusn8mgCE/7JNkg+N\nKcfthQ5kxm8yml05GGTWXNI14XAbOF97tjaQ9LhIT+LH6H0QHOYQsJ3681Zb\n2Gc61AtqmeYcDPxw2Akj4uVXPk52vG0w20oexOk4hfUbzt353mlC1yFHZz9x\nUOZNsUSfLvi2O+WZHv8YG4KfmfmnUisO1r4BEGnTLROhMrHdi9FHEqvB88C0\nd8CX8rDfKXeUjAj/knVxQTkyRykA8yOUJYoW/VWZnVwgwtrXwOHnJO7X48H6\nyEUZtB7iG4MeSR6LHVg0KDEIb26hUh0BI1a4WGgt/DqyGEUJDrEizfBShwSa\nWp2luBj4l1OnJAjgVnm6LcfEGPI7T4bZHrJ5Ig/gSnPo2hg3L68dcGjcz914\nKzJDti2rMlYlUzU+sWYzq08G2uJxzj7zrCExJg6Jt0l3aFjjN8v5DG9p8I7D\nr0mE/IfOHsPidJ5m0JPZDrYWHUKOSyCIKrj6juT5mzbzszhh8Aby9MlAW+lZ\n7AS5c3bZU9GxlwVqECYfXNvyE0PFlOBVoWwat4rrh2hESSztb94DeJNod9X9\nkIam\r\n=FAEW\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCo3hRIT9su/OeK55edOj/CN8XKxv8asb8cTsVOqaRYQgIhALiyCbgQsnq1ZiDs9c3quTX1oi2C0jLx48zKoJpcnNHz"}]},"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-formfield_0.14.0-canary.55338c25.0_1583908270568_0.31730566810030525"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.b7e388f3.0":{"name":"@material/mwc-formfield","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-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/form-field":"=6.0.0-canary.1ae8130ce.0","@material/mwc-base":"0.14.0-canary.b7e388f3.0","lit-element":"^2.2.1","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"1ce172712209d5abf28a65e797f46fdddb7ea704","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1ce172712209d5abf28a65e797f46fdddb7ea704/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1ce172712209d5abf28a65e797f46fdddb7ea704/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1ce172712209d5abf28a65e797f46fdddb7ea704/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n*None*\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.14.0-canary.b7e388f3.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-EmR20RYP9XPFYSufN8fs6B1l1a0Yk0mIQV4IXk2/3IEc7qZdWuHx22D2CTc+X/dEFxOM0J7NYPHg9BL2KObXcA==","shasum":"eef71d78377a471f2d0393f305f5238c22901a83","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.14.0-canary.b7e388f3.0.tgz","fileCount":16,"unpackedSize":44021,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeaUfQCRA9TVsSAnZWagAACtYP/jJttOu/PJN5m+fn60TG\nfqgtvmfDg/4J/c9SHh6MvURXS9cIVYBsyeq93MG3UlOGaN/XxQdlxOZ9tkCz\nard2L6YyJ/N1vR0/ZpRlk0lsVQ736r2n3vKy9H0IbKaEjCjwo4Q7Wo5yli9C\nO3qjtQ8+Dan7+xySTPGvQnQIqoBS9Q0aGUy17iRIk0zCH5sorMch0sXE3Aew\nNFUZR+RB/Dt2tCeDrbzWkGEAg5ZatFUFwVdZgs2OVddWsIWvAfV1cUGSkPHa\no9nhYS8NcRJRWcC6zHmqjt0SIzXuGpcwXhAPvXqGxXmabP36z7meFnmYDWBv\nJegvwAqN5c5cM8GZTFwMhCTjjvgQ/LNEqHRqzKtBGXbFq/gu40RMajAdtwES\nAsTkaLqKiOg4s6039HLZD4N1GUDYhy82tbpwYv+6D/ncnJzsT0DJBn7F+au7\n4bDsUWGhsQks7uNcMBAmpAj2QrYddD5q+ph+QGcf7o+aDITdP2h6WF/P3lH3\n6epcztsW6ugXqQPZFKRIpncdTuEsrvNhQN2M0sQYyi27vTiy7jS5ZQGP3CFO\nFJSojHQoLbHTCp8oik8WCgf35MzhUDJTty24Y4aKapWg1ri5JZ48nmdYpD2n\nJ0nbt6ow16BFP9gsaVCVHsxP61Cr8wfLXCgLI3tyyaY6lJp6Tv0MezMQ9aJ9\nsUti\r\n=raz1\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEwLB+w43ipphX/MaZAMbuke5I73jPlnOKgUhwIyrLk+AiEAhv8KReLmhLNeXutcH+EGxPH8aWt32WqcITpg2H4F0rM="}]},"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-formfield_0.14.0-canary.b7e388f3.0_1583957967837_0.6944617322886841"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.b3211481.0":{"name":"@material/mwc-formfield","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-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/form-field":"=6.0.0-canary.1ae8130ce.0","@material/mwc-base":"0.14.0-canary.b3211481.0","lit-element":"^2.2.1","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"7b6c73b4ab63cb7701379685a556ece3324d1c22","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7b6c73b4ab63cb7701379685a556ece3324d1c22/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7b6c73b4ab63cb7701379685a556ece3324d1c22/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7b6c73b4ab63cb7701379685a556ece3324d1c22/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n*None*\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.14.0-canary.b3211481.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-WgQBCU34sEpxsqYOrzjecbflb1h6o7Qal40EWoOGdVhyueRB3JH7TWF+UyR8wjXKlErtqauw5V/O6DDORDDCWQ==","shasum":"b4c35924f1dcd0e57ed259d34914ef44e95c8bf7","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.14.0-canary.b3211481.0.tgz","fileCount":16,"unpackedSize":44021,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeaUjKCRA9TVsSAnZWagAA2XkP/0K5dLiaiggzYsvV4vVj\nD1c5WRt2+OoDhMCghAl9We1ZhcttTOO8iRExnmlsqlsCMmh6flezOcMrU4li\nf4jVtGMUqMK/pLRXjoTqWmDydJ2mzw/WUMQQmoKTC8IhWoFAEFlTaXUEs65o\nE0ttXH/eycSJHKgcB3NDbAOPNSAvrXn1cEP46u9+OrXjEUtfPzqSbfYOBwRR\ny4yTQosZ2rntiuxVnve0nqitngTglNmr4vcLls+HKIZSiIp5TYBCcr6tMQvP\nycHXENlJPSd9BrfMm5duG2QADk+kk9aRcCQv7n0h5SCWVl7xd+jbYKH31cnE\n0Zxay4QMQLiL8eOvHi8eB8P16rlksbAazfXOoPo4ODg09JGYEQzVP79Edg+o\nDs/OmUT4MYwBL4SoZSwxgmz5YhH6xQZWjumOnPFQV63dADnBx5OApzdC6Pqb\nGBKSrXsRoxSQV/DJPgUzmO/3mXfmE2k8ixVK3gpIAX/tRrRnG4imbzowXrcO\n7362geGkVJvBlWJFE1cp2pKqx+0C2pJvBNeyc96oBzRuQVXYd7YTZ5OLfCq7\nKqY5Sw2XXC5nIv0JHig62ZB2JmGnq4GRz/2lB7hHGZZuAk/mkeHegdv9ci1T\nDZnv3LsYS4ZA8rmIG469dCY5B+npE03vBYJlJmeVejGHUBpNvFXzw4yqW7Em\n7dOb\r\n=eS8K\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEdfiQjVDVt+upMSuOto6UyQfAW4IuHndTV1ykLJnE2xAiA65jngwpkQPIIWkN5nOmBpuZxHnP6fO+VzCVlH/uL5BQ=="}]},"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-formfield_0.14.0-canary.b3211481.0_1583958218628_0.5967150328419322"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.0b5c7f23.0":{"name":"@material/mwc-formfield","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-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/form-field":"=6.0.0-canary.d5808057f.0","@material/mwc-base":"0.14.0-canary.0b5c7f23.0","lit-element":"^2.2.1","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"c142ca8fe1db14da6fd164a99ca71277489f9b16","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c142ca8fe1db14da6fd164a99ca71277489f9b16/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c142ca8fe1db14da6fd164a99ca71277489f9b16/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c142ca8fe1db14da6fd164a99ca71277489f9b16/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n*None*\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.14.0-canary.0b5c7f23.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-1/d/EqnCKY3JKiyNJjHSFv5MUB9Z2o35zmssiC0wEvc/Ypf5KB6mgXYc4fRR4LTl4EZ6Pkl6kJlRMV9Xt2BmzQ==","shasum":"333f20421a542c129504d3a7b59cdb094803d0c1","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.14.0-canary.0b5c7f23.0.tgz","fileCount":16,"unpackedSize":44021,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeaV3ZCRA9TVsSAnZWagAAXGgP/iO5F9NG1LPhiIBzEE+v\nTPnLJLxNgVO/K08ZWvyEQSmSz1jBw3Nod3s7+vyJD2JDkSM0EPPzEaBxLdk+\nCefxfKPaQkzgWIeemuQSq1V6pRQ03A86qvC5MjQX+kDVD0YYQmgLMLpe22iX\nm/gEsu6fp2AGCxVBE/POxlkj63Zum0CPo/lBSlbSVAN9ePS3C/XILd9YNFiR\nj1OEIY//njyKuqcok1djZU+EGK4v/9J55hwQ/BG8Qo4dF0sEb18ngX9Ws8sH\nujrFsbPtSdd4qgHznw94jW/kr7nwq6FnvWjO6nUwAZ3Kb+0NHitB23EQU2mU\nwJ7VSUDygdkxsJR86ddUqueoVULC56sqhVEBg/FgumRdqPXrtmxLmzRu3Udd\nnKE276JJCeBmp6B+ERFlJlIPcgmZ8j7chJfLI8I3TgrkABpOgehm3m2KQa+6\n7d6gi5TbNb4+de17LC9dgqwwcci3yufUtYHKLySS+BXPuNHAkTH0xNdrZLrM\ncoCZtEBdJDsnjM3s4jdCLdQE0HsHzQmBNX+nrBTwVHWoqKZig7cI9KrJWYED\nRYjT9OyG28UWAd5DbuBCaEWny5iEjvqsQCZTjEQJg0Kqq3I1BZh3MCAQX89/\nyr09zIm/1Xcv0x0MjaVPcuLalPBrNFGlHzJMnxskVBlxVbF/+vR9x0IJGQVp\nu5Hb\r\n=a05t\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHm3MmlYc75F8wqPoKoBNsdgaHGgiBllUspDxqTqC6jdAiEA1/YNs/6viJ+fkrEYc+M7RvozwyyqRADsKyXqxriVYUk="}]},"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-formfield_0.14.0-canary.0b5c7f23.0_1583963609370_0.8856414584575647"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.6c0f0b27.0":{"name":"@material/mwc-formfield","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-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/form-field":"=6.0.0-canary.bec065920.0","@material/mwc-base":"0.14.0-canary.6c0f0b27.0","lit-element":"^2.2.1","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"642e3027b591cf821c0ef159a9bd31f56677de91","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/642e3027b591cf821c0ef159a9bd31f56677de91/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/642e3027b591cf821c0ef159a9bd31f56677de91/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/642e3027b591cf821c0ef159a9bd31f56677de91/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n*None*\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.14.0-canary.6c0f0b27.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-Z5m0fT9K9h+brh7CdtbbVXFyKW3BAEEKAp+RNfS/U1CJ0/H1of/ZnixgP6TMwBGkQRrIf/UebOTdRXmxE/on3g==","shasum":"88fc03bc194e58ea616ce5ce2f2f2d5edce360d5","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.14.0-canary.6c0f0b27.0.tgz","fileCount":16,"unpackedSize":44021,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeaqa+CRA9TVsSAnZWagAAywwP/jORVke0zKne8zuN/R64\nyKI8HffEUBR2DKjsMsmimeOIcCjkvMTOQYMNwoirINi7XMWZQS3c0kTDd04M\nuBCbQgZulkrcuRffJVaJhxH7cNTIUgK9w6eBZT0ba2cTbWI71+XotK5rryur\nNnHZ2edi9JF/Ev+Rp+8dpu3xQqfWzZu7scziIsikqPW7R87mysIksJDQBlLS\nGKYLtWxalfZB1ePcdKtl+dzNgDDrKKAC7/05KP4T3wwyEf+jn0IwmMq2H8HR\nqiC824NAhsNDCucBAgtumyODXmMiqe6ZoXIl4PPOUSX9GwpRrFni3AvpbnWw\noRJxymWougd+43XDAuRmMjqQ79uDJf1VJ1xK/maQnbZTlz3pF6SNYA+LfXnE\nUZDA5T5xfpHeZySxXRbRBFVOJlJI10C+yfneoHl2RG4aF7TkhsuvxtmGJq6g\nkgYpOIKBHqaWJO/DVk6lw4wmm0M2vHNd/UwKVcg5M+AIrjyOLnzH0yQfKJtw\n/NhZXum8QdqgJ5dxvd1wzLc8rMXw6aaeLGObfhmSyFz5b1FkgDJ5OEl6/u2E\nJi11geMfmxFa7sYEImHW5FtPmJ6+g1L3+gLHWGx+MV6nU7uyXbpm4/2FnLqy\nv7MiOsE9me8f/JyW5Qivwvzr+ZTVSZQt2+WzrXpTlzFtI6taP9KPAwnG5kDm\n00Lm\r\n=5w/+\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC3ep0QwDyYoaWXXSfIGKUCQaS1sgD1dO/jG2pHQ1lAugIhANnCbOfrY80oGahlphXWwASD2tZopdF7b4sRUmchf/Nr"}]},"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-formfield_0.14.0-canary.6c0f0b27.0_1584047806227_0.5342784557507592"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.b6c53425.0":{"name":"@material/mwc-formfield","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-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/form-field":"=6.0.0-canary.bec065920.0","@material/mwc-base":"0.14.0-canary.b6c53425.0","lit-element":"^2.2.1","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"21e9310c19b1139fef9125fef8610235d0ef0e4b","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/21e9310c19b1139fef9125fef8610235d0ef0e4b/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/21e9310c19b1139fef9125fef8610235d0ef0e4b/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/21e9310c19b1139fef9125fef8610235d0ef0e4b/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n*None*\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.14.0-canary.b6c53425.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-xWpcYqeD2wZntl1IsehBsvLGiohn235z6qlxr23TWeyg9XZLycgaPQo1B2vG4vMqUTmX5t5fkQBTeu1gTV1krQ==","shasum":"19021dc3cb648d340142d220475bf5f341e9b81d","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.14.0-canary.b6c53425.0.tgz","fileCount":16,"unpackedSize":44021,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJea7roCRA9TVsSAnZWagAAHG8QAIxSGHLfysVfirsPLOFM\nthZF+nIHr7rWa1YWIJBTuKZL/42td/6+JscJkDpofO1M5m6AKQ/1/x9GaraK\nQXxdeJu3YUD8JPv+zMnRyzhbJpTnLBS0P+5H4meRmgIgzqGCbrHe/Q8VMKAa\nGalFocyOgHdli921TTi8Q4J0wDXhgNlDRhiHKr43AxHOnA+6dt0tsvftqlIp\nfFE0MYk/2TJ86tFKEx4wf+M4wnrsJ1+4BAjK2SpYbmmtlyJoycbuniRb3Y5Z\n92DP6tP76EnXsLoCAkywtB/qWXBgnEKjZ97PD7bQymrYUEHL/brM4J3qKFar\nAQRFP3ehc2Q79U6bzrzXkitwLFNPQQDmSxleB7RcouHdK/4FPOsUDO/OY5aT\n3DM6Rz+9TpQnLkFqMqgVdJsjFiWROJaomLf5fA3T3hiSyCfC4tYC3XMWzSOC\nC7nVVhMqOVun3GQLi7D1hzbD3/JFHzKunZ5pCXRtwg/ecWXyptz/VXC5jLF6\n9S6eSvMRGsO9WfzTn5XqHqNz3BGKiiEF/aMxcqdIpB8H3yjLpwiYCKs2M7sB\nem3BTKoJl7HrbBs2FpgAXdz51NPG+hSvYxJHSVeRdaVttjUcay+sMivk5DbZ\nKIZecwFfgrqP9akFxZP0mF8HfU5LH5ilwBJHi0vdYgWKyrfHjCaMgBh0AheD\nU3gT\r\n=vuLw\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCk8G0Wrr49eMEaUEJ2dO6puCGBbDp2I9L8QI51kv3W7AIhAJzq++MjOmK7camFdCDxFV65EgLDrjndOSIjOjQXlVDH"}]},"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-formfield_0.14.0-canary.b6c53425.0_1584118503844_0.9249686804087933"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.306cabed.0":{"name":"@material/mwc-formfield","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-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/form-field":"=6.0.0-canary.bec065920.0","@material/mwc-base":"0.14.0-canary.306cabed.0","lit-element":"^2.2.1","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"7b07db227ed0e98a8a55068a9460e3969aa14b37","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7b07db227ed0e98a8a55068a9460e3969aa14b37/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7b07db227ed0e98a8a55068a9460e3969aa14b37/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7b07db227ed0e98a8a55068a9460e3969aa14b37/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n*None*\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.14.0-canary.306cabed.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-2jmCCG2PZyoLCu2Rw+FEYQL5QtMRJ+aeDMZyCLkpKfgpuAaEBQ7egXnFCvzJm8Z4ApQuARZfEaWFgJKqmw+F6w==","shasum":"04ad473f653bfe9d47fa5e8a848870beb078ad38","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.14.0-canary.306cabed.0.tgz","fileCount":16,"unpackedSize":44198,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJecT5nCRA9TVsSAnZWagAAYAMP/iNWtg/CSqMmYi5uds8/\nxVALqtOaI9ThCnvLKpUnJjkh5MnYSmgH/eVQaCGTRylMPSuumAHZdsCP+enS\nOZz5xlsYzKDh0+ZzUw3f+5ze3sxNy5so3TDFfqIQWRhlbZvM5eXR1M8FnpBW\nkFm2QPpjO4v4lV0siZQ5aMANdZn02kgXYs71IxNI92cQczDPfnJHzrlV98qz\ne3GxTtTALiG7VpmqLnk8H1zGsc/BQjRwJW5kScFmrYghCmSKIvxgSkzIARCR\nlvbdqPNrKwnYXnVKxUw58fXTacTkmuG00BNACEvd6wSr6dwoYbPl0k7vHPwT\nzzi3hqrEhLO996kZkDU65m67Oa0FfNNz9kXzW1Ty5lFnQZKTc9FJmCJuBedi\neKtgx4nu+SIHJyAIhvz+Tjh9fVQr3+e1OmTmzF2y9aWTcpww6leugcdVKn0/\nIw0TxtfXKuiANABSw14u2eX3ZDDHHcmWj6kdmmjgianzMYt7R5mxYUfPFnrs\nCGULc2dZO9heyfaFQxeAwELMbhWtOeMfh8ey3JfNc59Ztfmclas6Yvz2LUbk\nFGvsDNLuJ7/lT6XtT/AINpYDDAwPMO8UIjnAky6KhEoxqnNCv4lhJNv01pfk\nniQyRh3H0O8zXuZZ7C8p1K4gkWlCClJgG/ddGrdx5zpg5eOLDL300yrD8SRT\nMBzg\r\n=6L+F\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEmIdEriw8S7zugVX9d6qblDyEUAKx/CjdT21WOf7om0AiBH/YMMJKwjZ5je2fOKGfGN0m5UhdVTKYpEIz1AtGNTVw=="}]},"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-formfield_0.14.0-canary.306cabed.0_1584479846661_0.81476664268493"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.4e250cbc.0":{"name":"@material/mwc-formfield","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-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/form-field":"=6.0.0-canary.776291ef0.0","@material/mwc-base":"0.14.0-canary.4e250cbc.0","lit-element":"^2.2.1","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"8e0b10a13a5b20d13409bc4bec6f11a4ff757663","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8e0b10a13a5b20d13409bc4bec6f11a4ff757663/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8e0b10a13a5b20d13409bc4bec6f11a4ff757663/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8e0b10a13a5b20d13409bc4bec6f11a4ff757663/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n*None*\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.14.0-canary.4e250cbc.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-cDrM5Z1FFZ20ydbExprbu0osuytWZANORUmk3IersC8X5B3lYiY2vHy9Ir6BdcPhF/DNweKJz5G85eUkaLmiVg==","shasum":"97d2048526040f4fc7759853e9e77bc98b537deb","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.14.0-canary.4e250cbc.0.tgz","fileCount":16,"unpackedSize":44198,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJecT/UCRA9TVsSAnZWagAAXJQP/RiRo5hRvh3MMQqXJ9Hy\nhPspOqAFM/u+mpytQbYunJimKwY+Go2aIxHOWNqGD0VH+PpKxHI8YF48bFSo\n8A9rLurZ2IaxYFknzbgs1eZ9plBSof/REuD38yTgaJ4PCOTRHKrgxFNB5gdm\nwkBnDCyYlPzL7pDpKeScdiWrwwk121cdNCElifQ0SUFVnBXo4ejX9JMuB5Y1\nG3LPu9jcP49D2HQielntFEFPsVRTQjtfXbBlnWdB13L4RPRtPuFSV51fdK7g\nsFUqzSuxT03VBWGNg/vDE8HZ90pnoxAOCcDg4zVhKsjWepVe16h7ccSzfVIy\nwZfYA4C7+7G8Y1Twt7+6PUeGzffrAsZBXLXRDxkHa2w/amViuPRzGUutcR2W\nUtBLVO3GegnpOGmVkanKRj6ij8n4URpQTQQRkYquu1dn1kxfjnBaHvQQbNqs\ndZPNmwGYU2I/fikIlr52Q20GUW39BmGwuSCfeGLom63SZBLmZq59nM4psovT\n90PVSPJ5ICRf1sPdo09JIYllIQkKePFhFUgkwzzKukeQ2Mqn85WSvtWYlum6\nYsMRw4esgKvrDjB+QSwiJpBbOFLqYpTTpXZw//G/VAcHzNN6FmSLohw0EYUN\nfmnpdesNaL2z7xt0jsLVc3348r5ASK+JunvEPBiqJCqzJ6Lm9ulsjbK7PFq7\nrstg\r\n=lJ6N\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDlY2wE1CF7kocDmQDDMeMlVGp2kTLp+qA0Oa/Oy0Q0owIgYD8HblDeBeNHfyPBk3rIN/rsPCE5i7K07TMNBOrCcM8="}]},"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-formfield_0.14.0-canary.4e250cbc.0_1584480211858_0.5639492135084838"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.ff82d9ec.0":{"name":"@material/mwc-formfield","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-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/form-field":"=6.0.0-canary.6b48781bf.0","@material/mwc-base":"0.14.0-canary.ff82d9ec.0","lit-element":"^2.2.1","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"0af402cd2ff3748cfa5f7956ad2211ec9271c83e","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0af402cd2ff3748cfa5f7956ad2211ec9271c83e/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0af402cd2ff3748cfa5f7956ad2211ec9271c83e/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0af402cd2ff3748cfa5f7956ad2211ec9271c83e/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n*None*\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.14.0-canary.ff82d9ec.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-EJIlOb83AN/CqMCWTOT3AbLN5lHSCzXYLe8W6iZkvh2RW6PApcZP3695xBUxpQiTJo1SIYVFQjLtZ7x5R/n/RA==","shasum":"b81a375628a002aadd49d18c65306969ba8fa2a1","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.14.0-canary.ff82d9ec.0.tgz","fileCount":16,"unpackedSize":44198,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJecmYpCRA9TVsSAnZWagAA7wMP/j2jJrOcZWLhuPRumMat\ndvpQf0RplmMgVlitenM1T7khvyMhoXx4MUCFopkQphcxNU39YHcvNjjqdsAp\nke038ki29WpH19yoff7Ao1nGSNEfkqfm39ICcaIDjyqbc4L2zWJqN+KgjbCX\nDMinm8ugPvhuj6Rs1ZVAWJwJqlgdafzAgWcPPOP6sfVpzgp4XRQYjVUxG/jY\nDVLKfjvz/fAuS1ijHrqb1S0hsvPRuV4StBeBnRRrMnK4wRlu3qgBfrdoHm4/\nHG9kUXf94rN+ajSQkcXbdMbnfSbKUTZjUbVYN/ofPib4OUTM/R/bKjRl4Ay7\nzYj9Jv9qVe8phb7DHYBpWNGLNbO2ght8ZlgQ48eSTbPQ7Vih/f8wfRBipbKK\nUMv903TaNLKATHcvYev7rGcLFYMLV1eWDl9Kr15N5LajfvUSp5p/3F6RSfLb\n/LT+cZc0fKRjtjxZT9A0UxLU3RM/V9dTHSXWEe+OrM6GtjA+DkggRldnR6EK\nAESFhgdorvIcd5WTv/YeI1iOodT1dpXAD0YI0jZVkwmg6/Syz1K9e+vqADNv\nsMUwBvDqT4+FDDrkaDLtOvePZ24iH/XNQhiV0LWdX/873dB9d8W2ZpIb0nZ8\n4m4Ai9WIP1W7aD082M+qB2Escb07D0VTa+bBsdiEuhC7QKgKOOLlBiH0Im1n\nraCH\r\n=aIGj\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDdOLjKBCPRz7JR3UA4LQiANaEa7gKBtoOgEvZWnFm3awIgfv9yMYGFWbIrZLGFOVt83MX7O1vVkBu3UbgyWv8qaR4="}]},"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-formfield_0.14.0-canary.ff82d9ec.0_1584555560880_0.613234972930979"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.f50f48ef.0":{"name":"@material/mwc-formfield","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-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/form-field":"=6.0.0-canary.6b48781bf.0","@material/mwc-base":"0.14.0-canary.f50f48ef.0","lit-element":"^2.2.1","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"0c4d2eecbe04ec4e08549650e593ff154b7d7e84","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0c4d2eecbe04ec4e08549650e593ff154b7d7e84/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0c4d2eecbe04ec4e08549650e593ff154b7d7e84/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0c4d2eecbe04ec4e08549650e593ff154b7d7e84/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n*None*\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.14.0-canary.f50f48ef.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-uNy8rlKkAwmzmEH1nYls6Zdlby+LQ9WkGL9vB/acbC9FMDt3eWpz9PPylH5MACSbyA1jcucY00yBAgG6s6PbBg==","shasum":"90c3133b6dd055f6eec1afaf83966d4ec05fa8a7","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.14.0-canary.f50f48ef.0.tgz","fileCount":16,"unpackedSize":44198,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJec8AGCRA9TVsSAnZWagAA0QwP/jl7d75wKWRQHvD/QeEF\nzXZ1S/F1yxph8Us+MRDF8ZNSmuRCU0XoKjd5bokvf+V0un38EtU1JknTAL9X\nfb2ejhRW0HPxOuHbAGBxljm2OJvWwqGdrScI2ipeQjDGhq1tdrtXVKxra1hg\nh4iHjrLj7KJlopkWoU4wjzX7UXL3TF4y+0LGFfIsvmOGeyM1WOugZf5c81+Z\noiFnK02jvJVb2CO+TshbfoogI33NaitOmaQtk3l+PVL8lj/todJHc+Uy+k1U\nSQqV5q+tcQp0GheHA1j1RLqvu/WDW6n3nXRyr83oeQfYJbAG+Q9CUMJX5akW\nVtcQP72BiDdnS+O/KwHnJDxx7EkuAA57u7yEW3PaYCuckdz7VoWy7yktU/O3\niMxUVmX1oG5drodkDjk6qhCMgvKfrndS+vniKBRZtI7wA4DBE3YEcBheEjCb\nIXHIPDDAwhdxuRupW2WgVcL5neGokddFL3r8VZftddbx0op16Di72eInF+Sr\nTCFmcQWOar4C6cQiYcOUAKooqomHfHyJ0yJfHxrWGwKIl6CliNXmzGMCaJuT\noyCSVTvhGh+9Yc2yCUiXSUzhZBl8YKwo2SMezLAeUTkiDycE4ZBMWvyempv7\neZBaWAceIkxTG4u4erYy6IHNq56nfIVFiySlzUpa7/lMQ21KtczdQVRcTRG5\nca9Y\r\n=bjGf\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBz9jOBv33qsju7KHVNCjXYqnnDjU/HjmN/MPyF9xLWUAiBdkrZNS8y3vLwjonTVIw9rkfmIvwwwZY6DEyLLtA20LQ=="}]},"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-formfield_0.14.0-canary.f50f48ef.0_1584644101729_0.8939430811103168"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.134cf877.0":{"name":"@material/mwc-formfield","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-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/form-field":"=6.0.0-canary.a88c8e4dc.0","@material/mwc-base":"0.14.0-canary.134cf877.0","lit-element":"^2.2.1","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"c237581285beb5a84c39a5ea15dc95e9a865e057","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c237581285beb5a84c39a5ea15dc95e9a865e057/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c237581285beb5a84c39a5ea15dc95e9a865e057/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c237581285beb5a84c39a5ea15dc95e9a865e057/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n*None*\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.14.0-canary.134cf877.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-DMgR1xQyjtAPcKkqEcjTttYl5MiEQSFD2dvkif7ybuF4jIkDZ4Zsa/0aTZ9m6iDxXSucKVHlltT3z2eILv4QZw==","shasum":"160fc657ab639db0cd0f44506fc69617d423987d","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.14.0-canary.134cf877.0.tgz","fileCount":16,"unpackedSize":44198,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJec9hhCRA9TVsSAnZWagAAQRQP+wcroD4+u+y1A0n4FSjr\n7rYfGUjcDU4V0NPZFs4qcGZb/QoXx/6RDIe29WDAfqMjj6dq4ens1vHwpNpn\nVL6x7ihPjB9OhpGRoWaA0VqeYmoD+uRYcBYgngwPYYEldEykX5iCgvec1iON\nMmCfr8Ib0QldEqY+I1qoZ5SxedQ41ip+P5RVz8aaF7pG/asx7dmbI9eNI03O\nNzaUEsXdsqOJRUULcsFwt3yQgosKQEXqxtunQYroAWFkGGdoCtcw3rLC8JvC\nrhVt+6yt0DjT/IG9jaJnWc2XhuCdGWngxUhMmPG9rjBc8UXTxdNqJFDCEUSY\n0tqfQ01aX9Dv77/GKvgAW9Ii4zzPHb8T2jRPXDiR69VXHwcwsIBfvsISf0K4\nW+xpUCnSMJeq7JlvbaH5kqzKKyi0TTLo6vTfHt2K4/sJv9N3VRjHfKVb+Q7u\nCYFa9v7VVW1hDlEZTv4rJ7hDYbVtASusJDpGerBhJ1Z+pZkXtGOJuEpPXg21\nwNRqU24l0N1QWKPgpiNGpuRe0Ui+tR9pQRh8R3VorP6AJYt9LQAvZyOzJTVi\ncz6Q9eNU8fiY115W21bvnUg6IB9CQaCKG+2d83aLtrEJMYRwiNEbosy3Phg4\nhqPmcnkDvqEEyZJV3+hom1Hwfp46eWqaeJt7VN1JtP5Yyt0Dvj+DYejX0cId\n2dRm\r\n=wBte\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCUgpryh72NKJ2M1dd6jrZ97+wuKFTbNPAHJGUU67kWNwIhAMSWeD3oxFVJT+0OSyN6kUWDvr5NY3vuYEKpfmd0vph9"}]},"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-formfield_0.14.0-canary.134cf877.0_1584650336784_0.552806340156144"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0":{"name":"@material/mwc-formfield","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-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/form-field":"=6.0.0-canary.a88c8e4dc.0","@material/mwc-base":"^0.14.0","lit-element":"^2.2.1","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"ac28113f4d46ab2f986ce0aade128eb66d3017c0","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.14.0","_nodeVersion":"12.16.1","_npmVersion":"lerna/3.20.2/node@v12.16.1+x64 (darwin)","dist":{"integrity":"sha512-xWcolA+0iqlhk1B3oVyADCxqL0Vpy96jaVQe4GAQ3ppCgeP0ErCEKc0DaRKRYbL9UymfL3PPkvPsExQNljnrqA==","shasum":"680bb7c29c14c2c14d0f7cc66f67671391ea3f46","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.14.0.tgz","fileCount":16,"unpackedSize":44163,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJec+P6CRA9TVsSAnZWagAAyucP/jdBTAU0YrRGOEvzfSAc\neWns+KzxTESN2DqBRCV7nH4eFBycube9NaFkaHWFZxB69Bn55Qj5/1wZ34+S\n5ntYVIj3RRf5x1RBqUWCtbKZygMeB6aFKLbm3D8ak9O4Grp/I6QPlqfid84v\nRPTwBt/Jyijd4wHvP0Qbfjd49ATP8Nlbld7qg8jJj2qwd9r9x1mS2afSEiUM\n10Sl/sHkw95XC7jxnq34rCXI8moSnpzZrokr1I0X2RZWA0muOVOC8pgwsC1n\nKmI7Qzuq6ZLXdPMJ6mGQdmIBL4zmBlabiuk0D9xwHb5TKOUrQr5WdnUIh0Pk\naV6vtGgo4jR05XBUUZhMBmpf3oEhkmEUe91OuuVPUBftgrbXE+GP11nAKnC6\ntoalxea7pWl0TPp0ntW5LAplisXdVUtX7Q147xYJbW/1uXSU+S4ZM2pgma8f\nEtAZc8BWH78ooedMHpAprR2AdkjSF8RcsshWnC6by8Z3Z7MyRH0hlO0fIBpz\nSwkGQQiJDExPJTL2XCYjg16pxL8FD3w7SN7HHwb2LFXcEhORNMwLndJbHtpB\nXXRvRWQKA8rM9p1+QOIS8CaprP9QOoV0WkcRohJTebdd8G4znWsD6JXueUHz\n/SvNNgX5XVYc77BID6hxntWbbE11mh6pPS3PMxVGmfsFyG7Y4sWpy40imLq4\ny8yW\r\n=yY2Y\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCC5oj659lhbd4gX9b1Cy8HuoYh1LdHl3QewGTVJ0MIEQIgfe+DZM/Fhv/mtByTiCmw0JRqtW55dpRzGbZsF3XlhXc="}]},"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-formfield_0.14.0_1584653305915_0.8813206510876503"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.2c1a4913.0":{"name":"@material/mwc-formfield","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-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/form-field":"=6.0.0-canary.a88c8e4dc.0","@material/mwc-base":"0.15.0-canary.2c1a4913.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"8d9a4fb2b0ac4979d966b16e203b2dd0f388554f","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8d9a4fb2b0ac4979d966b16e203b2dd0f388554f/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8d9a4fb2b0ac4979d966b16e203b2dd0f388554f/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8d9a4fb2b0ac4979d966b16e203b2dd0f388554f/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n*None*\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.15.0-canary.2c1a4913.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-1QYEcNcz05C4n6iuIb0vwGh9u9Nm87r+D7RBOwoYdVzlmNH6lLv1IhZm/gsLKavLdUiGzaYKzL7H0qU5ntbhUQ==","shasum":"4d27c624313c3747da9ea6bb665a625d0f970381","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.15.0-canary.2c1a4913.0.tgz","fileCount":16,"unpackedSize":44198,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJec/mUCRA9TVsSAnZWagAAXk4P/iVQzVP3MMaL+pzObWhz\nILI1P31wLoOl9VNBg0yjmRQM0kIU3g+VDuttzq2LYSs65REoGGnL5jPa8ECJ\nBALPhN5bQursemVEAEYPFrOV/GZc/DYuG18VjOfmuqPJt3GvLHDwzNdudGVA\n/25poH5QTcU69yO5q7gOEipbl8uZm0VPvWla52Nx8mdwczCLJDoOjhCh72NG\nuJxOLwMjOG6TPBf+h4T0zxrjFetN7+eNQW1k6uJCqYClLBwGIwX1f61+thCk\n3u0i1cXHRuXEsEY8O01Hdum5D9N5j7Mvb451ZLn7ikWd6P60Y2nkOrv5ydKo\noCQ/+15hBwUXgpDhpkX7HbqigeT9X4hzyp0cjDlEJqvolWQFtkWSsTx3RETS\ngcA21loZkONg++OotuUyW3bQYlcd/XEvP+DhNboe1Upqrl/GWUfN2z9kdUqm\nr3YK3YSnEyrCtNBEvZ9p5b7oYR6PehcDA6Tzseq0+EpkoaRRgAeUiZtRyS0J\nIKdgMAYVfo9kc8ZtyTH0wKlwXHDBGnllxTzFNEiT81VCLuQfcCulN5utkUjn\nmeIdUHaKhfmU2bweCJEk4bhQCotXs5jIh+wxg7QPbQGavV5MQ3WlnagbqCEE\npDs/rDIUeAKlp8+zIEl9JbOIbYr7m03TfHOlm/dJX55Gh7b3RDjJJ+Skdg3t\nMS7G\r\n=F7at\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIF0qPoUzK50+zbhQfQIewHiC56t102MgntihPkqLskmYAiAEZkyelTXdpmkqJU7BBtVGhsGM+hzQRQlgYYxhfluSew=="}]},"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-formfield_0.15.0-canary.2c1a4913.0_1584658836247_0.7536435541787581"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.3a6e481a.0":{"name":"@material/mwc-formfield","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-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/form-field":"=6.0.0-canary.cafe18860.0","@material/mwc-base":"0.15.0-canary.3a6e481a.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"0d89a3406dea7d2d2540aaeb339072cc01d18e2a","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0d89a3406dea7d2d2540aaeb339072cc01d18e2a/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0d89a3406dea7d2d2540aaeb339072cc01d18e2a/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0d89a3406dea7d2d2540aaeb339072cc01d18e2a/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n*None*\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.15.0-canary.3a6e481a.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-xnVYQ9kBaRmpz3e/QQDTSH2hel369vbUy/rgi/87oXDzLicLaEH08wS79lPrnT2LCRhbmUfF3vE+cWe2n3kj3w==","shasum":"1bfb0518fa3b46a8f4ef9bcbf9e3ec1c26a0f208","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.15.0-canary.3a6e481a.0.tgz","fileCount":16,"unpackedSize":44198,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJedQeaCRA9TVsSAnZWagAAtHoP/RzAF+KDGhkUopatR+Rx\nlZAhCNol9gjJL0VrZKAta3sphLKy/+BHv5LIqbJlvTb/e9HEQmdyc3ln4GWJ\nep9byBhmVO6fKKXx86Zh0wnPBhA3v6L4If05KDUzFxSsYEiQEtm8cI5mDolm\nk3f9ofb8qwbffLOnExMkT4ooIL4ifRetuwm26GZwDzKOcou+DPHLpGoHMwuw\nj/CZiVOwyVhEUJjtSI1XAt4WbTAdjg9FuSv66XA6FqRUDSqGtdpVcSwUCcmX\nsUqmIvt1KLQ2AXLIXk+17hGaREzWZnW4lgnZt/sIb+dMriV+DswxHu+Rxz+F\nVhpQ7fc7jHJp8N8/MX4QIJn7L4NM2HuQGGeVfOYXmy4xVeuplZWsN9B9RwSf\n5h+qVpLcsOwpW5qZkkiNtxIIhbtbngzY8uRUSBWuRPQJ8l86SrhZ8se0ObKa\nvO07csDDW25pndhuur4anegR3ekcp2UOKFxGVIW0iOj6RR8i4yexwR0KqK0Z\nlUqTdTg7KlIipmCXiBjrxBpuU9Y08BmPVIgw+ukCSLBNM26Szi9/debQ7eom\nECZf47NAMevp9qrqmpB/HBu9W/VZm9BHd8CQgrs8m9QHSDty5/Z65K8YnhUv\n0jovv8OnOfzrU1+fxBdYqKRJcg/pC1tlpkvDJbrkO3Prjc7+usDOWQAor7w5\nXCQ3\r\n=PD5O\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGOdFI/DU1TLOFtr8hnbX0Amyak1WLPx1WaGOl9B8tfnAiEApq/2yqH6qkbnYJzN2i5bu4F69KwWfU8KiEhrtWQr1dc="}]},"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-formfield_0.15.0-canary.3a6e481a.0_1584727962558_0.3457192070680226"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.603d6eb3.0":{"name":"@material/mwc-formfield","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-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/form-field":"=6.0.0-canary.35a32aaea.0","@material/mwc-base":"0.15.0-canary.603d6eb3.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"c12dabbae50536d5adf2b5a785d4a5009e53208f","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c12dabbae50536d5adf2b5a785d4a5009e53208f/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c12dabbae50536d5adf2b5a785d4a5009e53208f/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c12dabbae50536d5adf2b5a785d4a5009e53208f/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n*None*\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.15.0-canary.603d6eb3.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-YfiWXKYVbB9KZggESqCwwkUfhcNdywNb9RVyS30IxpOR6MAyYkv0CSQq+dWjgT7Dhc8ltfq4ybfSGuz+4HdtdQ==","shasum":"51a30aca95df05670dadb233032187cd80992cd5","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.15.0-canary.603d6eb3.0.tgz","fileCount":16,"unpackedSize":44198,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJedTcjCRA9TVsSAnZWagAARD8P/iXoCtQluwG49Evff3zf\nFqRAlRmatRwpTc0MNVR+tHMWBuU/3uzH/zI4nygtGSUO6nWPLaljGaHPbCWp\nplKXHaJf5igItTsaMqV59AWwZWdQltvj9k7o+FZYXhSwThYxVFeQTnMOtb/m\nd3vkzH+2xkSICHHMtoYrEj7q908NEU7czyRFUOvTtJFR5cxdFPz5HQpkCVte\ntp7othTI5FmRE66ImKydBwBSR6Cvhi+dDA/BA5meQfoAvH5W5H6GoMqK6UH3\nQfD7jIrN4dD1J63Odl5hA7/TPyjfdHCIlAjkpa2D0E4w5QMfrRAhky6KYxt+\n5jmeatd1Lhyl/W2etA3lvfIlyn+16exgAEk636HBS3c/17/Ffa6UP2/n9hnn\nJHCKM4bly2P+YmZcfneT2iSQjXVo2yBpF3DnzEsPnwV3vO6T9LAaMdjfTe68\nbQ3fl716bmMkvQwgpD92yd8Ct4/28d7zJmGC69yRsrBu6vYtQ2WQPZSbVp0W\nZKzeoJYwaPvAcTDcb1M4FUUcvtScmQtVe3lwIgMQX6xSeLCzT6RwAIM9rk5L\nf13D5RD20WuK/nEnwCsQxKxUTXa2ZN4CGqIjVGO2y3QKwQRjytwOHHU7qZpA\n7TMzMzIQRSUyVRqh9l3vk1wrCexuiqFehtHo64Pb7P7h611P1zYk8bTAFcZE\nJsEZ\r\n=+O20\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD1Ljhika9+5u7w28POXFvPN+sxmVfgVLnkGx+sV6oRFwIgdV41SPbkU4VnBktj5ZXPKd4OwdopwxzYvctDNXg1zs4="}]},"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-formfield_0.15.0-canary.603d6eb3.0_1584740130958_0.43151083280391855"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.05c6a93c.0":{"name":"@material/mwc-formfield","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-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/form-field":"=6.0.0-canary.35a32aaea.0","@material/mwc-base":"0.15.0-canary.05c6a93c.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"62ce85b6b0e7c20ae9938ba7b42af970a40f1f00","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/62ce85b6b0e7c20ae9938ba7b42af970a40f1f00/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/62ce85b6b0e7c20ae9938ba7b42af970a40f1f00/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/62ce85b6b0e7c20ae9938ba7b42af970a40f1f00/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n*None*\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.15.0-canary.05c6a93c.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-lSSJro9VEwR0xNEgh4Ni4Wm9w/rwe+7T34gBFyVofApIjLWkoxrvutTW20NLHPtliG8TZ7lJan7+eLTIgpUk9g==","shasum":"cffa03b6a6ceb8bfa4552e92477b2451fd12d5f2","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.15.0-canary.05c6a93c.0.tgz","fileCount":16,"unpackedSize":44198,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeeOV4CRA9TVsSAnZWagAA5gIP/2NaZaHyCwjUmNhO+9jL\nj7HM0FS7JfH2SnIeNNFFF3WQksns+cJNqyQpPVKbNdKQIpJvTQhzhilpPlSt\nDXw+3ZSutqo4/oG5KxmdNgDKb3FStSHOdKbydvqP9xHkN8pT/xW01DYZMej5\nu+gzLjfDpRVG0JEpZCCDaDKOocd12SSrrGNDoPi+MEOdvaoFB/RECk/kLgbv\nxCSHSXx9rTRA2Byido9vI2MX9NJ/bH7Gi1ug0eZzRQqOMmHL3rV4Xixpy57z\nizrLSK2BaHSAvHuPwkbzE2+PP6cFkFXj0s4tSiuo7eFYtKB2G+ZKueCuEQfF\n7tG5wXikXsBYU1ykjxp3r+dHJfHYIG2EYEpThKt0NPjNjQrnbGO2XWiy+wCY\nbf4yIzja2cDCGXmQUblRn/BCygRoxJ+cb/eBZ+K8YDckU+JBVwazHvkKt+9P\nU+abXUzIDyLLNl7JF2a/cCFtDYui6cFRwiUnch67Qd4lz91kq2D5+hoZtJV0\n7Ov+cCtrITspaB1+FvaV73XFU7U5GcmmgtFd9y+dDmbUfnLkyBRXA1EbNtW0\na9cHcvKbufL3CW3UFNuO6KSa6dUdmdWp7QiIpUeAdNU72PEzb+k/3J5OZf6B\nsSTlPPC9bNfnSa8cDPK7blL5i9sM6dlT9aA39DeE/JRoqa+tygSLTboFvhzc\nsRI1\r\n=urwl\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDFxGFT6ipvuyVzfHiuoOgBqM+4KdouTK/1BKSdlE7r/AIgPKfBjZcq3h8s4Z7zPy5Qn7c7OJIeftTP53IU9OoRoOQ="}]},"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-formfield_0.15.0-canary.05c6a93c.0_1584981367830_0.649439744334805"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.1":{"name":"@material/mwc-formfield","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-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/form-field":"=6.0.0-canary.35a32aaea.0","@material/mwc-base":"^0.14.1","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"b0de4ae05c3088b277f5c20ed01e4d684cc6b8b1","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.14.1","_nodeVersion":"13.8.0","_npmVersion":"lerna/3.20.2/node@v13.8.0+x64 (darwin)","dist":{"integrity":"sha512-hRDFXUqB16vojdxGntzbaaVUqfODWXMg6D40Fjj0/ok2rC31POO/uoRhVHvwUZOHyjcY7yvFmXFQOXe5gUyNtg==","shasum":"30aae7b12088bae93008c6c159dec1d00957222b","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.14.1.tgz","fileCount":16,"unpackedSize":44163,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeePiFCRA9TVsSAnZWagAAHq8P/2v0X4gBBOb/3beDa9VV\nu09x/Luj0wsEFesqwbuD7CwUmgbM/7g0KAb0aN3G/tshQGz+lSfQUkoDpI0o\nukdTPpVqaXpsjxDw87uLrRY0GlnPK92k/8+vNO8XfyoPzVduoQypndpJ/D//\nCZ5QDsWqpp0FEjve9Z5mbsMIP0NPRykLlOvHqrHYmPJfQX4PI1vVWL3GOs2l\ndI5cokkIieHM/SbMIlzC8i2nLH3/0U4yyWqJ4s2jDpJcNjQ/d80WEE/Ms1Qn\nZwT5FdpGT/GRarfZUXAOxJQUchhl7qF+NPNwI2wyp2U0ZbCkBl/xk+Y4yIXB\nGitoGi/JI3GNIA/hNLD+esVcPjSJTRBt2AXv9ffkLd8WYMEU1A/M/LTKrLnl\nwUdawoF/qP/sItMCIr/99kAMNtNhvpoZwGHnZsob90RklQNPJyFE5wfA9fuJ\nbOCPUxinStD9jgGFYCmB4Sl2pza8wcO2fn+EISivaymaKnhd8ujsYGYV73yG\nbC8iwtsma+7+ZqdUJZJQ5uKiONCDJWd1ApM3XCS+rZS1H0MkbpvZeLLUMd1r\n6Dq4cCzkdVQEqgdU6FnowFhqJoGRVndWrsO8ojrekKtnQ+r1FYDuFYcDEowB\nqKiipy82EEd60Rp2IoYT4fhw63ePtTzOBbjxkK76cxiLky1r3IFPrF4ZHztd\nTA1z\r\n=Qmyo\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDiDVWj59hEMhqHV1o6v9cadlhQMb6hYr91V64ERYi37wIhAKTtY00ZSTW9oq7vvuiHNml4opu601wZuFUQblPCsEIf"}]},"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-formfield_0.14.1_1584986244587_0.4786990249163776"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.4e6be3f4.0":{"name":"@material/mwc-formfield","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-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/form-field":"=6.0.0-canary.35a32aaea.0","@material/mwc-base":"0.15.0-canary.4e6be3f4.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"1512aaf308db7992eea7201d4af81bf1e616d5d8","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1512aaf308db7992eea7201d4af81bf1e616d5d8/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1512aaf308db7992eea7201d4af81bf1e616d5d8/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1512aaf308db7992eea7201d4af81bf1e616d5d8/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n*None*\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.15.0-canary.4e6be3f4.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-KJHjsrizTa0jxDYN+zQpS8ct+Wwp7HBfOp8Fwcq2zJ8sKLXd3tqp8IgkgXc3LyELN61TiXoSNCYE5+2mJQoJoQ==","shasum":"fd49de1a65c545045ea1a87f09eae32767ceea65","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.15.0-canary.4e6be3f4.0.tgz","fileCount":16,"unpackedSize":44198,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeenRzCRA9TVsSAnZWagAATSsQAKRMZy0Bq+KawpshHNK0\nyDlq8R6NjDqtnnnbhzfYCKEGhssiFcwhSkkYL26TLd9YjCJ13foJ5P14Cz1v\n4QBnKxqS1Tcom+DkPc/a/9U3vGDsBgSWpCFvqKkqbWA+FNa0LR4+iLEtfME6\nAffqHK/ViRqCUeRoWpZed0NubPdxGjgR9/2mJhSPoeMYk7INmSmPIjFrMZ28\nTgBh3fmXqJvd0/q3XDSH3QikRoVaY8XaOjx0HWWysixl7qWyqXrO9kiuCCmD\nY1TUEzqoSMEmWhPoSJU7/ME8WDO+/TiOSWO2EwIvnTFD6FjbKqPp8ZSY87N4\nJcRdfqnHEmK5b8M5lC1/zHT3FZIIRnBHqb1xCAOAxtIBWqfcq9kek7E8HXuA\nQJqn4s2W8BMrRgbuflVypJ6nxnkYrrJOWifI3UyirMirKfjIVDwp+6nlny8T\nvdhGESrGqppdAHm7AS3Hbo7OMY2BwNY/wadnWRwjEw28lTRbTaX3V6KhSAEy\no+wIkH8VTYNL3NTfdJp4WrTTvsRh8W1evWL99Z53ICyGKLFtF/zvvZQQzbKj\nmlQGmDkvZS95eYfGvaP4Sgn434xOdVjfIawrZWnEH8uGLY0UOr3VcrHLGcGz\n/NCbEi/nfsuqPVRhI1rwyXHsPyVTtpxUPRDXAoig1TTyFrnjQp+nF7nXdcWe\nG/0e\r\n=cZUB\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGx+4d360Cp3Kg/uT4P3tgokiIfrauJBPOktT7QQ/n/9AiBIkmoaQ/sQOF3QnWoqCVBnxXH1iTHcKIBC4Y5rI8ECtA=="}]},"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-formfield_0.15.0-canary.4e6be3f4.0_1585083507402_0.34727395441278897"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.c29a683d.0":{"name":"@material/mwc-formfield","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-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/form-field":"=6.0.0-canary.8707953b6.0","@material/mwc-base":"0.15.0-canary.c29a683d.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"8425a605fcff9f0247ba649d1c8b16a70fe79720","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8425a605fcff9f0247ba649d1c8b16a70fe79720/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8425a605fcff9f0247ba649d1c8b16a70fe79720/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8425a605fcff9f0247ba649d1c8b16a70fe79720/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n*None*\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.15.0-canary.c29a683d.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-cNudWcA7CITwVUociNUycvYLYY74Vtk8HsAFmOm2Bc/axM4YeTMbfnflrAXjaBKt0KZO/XP05d1ogaxMQ6SNZA==","shasum":"1a433b3f14f14fd3c5a12222489ee75cf3b883e7","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.15.0-canary.c29a683d.0.tgz","fileCount":16,"unpackedSize":44198,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeeniiCRA9TVsSAnZWagAAmeEQAJPsZMRNlsOerUARp1ET\nlVR50XANprfVfcH/2rHDct4HnvGf482xWcvqoheJiH4Z4XU5EZAJOl8DQfng\nIO1cyFe8nY16HZM1AjOloTQyYOsljtIU3Ln451WrOiwc9S2V+wQlWFLUTRBH\nHA9tIau12JOk2NfyCtBB513bZW8Qv9Y5FYfCsySIe+Rzjpb8AjFK1SMUuYOk\nIAjogEtYtk7NDOBPmn0+vLFOWdMt9+aPQgjt7ZSynFKrzS3lbQPrI1kdsah1\nRj6g7Lt/TJxqacEjqKYeqKjKv4VgIJywH5KWQkAPph1a95oYxOMT45tGVbHm\nP5hlrW2Pb97vC8ODPD4ttDE+vAflaqzzKhQJUAcStqO8Z0iVNf40fzd5aNtS\nn8QSjXPw7TFEk3gKiJUz6otJTq3KtmGiAzgHrMea7WL++TKtxYoefroa4RgY\n4X2YvRubUA0+AkJQyc6LAnbqQ7bnA7GMx//apT4aINfVtggnuO/ejg0iLmzm\nDB+N5XS5o/+2zU4Hlk9R7nq1TpVj5kYDVtN3BbvrLOCBvHHeFkhMubZts6BY\n3gJvfHCRS+azVzVxnemQgnDc5/QRaBg9JqF+Q6WyLn0XjhUuaLEYkczaqHTl\n21jPecpsKqHrrWJUQEnNphlSXXKd00MrUspPAsAziCBxxz3xb9y7dioO5Mgm\nrwzB\r\n=HREg\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDlvc+zNhYHzpw2qBQx9AOfC5qGRiTtnJ7Mcsqy7DGYBwIhAPOTUfkEzxlNQONb4yW9dpdQYNZ1VQzUupeQnMbjUuBa"}]},"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-formfield_0.15.0-canary.c29a683d.0_1585084577786_0.3181524613133204"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.fca3dd9d.0":{"name":"@material/mwc-formfield","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-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/form-field":"=6.0.0-canary.8707953b6.0","@material/mwc-base":"0.15.0-canary.fca3dd9d.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"3eb322e4775d836b8959bdd2dfe63f09dd0e0fee","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3eb322e4775d836b8959bdd2dfe63f09dd0e0fee/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3eb322e4775d836b8959bdd2dfe63f09dd0e0fee/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3eb322e4775d836b8959bdd2dfe63f09dd0e0fee/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n*None*\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.15.0-canary.fca3dd9d.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-T6kw1Lut7YtvFppSa+XddswlA9/Q7pvs+0ADZMHeVpKkLoDz30uvjXCkHmmYmgnLzlD5r3Df+pos1oNu8in2MA==","shasum":"248630181dcf66ebc9d36ae1bd0262f760dec52e","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.15.0-canary.fca3dd9d.0.tgz","fileCount":16,"unpackedSize":44198,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeepr4CRA9TVsSAnZWagAARm0P/0vTXwUmd0Oz7FgRQvMD\nNBS+Y5gen8OdDAcixAXZKRwVNePlijeIbSPpOYagzGTq8oRdmpQVbQLVWEs7\nb5xsBO+3s+2Yf1304wAHukedcESasJdmv+trAiNxV1ytb929g/CzDcIjjZxJ\npJAmF1VmcEOWsPfW6tTdGvkSscI3gpRj3pzkzI7a+5DGl5suDEHxDzeTyZrh\n+jecAz90IoYi3zSvY6D7BL/9GmuwjGVjrXdP6JySrf4koXcXEn5B3Sm/DLuz\n/8TgQEQXBMZTZjj3/T4UPvzRBjciSh7zlCLPwhDfy7NfaoO6Y6Ly6tK0QTFe\nJNhc4z09oxxI88VaOI+juvGSoSEOGRdn359H1VONEm+M1F9OYudlT2QfKMBi\ngoRBJ8RllbYmxiBnz7ISXqE6FuJB7NRW8Xuw/A5ktd2ruIkI8Y+KPHw8tMHm\n3IuJ00JtciFqubGh7Be7/9sAHa03oWdQjWx8tQQjJPA9VdFL3VCtDIjJTnAh\niYPJxgOBSj+yrfU+iLs9IzeuHF0Ws0C5hkmdsQTOBCrNWDVb1R1YJgZx891p\ny8mzLEx4EMhMcaNBpHiuz4ju5uShxelg5my4w36xDDp7dOXB4L0nMatbrcat\nIffbQu6dB8ImPUzLw7js0I5sncLCXvFgz2o7jpf1O1Q9/P4wT3Tn9u/1AWgv\nWdEV\r\n=ay7o\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDjUX7aYykwX1XmZCL9lCPxPy5gOFoxxrQxbrpmp50BigIgZV5oYRBb96Sl502KWGmYDinhEqiyug4kW6ksgWA5Y4s="}]},"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-formfield_0.15.0-canary.fca3dd9d.0_1585093368255_0.3555564620522138"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.1e73da49.0":{"name":"@material/mwc-formfield","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-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/form-field":"=6.0.0-canary.10af6cf39.0","@material/mwc-base":"0.15.0-canary.1e73da49.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"cbf63b814d242690910ae4946b6144120c317eb0","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/cbf63b814d242690910ae4946b6144120c317eb0/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/cbf63b814d242690910ae4946b6144120c317eb0/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/cbf63b814d242690910ae4946b6144120c317eb0/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n*None*\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.15.0-canary.1e73da49.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-JrTPfbvvuAZ8SHOAW7m2pjYgC6ZT5otxOHE2dtwFGKX9PaXzl+8QzNSNlQb7MLZ/hAUMVjYDbeGA8TUlPVIsxg==","shasum":"dc55a8db9310d419b4cb744289e5c5194a65ed7d","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.15.0-canary.1e73da49.0.tgz","fileCount":16,"unpackedSize":44198,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJee81ACRA9TVsSAnZWagAAYt4P/AqJ/d6qylmnyTOloyLD\nTtCezNXwhzr6oruRI6Il28KHZJU0iz8aOnCQRs7TCCdXpaNTW+bRsuf4S7za\njzxTHqATJdy4epcw3rff8ykMZzTaDYV0lHtMt1GvPmtTyBken0gVHup5E5hz\nskqbAXznKPklNUG9noLVNLrj1J/rm6ndycpoL1OKx8IuRUPLHr9eLhd9gBIk\nPGUuSERyxOV553mxCWD1IDgGLSGpy3MmUOZTbrCTBKMqlFnLbHmCROHOflPC\nmk6yg25XK+eeIPFOLZCb/TxPEAd3ZB4esvqCPyVBbP7rnpqf2irFHlQHt1+b\njR9Cr6SIKSfgHEu5Zpm6Xvss7bHOoQhxkSdbiPOTk1i2nq1BtBh7jo1mw47b\nABgxnr6wWDRebK22b81MkRK4A9wy0g+D26lI0/W1mFqupv36Xl1iUou/Zngx\n4APPxIzNtPMeCW/1L/5OfVoaxEtoa2VfjvMVpCUY43Dq/wEYQsmSJVNmbRqW\nckhoHNXjTqfcA4rgJm6X/RNiiRkP/6zOfsO/uW2ktrEyiGJdqxD1a6yetNwl\nDDlmsCq9KuZrMuToJVzoVbQClxat2KhFsfIQmZcfMcgNFmAWQrequKY/3tLU\nS1LWHKEzbvVNau5k1RwgGYsQbY/TqPq/IsFkoZZWpwWl1/H8m3SM+AISmPlz\n2S2U\r\n=sRoJ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEeA+AYJ+wHEeZ4A86ggrCf68Q6jnYSYtO0bt+S9HGQcAiEA0YzHmvwF9s1wfZgePOr/+ImAm7VIw1NiPLfyF0Csggw="}]},"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-formfield_0.15.0-canary.1e73da49.0_1585171775579_0.47566210828922695"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.bb6dfc5a.0":{"name":"@material/mwc-formfield","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-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/form-field":"=6.0.0-canary.10af6cf39.0","@material/mwc-base":"0.15.0-canary.bb6dfc5a.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"beb2656148ba3ea8e2b2b5053396cd8d9ae8e52f","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/beb2656148ba3ea8e2b2b5053396cd8d9ae8e52f/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/beb2656148ba3ea8e2b2b5053396cd8d9ae8e52f/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/beb2656148ba3ea8e2b2b5053396cd8d9ae8e52f/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n*None*\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.15.0-canary.bb6dfc5a.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-pKk8CQ8RJ1/9Xs/BaRfTHuxvGE5ZScTKLdCs6nD3J04fTvOeI8nOzg0OzUY3FCWqTKJpt/VcKKfvg41alJsGEA==","shasum":"ac7633d10676be2a4dd205f4116fb4b4cfe7a9a0","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.15.0-canary.bb6dfc5a.0.tgz","fileCount":16,"unpackedSize":44198,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJefVVkCRA9TVsSAnZWagAASvcP/R/EjDxdRa5qYuQIyrD7\n2TqadZs+RALecftu6+ZW+k91D/ZPUjYnMcwbFlN67E9xQQ4kaSgshBKq1ptc\nl+lvgolJfHvceFRR6KOvH9iSIWrC7H+fmKgJCPTRlxUPxloBxFlicPE0SMRO\nskkJaM+N7TyDc5JeBISkCOK1MCLLoSl2/outDUw6VqAb99/6GF2xnUQSs3Ya\nmLTzLx2OWC8iLq9HEmgmUbZTneGsLEM6CvCYpmuxxR3ptpDKKOlCktn5534/\nEQm79wE3paz8fiN/IGpd1UOsVNx2pb0hBkcx1gCCm0cuzFiJ6+c8AA13QkI0\nM8R3wkrMt6m8mSCM8HlE9iMOCYGhBF65XHfoUR+b1c3DNqVbyQKmXaCGFbjr\nwxg9WuB7A6EEjKhDiltS5KusDLsgEyPcHukjNskSJAIrvUczfS2p5yUIRPqw\n23ApXfQXn9xxYe8VVchM7eysiTO1kPOLWrRS4FgZoOOfDJFArzZsExrLrMwB\nPyM7gbUZ2vCD4yk6O+FxT1POeOeU9Yyrh08Bo5EozprB1FqcFSlLjsNGFt4I\nyTkazcs/BsdcmJUSL9zeJQVfpSgsVE15jPt+rahacVzgAprUL28IvwknyhzK\n/Xv7G2nfKOT98mePP8DhfRtb/sHFW3HxD7vUam59LkR1Z91l6X8DyjEh6kbx\n9Ssf\r\n=fjJR\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBYMdfyxITvQyMJNJXpqwEoTdQgsFLZvyCDRX0MwAywAAiB9r9LOa+rYmiUFQXcMf/o9nE93Y6UqEHWIIdlHaD8W4Q=="}]},"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-formfield_0.15.0-canary.bb6dfc5a.0_1585272163982_0.6949404124547072"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.1884603d.0":{"name":"@material/mwc-formfield","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-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/form-field":"=6.0.0-canary.10af6cf39.0","@material/mwc-base":"0.15.0-canary.1884603d.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"9a072ce4f7812e5120dbc51ed124d9669e1f7be5","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9a072ce4f7812e5120dbc51ed124d9669e1f7be5/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9a072ce4f7812e5120dbc51ed124d9669e1f7be5/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9a072ce4f7812e5120dbc51ed124d9669e1f7be5/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n*None*\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.15.0-canary.1884603d.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-H9oMJgmRx9Ez31Shch221+j/7/FYmj+VY+7/CyaHpxw6/ohSY8/5aRGLp2NUKu0l+R+25HWnfY9/D/csd4KGZg==","shasum":"9f77869ca258e1fe8f2450d5b3fed3168cf69070","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.15.0-canary.1884603d.0.tgz","fileCount":16,"unpackedSize":44198,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJefloZCRA9TVsSAnZWagAAvzsP/2Lpq4LwQXlmGbYbes6D\nT/ouhR3sXfXeh6srJ9ZEFMHFfie56T3Ptmo45zPww5q6WqBxXJWBDIyB1851\nqlJ1YmykNWtdYE/M5YJ2ShWs6zPKVhzWcIvvNpWyyuI2Kj44CsDYVFbbXhNn\nkj5/TSGLk+cCNblpfNWbc0Uvpy91THAi1nkQdcH8gAd+l7ldJfBMmA7HzpiZ\nc9/16L5NJegsogYYmd6KNaCnFK/bfhknnMm0lOmzsy3+LEfY28qlEPs8TllR\nPVm5CpGfn7nEc8XK1r2eoEVxlBDgzvO/TMXDQhGCtTQedFxmLV+JmsSJ3OZh\neU9P3Ch0odB8/uBPd5A1QftZ4EM2Ax0hCnoI1bwq5AU4q09Af0yzEPGIdYFg\nx+s85HB88vFN1oMXHqhWtrIh9sRQ+R6Pq+n74cHeIeADPu0NX9c1Gm3Q7BpC\nDt1wode/0dhuhVTXAIg+Ew1sotjMIaATOPCwjfsSi+/2Owuc5my92IlFPJmr\nzcZbsL6Ay6GokNKO2rINxNilAZVjKr8IYI4+feVEhTQgldjhpkaxZ6YmNlIg\npeU2IHqyxde2g4y+e0UG2D3kyZbGjyp0Ie+G+PFFpoIJXJfmh4b5qjc5s94h\nnyJDI6Hk0CXDZb5uNYXz31E/Q2H7YmBMMTI20F1fqgDLKyUetmlS3io2pxzR\n6wdX\r\n=TU+W\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDiCiMmmbpOZVvwxGQeVA0ryo3CyGIasbzVVy8ptHmQsQIhAMDh2aKz0S8TkhA9TqPFWTUmEp725mQVzf88Ki42g/Fz"}]},"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-formfield_0.15.0-canary.1884603d.0_1585338905334_0.6804806995670045"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.aff73cab.0":{"name":"@material/mwc-formfield","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-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/form-field":"=6.0.0-canary.d6315efe2.0","@material/mwc-base":"0.15.0-canary.aff73cab.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"40f9b297ee5f13af191b6bf450012454426c44b0","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/40f9b297ee5f13af191b6bf450012454426c44b0/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/40f9b297ee5f13af191b6bf450012454426c44b0/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/40f9b297ee5f13af191b6bf450012454426c44b0/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n*None*\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.15.0-canary.aff73cab.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-SkfVF7XO0sOOSJkyxU0qFzdQry2bGqRQZOet/KCAEPl/O3eTD3zOGUHmlC7RaSS73mbkY5T34mnrR/thxTbtSw==","shasum":"a83c3e1d9356dd85bb8e451ce851b1e537811bd6","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.15.0-canary.aff73cab.0.tgz","fileCount":16,"unpackedSize":44198,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJefmyZCRA9TVsSAnZWagAAkxQP/j/Xvo3k50f+Gt0gbDpJ\n3aJj663CxoIXT9aWkhjYXhEB9t6kVWHq3iE8K3BGsoLE6bJLHV4PzhswmCRY\nc1Y8SrhQbCLne/IY7V+r1gayhGGx0v5/H5M3NKsAQ1p6hPZfoBwxmP9RKPzv\ndTZzLKfsBawAADQ3O9kQhZrZaTeRm4vsWt9IqXf2VoepTs37hCS/ahCnUfZS\ndpbk8DIv1XV/K+F3w+LvRqakF9xi0n48WAIiGVQTdEq1hBHclElfLeuzAjQ2\naIk9kMHZl8uKLiAfAuazAXMg7rDxvMHvw/hjA7NDrQzH/Hhz6j9iybUDN9CD\nY+/PyRVa6nL5+0ZL2ZlxzJVfb1S4n6ZhvtwBRiOXVoxfhdJg0555LwwHVmU+\nO4BMADrBx3RPpdkSikMJ/5aw5aCK9J1SgyAPuAfKp+sM+1Po1sr1/lz2jIau\npPrev5w46rmtc3/Cjlem/fJjz0NxodgrM+ltP5uVB0pcrynKsdxQp4SL8RaD\nppk9bBA8hvQ4nOisi8MZNkib+cZwIoT7uRjDAh/cizA2u/hlowwdtEJBUwTw\nyCEhcxs3URVmyZQgwaDdLPb28GXCUeFG3Rzse1CNVs2aLFlNnCVehcuhqKtB\nPbM9lCw5QqYj5T+4s5TjrXy8pGjstgtSI6Ys6MP4XuScfR99yntdqkJYUa/k\nOtf7\r\n=XP9S\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDEnveJPwNDoUSStMZZq0vnxWt5YdlHB4VvSWn3g3wwSQIhANmx2JxIm4VkYoy1/0c/jvTapW3XmXZmk+IO67+PyLeM"}]},"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-formfield_0.15.0-canary.aff73cab.0_1585343641117_0.9051549226362647"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.63168f61.0":{"name":"@material/mwc-formfield","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-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/form-field":"=6.0.0-canary.a3016368d.0","@material/mwc-base":"0.15.0-canary.63168f61.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"84107987770a82843942246baa8226b37f269240","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/84107987770a82843942246baa8226b37f269240/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/84107987770a82843942246baa8226b37f269240/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/84107987770a82843942246baa8226b37f269240/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n*None*\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.15.0-canary.63168f61.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-JWhaO7g+Jc1E9xv78e7GSlmR2Fr3tu5S8X1aQezyjRRsYsWOrYfAjPY9E5R4ls/Sycc3M1EEaOhH1c1ecF8AzA==","shasum":"db8304e50d3bcb6ef67c354b557f197e09b09825","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.15.0-canary.63168f61.0.tgz","fileCount":16,"unpackedSize":44198,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeg4f1CRA9TVsSAnZWagAAF58P+wZE1CqQKQCbGjPL7VfW\n6R+EBAucRucn6SQO+dIe1Q4aRRMQvnlws9HyE5gmPPrUWBUQncPA0f9yeiac\nxx9rE6eEJX73X1bb8IHhHM9Ngg39azdkyNKEwZPL69tMKEFMdCVDxWTSVRs/\n9wy7gzw4tAmEdpkAFJjKaMPVt10esOmtbCqMlIJwy25U75FXcXV6Lh4aZ8pr\nKPZvt+Ez/Y+CHxIdz5Jo7wDJ2CIZNc1LW1qI/ynTqOal6K/KmKBetQGgBtx7\nH1ur1NJOaTSHRhy2MiG6QQU7LEYI4QvB2ix3wCn/KyGWxM9PynQqAZjUF1of\nfT1OurW73Mx9Gy2bbvdG1cx3HYhqdtZhnIdlDpl4DOmHPeCOWPg/9VncotPn\nYuBUwVR/Q6i23PDnOXxKkd/xTI9333igs4lAfw1rmYZNV24adE900KAP/q+I\nrMafmZQtGcSnTKVkpbRdfkHiAfsOtVzIvr775agKoc5JWrSBtCpf+KP1nzLX\ndaNTJLT8jwymP5ZQEkRnLI5+mMJAfeadWBTfJyRgTycyUoMWZiQai4TXddYG\nkRqUHnw3FxF/HloAcEAlbeDgL/G4wKrkfTmn8iado+aJlRDXR2+mViQ9sstg\naFKmwrlsSz+3SBxsI+h2D18f8bbztdU0AYOwfLSlpYZ2a7FIXRvS30um84yc\na+6q\r\n=luDK\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCaqeZX7xqycx8UlTBEA+h7LepEVrfRG7/xfhtca+3t3wIhAONebbAb7/BQRYVlLxlrh9w7sabxRF81rtsRJGGUfJoY"}]},"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-formfield_0.15.0-canary.63168f61.0_1585678325317_0.5205171269034159"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.9fb79b3e.0":{"name":"@material/mwc-formfield","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-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/form-field":"=6.0.0-canary.4b45b6620.0","@material/mwc-base":"0.15.0-canary.9fb79b3e.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"6669949a31d7f92febd25f5d49eb40a5db4aa7f5","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6669949a31d7f92febd25f5d49eb40a5db4aa7f5/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6669949a31d7f92febd25f5d49eb40a5db4aa7f5/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6669949a31d7f92febd25f5d49eb40a5db4aa7f5/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n*None*\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.15.0-canary.9fb79b3e.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-mS6gN4D8xBZKaF5kKMEILH75X0iWKdyw7wON8ERQBNX3xiM06sk+4G9ZGnzkC/G0/7S68mjb98ojI1q+r8QgCg==","shasum":"02fc764fb4fe68cc9ec30ba5619b86875f5bf2bd","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.15.0-canary.9fb79b3e.0.tgz","fileCount":16,"unpackedSize":44198,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeg7P4CRA9TVsSAnZWagAAJGUQAJlwDHAwaEHi3RhQo0dt\nL6IvCWAP4p66JCjjmTNk51EcYd3tsmOs3ViUEinIkjjnBT6teYmVv4006oD+\nD1WzkPBtOm5E6urhmKjDNB9l9WuxVLfWtM6JxBydxQJDlw66ZEPnAufoMN9/\n7h9ntwnBVDMi8jSfi5B37vF5fbrnVvqozHhWWoYBxDcA48HIc7OiLNXPmbgU\ns1+QDGGd3T0tzIzqCdqyvTpTlgNXJarPBBmEfkySbSRCjemRXJ5gaSiBuuyL\n+oEEkfjdXZVufNRuB6VeDYIYKCVp5kOx69htUIsCZF1K/xakfzB2KoDMTLnb\n45SlScH0Q9wBGWoIkRD5FzfBDLrg5jybn6tgm/xA+qotjoKAn7Amll0rXp/w\nvLWdPRgyXmBku4reTLirhn60CEPLt1RwLXq6pMF3eOpnaimm45pVCkRRT5E3\n/puJqPuFebo5/a7Z073fgP/Yc41ZjgY2gg0d+wJWjmbFJpS09FHfpiXlbxMZ\nTUV/zWqlVesJZutnhMaXgU1mxFgPRlLa3xl3s8up9JXnnnzG+swr5h9+Xq1/\n04gdKYCMq1reXnxAuLbysoeeO30MLwm6v49CO8zBvwiBsR/2+cUGIn4bUppr\nSZ3nmLRpXAJ+QSROZGGChu82Iwy7rFquwFmyU5sh2LPltU1U9EjIjp9k/Rli\n+EPh\r\n=dkB3\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCnLFkLpUbLc80XdWwCmy80ivcBaruz8e4/qlmmApxQIwIgYzjqkjvpn4s+OgOiGpc2Npb1TGtOrtGhuqTDjSfyaLI="}]},"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-formfield_0.15.0-canary.9fb79b3e.0_1585689591838_0.6364391000773795"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.9bd3e9e2.0":{"name":"@material/mwc-formfield","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-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/form-field":"=6.0.0-canary.4b45b6620.0","@material/mwc-base":"0.15.0-canary.9bd3e9e2.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"9b56904aedd36911e83576292843c11af1a00006","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9b56904aedd36911e83576292843c11af1a00006/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9b56904aedd36911e83576292843c11af1a00006/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9b56904aedd36911e83576292843c11af1a00006/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n*None*\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.15.0-canary.9bd3e9e2.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-PD8brZ60SIF37Ey3bib8TK6oaF1ndcKq/3BmwX72tpk0/jqLmmPNWeFL5bGCe/qjZHnhK22ap8QVH/cUO2Lo2g==","shasum":"3295a962a87c6e308d2058264da1b0ea2d9f842d","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.15.0-canary.9bd3e9e2.0.tgz","fileCount":16,"unpackedSize":44198,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeg90UCRA9TVsSAnZWagAATMEP/jv3QT+PPYAegten1zPT\nCzpXkU9CzXCBcQHumMFx3TY7wvju5lcbwX5VwxlkuPbYU0LHGGQvVIC68VOB\nlijfPlQgfMKVk/jzvMyE4cqsFjdvl87EGIB2ZD3ctaLHXglUaGTe3MncVzSl\ntOkccAzn6BDsxaXL2eg1OGZW3HldkLUKMUNKJx4rjl4xyU30iTd6rRcmxRp7\nc0w2786G2ha6EgZQBlLKEolDS4spBEEg0DO2vKkbuW34C9eN84UCMOsoe8zg\nLFXDPjQ1WEBpgEsz9+tdiuao6DvPMj0YXPdZxk+r7TBpuajvlc3qD194ESzc\nCmF/mKPhhHKk0jyMY9/CNsZiy/YbaW2NWo2yFydGIzSIl6trpYqBIoYk0FWT\nvvPJ67P/CnJFBmCeXsROqgjA30xsZ8cO6M7J6oPKzOz8okFpXlbeTTWG6nKU\nRZiCzj6EwmAkLP4Nc9TvF9URAN4UG/SZtANjp7FwzUA5Na+oTKLVRAHccYmD\nugLU5CX2PM3M7EDZ/c6xDHv2Rw4qfJDQzRT7NOjFfUN7o7azh/+KwdxAexch\n4aTX3URKvyvULxpF8rMA/FhIIxF5jSWSWQh7puK2KdpJ/zzOr882Hx5WiEoo\nYxlj/9pBtnGITNL1sFy+gwhAVKEsE1Laomtyi35+4O4VJ65MAK15EPflQp8o\nCDp2\r\n=B+Sb\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHkz2YAK1bSw45bwA5rL1F2YnJA45VltEQxGM9zgljJwAiBQGlfsbJ21DDAyPlnIw5SE5goplOhQC45F6l7KNpTYwQ=="}]},"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-formfield_0.15.0-canary.9bd3e9e2.0_1585700116014_0.3011457707452492"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.072084ab.0":{"name":"@material/mwc-formfield","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-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/form-field":"=6.0.0-canary.e84b9c8.0","@material/mwc-base":"0.15.0-canary.072084ab.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"98a539f9970dea2ebc84f30f462c69e72dc0c4b1","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/98a539f9970dea2ebc84f30f462c69e72dc0c4b1/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/98a539f9970dea2ebc84f30f462c69e72dc0c4b1/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/98a539f9970dea2ebc84f30f462c69e72dc0c4b1/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n*None*\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.15.0-canary.072084ab.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-Tt8GRouwK2lVMHYvFEeuif5t31y0OLWdT/2FdO7wjuNAeHagTO+/oKhykVHmMgv4akNLSoYC1sia1WC/PihOrg==","shasum":"caace649fb60c7a67158b875259fdebf857ef2af","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.15.0-canary.072084ab.0.tgz","fileCount":16,"unpackedSize":44823,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJehN/ZCRA9TVsSAnZWagAAzfsP/jVGRbMtxEERMNKqHqAf\nx2RhwwQLjZ56MWnND7wNCl2ah2DOFhn/p6UvAu6sWo4nT+vs7d6ot6FpVFB1\nWE5O4oS8KwGS+m0aaSS935JxIs/t6i97PTQ8Cv8qP9ajZMRLZp9SKeybBFDY\nUQka2kFOURP7KVOb92XC01Sn1W3H+its/WjVCEWWYwRoWf7yLiYVj+WIbrd9\nSK/87BjKOK5pSkko1+MdW1ehTxKXPoeehxIh5PKaWwP7KWrOUMEOz1lEvVhv\n9Il3BtqAblnVcixHy40LDw0vHWqtrE7GySwhCJV4IJ2rfZaW2LZn2DWo5gAL\nI1piuLxTmJQq9lbaDMIBYaPF8VqUltdi7eyxXjY35K+72/dlmpA5krcXTQKz\nUlvmmglsR/gaiZaSblHdb4GRWsOD0PNc8glHCWYExuigKcQ+8wGZtEv5HAMp\nlpY8Y+OyKoQSlnrrVo10YClPtw6oXQRUsTmIzObZp0gUJ1CM6AwI3cAsyoW0\nv3pulvxPkM9qIOm4tz3j5yk2DXTY/YqPHt5Fo+A0TGkMFCLILwSt6LqPlgaR\nMw3x5pGVgMaJWrsk3HOMfYCKbyM6ROCnkcsujwrloxmg+KydxgagQzwxf+Ov\n085nlr0FY73Ef1nEutugVCaeIoV5+5OVWS19w1jth684noSQXI7skrl4+uxe\nN31c\r\n=4op1\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDZSwFizFYqiGERPq6CMQ7NpONEgC0i3Dv71LA5MrCVpwIhAOb93s9/SteQBimrEZsc1C+y1q788ryhl+LEsR9HXm7U"}]},"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-formfield_0.15.0-canary.072084ab.0_1585766360602_0.774878010145724"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.4dec04af.0":{"name":"@material/mwc-formfield","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-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/form-field":"=6.0.0-canary.f1f8e60.0","@material/mwc-base":"0.15.0-canary.4dec04af.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"5d47dd9ed52c3dc1e1895467031d4a7a1df6cedd","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5d47dd9ed52c3dc1e1895467031d4a7a1df6cedd/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5d47dd9ed52c3dc1e1895467031d4a7a1df6cedd/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5d47dd9ed52c3dc1e1895467031d4a7a1df6cedd/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n*None*\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.15.0-canary.4dec04af.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-R30ahIkKyaVCjBvec8TxGqEdOVWNYPwzcDiskAUA9QvZO2XsHS77Kkgmyj3xiaX5BqN1hLhMfiNfIuV6GOp2ig==","shasum":"b7126227d75dfd1d9ac0aec6fa19001b9a84898f","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.15.0-canary.4dec04af.0.tgz","fileCount":16,"unpackedSize":44823,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeh5ygCRA9TVsSAnZWagAAHZMP/ja9XSxpCSK3RnAaZKLR\nqOXc6lWWh/6gAhw02zSun8CMKizioBjVWvvmFGOTBtIll6zR/r8nRiw9CG8F\n60i7oWkeREfHMBnwMWl31l8CThFfbjc2nq/Bh1p2oPPiw7H6e4DjcaZ2QTWn\nE3BeBKNjIIICnjDBw8mkAZ6PubfHSw/OnVlajyBPipif+sH8Wp/dPwDC/EZb\nBWWYywVSxGfs5qV+varLG81m2ajICwQZtC+UOMaNlW4uZExURg0iWujUOaGD\nkP5wcU9+elUa22jXC/elfe3jV5iPT4jw5Tmf9bTUtDcFhif9N2mSUTyA/3lx\nCyuTws2SDWAD692XQOIayo0xzNPh59DP8oD5riwbE5geg1hrU/AVZBVBX60v\n47ovLDm2DLb6nDPQLt0TnHZiI3ZaLS7yvSskANyvm68/PXV+HWACxm9waIEv\n4tB4rrVSFJltwgeQ8/YYFNIUF0iZfRwRO+jAujzNVo2JltEV+wxcrh6fgrO2\niKEcC7O87ZPO07mJGkZhZrPsYrh6PhDjs08PRGX2qto3OzwJLe5tc30WFG33\nTZoIY6bGU5o6CuvMjPuPsn1ipIzS48H6y5lecIFOuM6JbiuJx6kYHMrcdmjD\nOxXUTJ7utP07QPDBQdvmb25mk/eW2iv55wI74sYhpt8Nft373Vwi9jGmejNM\nW6DN\r\n=zfA5\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDeM1brZg8sIP0l04vZxEF0Oi+NRKTUmUTYk1bWPQDMPAiEAuGWMao5ZGxpWOlhZf75nhlUHhkeHPNglsB20wIsrZjs="}]},"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-formfield_0.15.0-canary.4dec04af.0_1585945759851_0.706824403971976"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.9b676354.0":{"name":"@material/mwc-formfield","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-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/form-field":"=6.0.0-canary.e84b9c8.0","@material/mwc-base":"0.15.0-canary.9b676354.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"423f1ad2d234953804097bdb30484154440adc63","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/423f1ad2d234953804097bdb30484154440adc63/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/423f1ad2d234953804097bdb30484154440adc63/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/423f1ad2d234953804097bdb30484154440adc63/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n*None*\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.15.0-canary.9b676354.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-+WU9YsxL49PLZONiZpPT8nn7BfYxFWC4r3SYL0DgUrjupaO2qDRWLmmvdGHV89SE5gJypGSHiCwLXiA6/tCL4Q==","shasum":"ffd25e0f1e5b0dc723e8659850379908f6fbabc8","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.15.0-canary.9b676354.0.tgz","fileCount":16,"unpackedSize":44823,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeh5yxCRA9TVsSAnZWagAAswYP/ioDG8SrDBl0UjGWwpm4\nilS5gcJUAYugIdPzHkilNpVuTEeG/3J4HOjrJwU4QPtNGQ7pMuLewWU5HZ5M\nQH0q+PfmfSHRsmYDxfCqK6UvX7r8C2QoneJ5IEZOCO3Kr047+Ebesayu0LoR\nKIYHwOS0GfaAKSiS3kJEKRLymSpBALonDYViJmrTAIaYkRZNNzMU1Ty8d/mV\nPqH4nTYbczOeVxF3e3i4RyaViWjdFpl/iFWtTanc+KXcsDu19n1lMfgvLw0W\nShqNU7+0k3fCWO2tvDyDKeAS03Uh9hs/pH1Nv9KkL4ZmJrDvQdbGRa2/IfS3\nbF2whZqho2b48+uL7DdZFZd/7rx2kqD3aMWSdc3ScA3NUpHL9I8f8nTWN/eW\nqX4kGXtmu2syCf97F4eIaYfMAeaX2qqFC7u7pfnoLaeO/5CwTXaTMCd9kWro\nVMBNx6WEMqkttp2KE1xTWJ2n5gMjpi7qL9WlduXde9yGCP3Zy3Ja5lusyw+X\nLDhKGvY4C9vaD1XQrQKSS5jgDYLPc3gK09aeGuigBQirStHnjKT7nSDOrQJr\nYYG8rVAXsm01to1ZyBi9ZFlPWTtGu3EmXH3Vv1LLfme1OK3djzj1mguVNi19\nrN80GbM5Go1+Z1Rp25obYQQMU+6LSECRBCCrxqQkEyY6ZUkIVXtvPPt3gMg6\n6F+m\r\n=kuPu\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDVcZmGICjCSxLtNOagfrhZUuXK0hBCXYMXt26XJtZwJAiBEA3vTFrEvEwSp5dvvF+gkV40SX35KfdLYSCv5M2Vh1g=="}]},"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-formfield_0.15.0-canary.9b676354.0_1585945777251_0.3431724051942595"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.6b946095.0":{"name":"@material/mwc-formfield","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-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/form-field":"=6.0.0-canary.f1f8e60.0","@material/mwc-base":"0.15.0-canary.6b946095.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"1b65dfb6b4d3dea0ac5681487459f46352e399e2","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1b65dfb6b4d3dea0ac5681487459f46352e399e2/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1b65dfb6b4d3dea0ac5681487459f46352e399e2/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1b65dfb6b4d3dea0ac5681487459f46352e399e2/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n*None*\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.15.0-canary.6b946095.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-DHAfnVOEp3XjhgWh0OqQ8AyeCmI3VKUB9GCXL0tCmd/k0I8UfRSZ7HBlHaWCRzY4RlwlEnpeX0FOf4rvWct0qQ==","shasum":"3c1ecece5ee8fe7f289e1e0e90e304767bebe28b","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.15.0-canary.6b946095.0.tgz","fileCount":16,"unpackedSize":44823,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeh6lkCRA9TVsSAnZWagAA/EwP/Ru/xdAc+wARXLEUpTH3\n7brLCDmj8JXcNGuwmaBlGA/BE1eW5GNVSVX8HvJbYYmEK3++45QlyEV2v245\nse1gLUnLXV8OCz8c1tB1CKFIa/q3bQZbRXDHhLeEWN3yBZ8iFbiQaGjMcahz\nXD3dZaiyQWwRCfmT8rV3g0T+9y18NmUGgEsPs7W+KyIFTZE+29OkjjiBytua\ngf4XzibsA8qsvGiD/LbfBPE+HKcR+raxeBrEuWoF1WYazrH1q98X+kIkyx4t\nHfAAlWtkuTF74RL5Thcnkj4pgcED83M7L0ZjtpyahYYqHGKQEGKaZGrOgMeu\nWmCNQNM8QNR2hP0fTe6ZQVBfRJysoaqi+Azyi3Ae2Uv4Inh0NRvkpQvaV56Y\nwKC2HHSiVtFwfiYVJIV7+RxF7C3IDcJyYruFN8OFdsdnUCr4ZVe9jBM2Khd7\nCc7tZmJHSohQB5cPwuSNu+Etpudt1J/MSa/RacLoLQK8GQUxeMWUPi8XwrNj\n7fRz5+Ka+Glce9D3hdZ+obvDzhRUJXLvGJREGinhYi7u5qkBISpIqQkJ6rNI\nz3JD6dMiN9qHgm4801iCqP9dFUCl8qjOH/jCJG8kjvM8dkhArH5DG47FcsFx\nNMkdvwYI0jB6QiNaJpzmJFFiDSIPmfQjZ8+CMXnGWFl2fCsofWdR5rF7C7Dc\nwFdC\r\n=sTh6\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCGdeOiVyZOIL0GuMDHsGQDw2/z9nqxk8Itz3Htia4bNAIhAOm6r2Ohd44EwxMHb9vaJTh+SizZ9nzSnXfmrYa/DKKZ"}]},"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-formfield_0.15.0-canary.6b946095.0_1585949027944_0.8318290198475"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.5ccbfaa2.0":{"name":"@material/mwc-formfield","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-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/form-field":"=6.0.0-canary.6a40ef217.0","@material/mwc-base":"0.15.0-canary.5ccbfaa2.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"b20d3f13f2b61c253e28c5f9e5adf15bfe26d88c","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b20d3f13f2b61c253e28c5f9e5adf15bfe26d88c/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b20d3f13f2b61c253e28c5f9e5adf15bfe26d88c/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b20d3f13f2b61c253e28c5f9e5adf15bfe26d88c/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n*None*\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.15.0-canary.5ccbfaa2.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-3l0O+0OUFVf3zyVCcqSNQGa8ImR1tKK/jL+lWNle5/uWBC1hM6pW5Fgpzzq5CmekHnkBroXwqqisja0YOJmXpA==","shasum":"0ba77734c877a12b9b15af3c9a622690d6b94275","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.15.0-canary.5ccbfaa2.0.tgz","fileCount":16,"unpackedSize":44825,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeh6qrCRA9TVsSAnZWagAAG2gQAJz5zXUqsKtPfexENoAv\nydLKs686IP4B+lj0jGTdDztyxuwOM97e2d/RTC9kQ/WntOc7rsVmKaLie64M\necZAicu5mmW0pJHha4801EejutPzx6njnNAZE9Rp6CNE/KKQmlqCmWSOEvXk\nS9fMyi68emchVgTyq4ow0W7BQMc3r3cdp+fjKjOZNWcgCwU7KnLED2sLJE7M\noYtwmrKcxaxwxmD5BuTja+qZvMaPIhui7gM+n19bKv44nnC1TE6H/5mCWxDA\nLc7Ov572vu50tpxqVrBfFOJKD9iUoEYzPRFc382dmeZa5WvGviDMj6tb7p0b\nTBvZbwC4Ff6XJp6sCxmVF8GGlVpbQBZyX0jAMKq6coaFhKx2cRpQceiu3ZRA\nngkGpjIvrSo8BcVueH0Wkq97p+ZRwkCSLcVKHzi+b/esnTZl3KHqOybcjtwW\nIatsnu5hsG999g7SS8mJqW98mDO74VMWXKEiAlQPJgmR2fAJ9sjslWIQ8j35\n8weKbUmgbSaOd/hhfuFi1R4b8ySb/Cg6FPP6W3rzQ3rRRPNNPCwSi/f9s2se\ni/d9MotHcKgIhKVuE852iCY5ypdaAzsygX2Ic7iBhxByAoviit4QbFz4XWtf\naxIe/4z9w6KnixjgQtL2oyS+CsWVSre4teykTZuODy17kHfZtH8mXhqfFz4g\nNhcD\r\n=DXiu\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDx9e9XR/5D2LoGtCXhLwIFgNeulsWRpe+eksGabKGIaQIhAOILIU7aUThQtBEavWgaQgr8+LK/PtixmIZDFrU/o+5h"}]},"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-formfield_0.15.0-canary.5ccbfaa2.0_1585949355055_0.8452991982476583"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.a0ab8772.0":{"name":"@material/mwc-formfield","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-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/form-field":"=6.0.0-canary.6a40ef217.0","@material/mwc-base":"0.15.0-canary.a0ab8772.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"a7db0e2fe222d87e1ee22c0515cbf02cad4b1cc0","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a7db0e2fe222d87e1ee22c0515cbf02cad4b1cc0/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a7db0e2fe222d87e1ee22c0515cbf02cad4b1cc0/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a7db0e2fe222d87e1ee22c0515cbf02cad4b1cc0/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n*None*\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.15.0-canary.a0ab8772.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-PFGy+IubimVOhtjB5tBL46X61K/dsOsj3dFMnGpXgz4PQ1k/LV0SCHPSe6/86BEv0DrF/v1gGJ305fAFUSvMBA==","shasum":"69687e2444c77ec8507c13e417e65fc89cccff62","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.15.0-canary.a0ab8772.0.tgz","fileCount":16,"unpackedSize":44825,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJejN2/CRA9TVsSAnZWagAAw8cP/jO+70wiIavesQq5ShF/\naLYoE7XiKrMVkgwGBXNMs/5QIWVEW979QvZ3DlIk2++w5TJ8DtEXL9aNsBPY\nSAVumcPHOAV5qDGJy0XaPCADOVIu1MKohq9diTh1jKru501tiFXs4rFaavx4\n/ktRZPa5DhyIg67CMar50tBPpQt1APsObukKZ1JImifB7xSZop4Dpz9nXkh8\nC6wAcHIfY6i2WnU1Ai61YwWL7offAJ9aJTITbwvQ7YaR/jqyHzfof7mfVwWV\nM2EOiWnIgUzZybfwW1ZStxrEH1jke5Q1/IGslYCU6+7LQBqQ6RNQCZSuUwyD\n62YeRoXXZXzARa2Mk0ERHJK6GjXKXS9DFJVQfABrrXqa9BSnAkptHf4uFPqB\npqZJhREOFoacSaDYFeIVurfK+lqJHSIDUUX3PUeBHZWczoerT7GLGRO5bjDd\nmQ9zhC8tK0e3W8wJcUuWrOjM0J+rs0KQVRYG/Q4gaCEgw6nEzeEMq23+pk2a\nPRbkBifRNlAs+uZbLpvp5jGCrLpglttzx9GZGTyPDfPMndSodz8ZOl89D/eS\niuAOuof2d4we3T0vhtmn+k3xWSGtuU9B5Oz2SIVaMNNhT35b6ehsiL3RfJ7s\n9KRenIRrWwzlbyLa9l+NN5fY7+IBWvdtzcunm+NFgqKTMpKQ25Sl1obQJD7m\nnbMV\r\n=XqxJ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCqMc1hNQSvkiCdXPaG3Yrwy+ZoyJZGXmf9Mge3dw7jcAIhAOfohVO3MF+JGm33z9xXofXiM5g8EuuiDNNdxBLvw+O/"}]},"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-formfield_0.15.0-canary.a0ab8772.0_1586290111093_0.1281724167715983"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.8d352305.0":{"name":"@material/mwc-formfield","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-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/form-field":"=6.0.0-canary.6a40ef217.0","@material/mwc-base":"0.15.0-canary.8d352305.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"d38e537751f3d38d903a5c7c03910a26cd301f20","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d38e537751f3d38d903a5c7c03910a26cd301f20/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d38e537751f3d38d903a5c7c03910a26cd301f20/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d38e537751f3d38d903a5c7c03910a26cd301f20/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label.\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n*None*\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.15.0-canary.8d352305.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-Uc+iTDtHK5J5D//LQ/pDj+0x6wvDUZF6FB7EiF9cOhDxYYwCaMOeu3YmhaZLBdswk0By8neyHfi0ZGXNXNJCXA==","shasum":"824956eb54b927652156adab3bed9e9c8562c8a6","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.15.0-canary.8d352305.0.tgz","fileCount":16,"unpackedSize":45763,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJejPOICRA9TVsSAnZWagAA1vEP+gPhM9AfWh6nwANaKUGZ\ntk6bCKkuSsEyCshzKEf0fURC1FQ6nEYvZ+ET55V8SguP7wy3qdQqPM8Hbg8j\nGOqnJ1oTIi5GKWHZ3sMhkMxvde2SxST74G90OczlCwzOpTaWQ1Q4zdYQzHIp\njZLkpH5m9vlphzgsm3+drqSBi+zfmwvetbpZmCqv8rXsAXGEdRaiZpArh1y2\n77OBVtbp+jCmglytcZ29H4QsIgRc8NsKvkowWLGgrz0a+n3sT7nFou0MLYbY\nOtTGd/7ZWO+CGSudCtfJYxDEU/tc4CTj77JnlyQpksIhWtW0dVFToHb/1XCZ\nkJSWizlZa2mSUzJu7QzRlRUe6nThFx+iVOfVqAFvaHQqrUcC2Hc6PkeXcDLK\nxen1GRrCTEmmB2fa2q/CxZyo1nyNV6q+NCUIpIPaw+CpQHkxo+lshhQIO3NH\ncyuosnsW3VHWRS1Ag6waOkApsPrmio7+QMQPb2RAqDfK83HnOJLaW98+LKfH\nUACZmQLqOH9VHxdeka4HYWNR2t5lwnP/akp8gMHIs+WB5Krj2UOQbu3ESEqO\n5vK5rOLSvWkYI//RR/2W5+rGUHE/Pp2+1xuZKGoq6Q2ZW0eQPy2A6hTso2NX\nwkFcfrR46r760JZjurtrWmqcB1aHCSgLpZ6mL4lZVfgmOl7MyZJgTozqK6oC\nE7Lg\r\n=rEw3\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIB9GmDvV7Vy5MC0jntWlt6ATCr/M0FvB5GBq0LjlAIwhAiBhv6MAiwrNZnfp5UHUvt/1XtWhi8zYC8e7pevHtGZYcw=="}]},"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-formfield_0.15.0-canary.8d352305.0_1586295688259_0.24073624579789143"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.31eac79f.0":{"name":"@material/mwc-formfield","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-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/form-field":"=6.0.0-canary.6a40ef217.0","@material/mwc-base":"0.15.0-canary.31eac79f.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"fc47d0412882f860dc7dc010657ade07c9a0215b","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/fc47d0412882f860dc7dc010657ade07c9a0215b/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/fc47d0412882f860dc7dc010657ade07c9a0215b/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/fc47d0412882f860dc7dc010657ade07c9a0215b/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label.\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n*None*\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.15.0-canary.31eac79f.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-T+Ua0IPDxOfrrqpwCXcCq5I03Fu/gjCm2J8orE3T8ktuWw2ERLA8eJ5jL3hh3nPOvfGHAG6NmsjXEg8rnaZIwQ==","shasum":"5aa3558ecd35149d4c323f9c2f8f84bf9b405f70","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.15.0-canary.31eac79f.0.tgz","fileCount":16,"unpackedSize":45763,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJejPcwCRA9TVsSAnZWagAAcMgQAIfEt8MKqirbDWVfBsv1\nE9iBlCCySQGAr5ZsrtH9VDC9p37VLC+AGk3O4cRaec+/1z95qBpbOZGFF+q7\niEAMFXhfOZh2Erx94nAcY5UetlxNe+MbiYWwBisKJTheXVDyVLNPCXpWY7I9\nnmA7Yt7179aDSX7Wx0E+egnTvzPbJ+K+JOHT3Cs7FIoxBSjw6tMayjpzf3XS\nz0ZMaWIqerriUYenezf25jHJWLQeBWOXlJF57mMN0FhJS12m+luc3rWp2tAS\nIi7lpLq9KoDZTEqJPZYXfDieGPKCUl5NGlwZ4MGc9izfF4Y+tcFOQywjbWO7\ndj0FOzcX5ynfGAMftmgEUHhcC1US38zMVRXeBbX+qpa4K3G72Jo/jFge7BJg\nSc6FHBB6WQrZL3C0WSYpDEVkeyzdxbwslIJ8DKXf/jBTajrqdFlPYtJyo6sf\n0IqTdEbHBM5AGM+iKz3hbSQRyTZ2fajBJFwZZELrV5jkDehJbzTrMqZZHFHj\nOtbiQIKl5ZRIDGZWM8FVP2/3bVErLXtgl6kZS3jCKb7o+fFAWSggQJ7Vyg7f\n3aMOsebPecaKhyLMvAT0CV4rxNWBuUzyFJF/pxBVwFRV2DbPlaDLFsR5Y6hg\nUj75UW6pIa3eoj9iLRBD8IB7earTr0XNkZ8jPkbp98nGipNurUrfgXGpV6Bk\n/QII\r\n=j10w\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCNGmtBVFsZ6q4guA+H7pcAr10fVSMLgGwT6ZFap15HOQIgFsHUn64b3O2bhNFmUHEahay+B1CxyzqkjOsMBoXIekg="}]},"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-formfield_0.15.0-canary.31eac79f.0_1586296624285_0.8494760723287424"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.ba05565e.0":{"name":"@material/mwc-formfield","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-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/form-field":"=6.0.0-canary.6a40ef217.0","@material/mwc-base":"0.15.0-canary.ba05565e.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"f03dce4944b4b3fb02a1467dd03f7afc0b279a0a","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f03dce4944b4b3fb02a1467dd03f7afc0b279a0a/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f03dce4944b4b3fb02a1467dd03f7afc0b279a0a/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f03dce4944b4b3fb02a1467dd03f7afc0b279a0a/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label.\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n*None*\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.15.0-canary.ba05565e.0","_nodeVersion":"10.20.0","_npmVersion":"lerna/3.20.2/node@v10.20.0+x64 (linux)","dist":{"integrity":"sha512-qMTdhyB0f4X7CoD1mRKb7+NPvyDm9Ggb7k60oudxRB3rPg6X7ESMi/RH/OcCJ7nDgTSNR0fO+3I/jv0SD261wQ==","shasum":"9b738071f8c07b7ac8140b4a10685ec8a35266fa","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.15.0-canary.ba05565e.0.tgz","fileCount":16,"unpackedSize":45763,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJejgqYCRA9TVsSAnZWagAAW2QP/1rvNTj4u+8Q5LJvPOTv\nZKoM489VbPDakK4x82l03FfB8dgPWyACWLJQA5OUqipLIoOcGcC0yuczgIoR\nP/O5oZBfhOLzQB4uMnD8cOaJy0MmMxD6eTJz+mm8Z0Kv+04Ki+LsuFdqoumd\nE6yXOHJaYaSck12wvt4d+apQqsGtbY6NSOCEKE+BT0MmdBbFaSs7EQ5wEc9t\nn6N47ZjvXXvor4N56G8y91tzPOP65SvJv2v9OPetyOim2TSj9W1DmBhtfTQi\necnUcIRLs3YXeRJYsCIYkM/oSOVqnchQ7/0IPxhL9LWh0UJT1rqF0yYr5hN/\n0JsWqHz0KMIERE1o8/d/a2x5XH98QyQ+CF67AV2csMkdah3PJd8mLDWZXv+e\nmt5OkG6wc+XwbRYLNOgTN8cJFQWxPa/WyoKPk9g0Rbad3bSvJ3ZrLZ8q5P7K\n0FhhBgEW5XsVDQemjr4uNFV1G/CMOozvBeRuBLNQ6D1hLq6mf2tKi4WP3ljA\nuaIcNN7b6WNc0UVrVwlfz2ssbeRF9/zzKz7eviR9OdivZjh4dnt3u6TN/ye6\n6ODzx2PPXXqvy6NpOqN8aJ5v1sKR/ditlPJZmEOySk30lWF/kM2+Gb8aUsln\n18wN8IbPYocB+WxbOFT3le7GUGyA9O0zLHgOSjoA5DGQst3l0H3IpEWoYHzv\nh2mG\r\n=KNBn\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIB/HwMoigQ8iCoLEZ7Ls2xkvlyaVVvi5JDHrBsrAdokLAiEA0vQQoQk7fJMZl7LCCm/AW6bT9u4QoqoWb96hyMMqlL4="}]},"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-formfield_0.15.0-canary.ba05565e.0_1586367127872_0.4580487621422955"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.25099f79.0":{"name":"@material/mwc-formfield","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-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/form-field":"=6.0.0-canary.9930d9cc5.0","@material/mwc-base":"0.15.0-canary.25099f79.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"d2069c5f3f79653f2526d8fcca853faca1f2cba0","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d2069c5f3f79653f2526d8fcca853faca1f2cba0/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d2069c5f3f79653f2526d8fcca853faca1f2cba0/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d2069c5f3f79653f2526d8fcca853faca1f2cba0/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label.\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n*None*\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.15.0-canary.25099f79.0","_nodeVersion":"10.20.0","_npmVersion":"lerna/3.20.2/node@v10.20.0+x64 (linux)","dist":{"integrity":"sha512-WqvAK+/BoHtU3SenN17F9JpmUPTK1YzoW8dxg9zQNn4xP1Lv4blH3CjBqS4lY2EqoLQb6GVulDsMhJ1qLLC5YA==","shasum":"fa300aac43349a0ef1ff6e16527cfa9b19efbddf","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.15.0-canary.25099f79.0.tgz","fileCount":16,"unpackedSize":45763,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJejkJtCRA9TVsSAnZWagAAjioQAKCZ2DSQZ2rrgd4zuGRl\nk5QxkSOcxvM2cSVvwzwNx3qeLTSGYKPuNC65sl9F/WFaT5LqXRXbdpwylBnQ\nRc2VSRe3ZahBCUovpZboC8BQo/XPQtffkoEY+hXIPA1nsqJWI137POQ6KWDA\nxrPE456fihxhlT58PXxCyzdD6Q1IcC72KLsuDWX91V91P5L13UaU7bMd7f8b\n9yXB5XQHPv5Dv30YK1fo7KLqvbBAaRZ8TKiR9Zv5Ma/HQkDNtBH81YTxmRtE\nQvaD88wAWAsA4fZ9S43oHBmGM2eGu8RlfpohctLimsIhrLvETK+T4LEIZoKs\noXXgxcglbR/Yfe0w1lgb8PicpAxFbg2Ql9LTcmX5iB6QXe60h9EAXebbCamw\n5JRKtOsQK0Brr72EUfMMNXShNvOEHKJSvPtRBgSOhvYcAeYpjTzcsdH4lz6k\nxhIMgbba3xE0NGlhN1OUX8kB6T4sBAHl9fPca0foa4kaliFeat0ZSBX7BvZL\n73MAbr4sK90UqB2XbXH8bq1LYIb7JsXFGcvGEsWneGoYJYlwHfYp82vXSpQP\n32yYfi34Mj1dvLQgFOb3FJvhE8emzou5kEtTvzfUjs3JsPH2SOCQFQggSySq\nvr5jdgxGJ2+wY8FRlP9RXSEv0r8hR0w7GSVw/iF8SfhbW71yZGUwt4opxESL\nRjPV\r\n=5+th\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDAPrcZo2SnlAsnLcscpfZoeMsCC9yT7Ck2FIMEJpy7xQIgIAZEhTK37BehJzmDLtHmKm26CE08Rb+ZbqrbIwMP0LI="}]},"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-formfield_0.15.0-canary.25099f79.0_1586381421301_0.9595489066340455"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.447e31c6.0":{"name":"@material/mwc-formfield","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-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/form-field":"=6.0.0-canary.9930d9cc5.0","@material/mwc-base":"0.15.0-canary.447e31c6.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"948dcd3d057312750fa0c58715c74d5ae576abb4","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/948dcd3d057312750fa0c58715c74d5ae576abb4/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/948dcd3d057312750fa0c58715c74d5ae576abb4/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/948dcd3d057312750fa0c58715c74d5ae576abb4/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label.\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n*None*\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.15.0-canary.447e31c6.0","_nodeVersion":"10.20.0","_npmVersion":"lerna/3.20.2/node@v10.20.0+x64 (linux)","dist":{"integrity":"sha512-GxYPrH/FZEjJ2Nz6n6/xNpGC+ilZsQdPNqdSd/bUSXg+d6evNTvrhlfKUWNQVbGDwvg3SH8kWFiBm/aMN3TpMw==","shasum":"974d130f967150d70a3e8064dc716a5a87acc9db","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.15.0-canary.447e31c6.0.tgz","fileCount":16,"unpackedSize":45763,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJejndTCRA9TVsSAnZWagAAVaQQAKQG6RHkZQVqGRk/oAj9\nWLffD1sAdcylky0yyPUJskNKiR+HVUv6TR/66jkP5+3Qel2X/vUS6A9sivM3\naEdCIOwxz6VXChUayWP4+Ifh57mKqNzFuio6dzTVr4Ge9RJ9CW4/tCiUL9fA\n9ADFTxPpF/459GPSjW2kNFzN4HQ6z+8mWKmP9Y6YYjJVEH3kdpqMLhNvyaPI\nc5kUZbOvb9u3KOrr1/wyVJoYJiLZGpyAAUKo7BgrqIByqzbmBB2Liu4RpPV/\nUyJTQEkX02+xZY0RrhqvKE7URqi3Ewpc45rv/qg7Mvrl7UOAWqHzXej2MV5f\nYETfrI9oYpz1o70iQxRUxgWeh5FEJmlXsWW8MMhEDNp7Ftd3ttEvyd4eNw2w\n262cAdgoamhF39cS7BsXuVkyvUI0WBdIskGGRAkaTWJ5Jl85NaGL4Rrel90N\naUaJJpPl+uH1RBIr31qoWDl98nQbkMcn9eezakMPi0z2K6mqV6tDfS2R0/Rc\nGiPXWSzptr9V2fcFPJrSDAjFEnTD2EPqoZROXGF8GJyAQQX3hz9w71DDmmdC\nvPJri2bR9+IxuPUarw15LAlA4SA0Co1wBfb65u8Xfhp1gis347r/H4o2LB2T\nIAyv5SxcjK0eGazA2vqRplPq1OwROttnn4IiTbvxt9q/afjJi/UV9zQhqeEA\nL17s\r\n=KxxU\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGrUwJjh5/g/4y1BgrpUvMugna8ThQnlFWWg6/jlfd2HAiEA4K0ypOeK5402bSBdDCg1+n/Kc4b+Q0gqTohvV/s1BR8="}]},"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-formfield_0.15.0-canary.447e31c6.0_1586394962765_0.7833520488935337"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.d6dd84f7.0":{"name":"@material/mwc-formfield","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-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/form-field":"=6.0.0-canary.05f5e1583.0","@material/mwc-base":"0.15.0-canary.d6dd84f7.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"74f8e8617851a447758cb395b1e8bd3bf4c8c323","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/74f8e8617851a447758cb395b1e8bd3bf4c8c323/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/74f8e8617851a447758cb395b1e8bd3bf4c8c323/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/74f8e8617851a447758cb395b1e8bd3bf4c8c323/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label.\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n*None*\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.15.0-canary.d6dd84f7.0","_nodeVersion":"10.20.0","_npmVersion":"lerna/3.20.2/node@v10.20.0+x64 (linux)","dist":{"integrity":"sha512-FKTcH5cg641EBk+zmfIdG7rqFR+FerD07ZQcgbzi2kT6YNtOpGnRvrw4PDVQTzcARaEBYwDS2Ed3mjZCQHxydA==","shasum":"0d1bff27e407dbd8def2b35dd9b578d4a16e7aec","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.15.0-canary.d6dd84f7.0.tgz","fileCount":16,"unpackedSize":45763,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJejnlaCRA9TVsSAnZWagAA2f8P/3BB6Er40GUElFtkksKo\ns49wCjHCOL4icaWtjKfiVbgPi6KtpgtEd6Ub89IcOnRpCcxdLDGrUYBdgPcq\n6jYzIfBzFjbkgAdn7bJPOX1prErj4JOBHX58Gf7iMw4P54m3I3UwMnt85bZC\nsCOQ1gX1dCfKd+zqoR9C74HYQj7ztYMkX2apguHwnCok4HAeKeIXVmcZIZlZ\niR7c5wWsR/X9bgXF2Fm4CzMb9HhNOq1sKaVmdKwkok1piz80xCOoxunQeGM3\nvtYSHBzRvS4LrtLFhCYO968jOHcARKGGAZirDwuzyMz18HBbxlq2NLc5sldV\nLkqohMVL2wWS7bDIYeJnWKMbAVQpITQGH/Gly2phknKutG8BvFCvsVIn9u7u\n6ZLjOcF0WwDHebL1e0MjcfJ5aaXZBiHYbKLYvy5aK8u7IXLbJtMsFDgZsWfZ\nydVZEOGxTl4vyFlufanLzdmK6QcwRTOBc6lSEQhcKcVZ4siolrw3oPGNnxf8\nNdeFH90MBNTWsr4evoxIXGkXNBZ205Fi4Fuq2SbePBmS2s+PAYDy7Kuhkoc4\nZ3dzgbyRawAbz3J+MCC0713lrIBiCsyXIARSa0Gcdgn40SJc+5zGXVuTf3Cf\nFCC5/rRvCZpAtnyCgiiCwh2AtrzvcLhjEIXqma4vbM4mFuSEc+i9U7/NbemO\nzJyx\r\n=cIZM\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFNMTFfxamCo/A4B12gjlapcB6J1/hcxk+0NOErVIXl6AiEAy8PRzL5vqQxkUyz4gGKxu8rRlPCpQOdYeJohdape6HU="}]},"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-formfield_0.15.0-canary.d6dd84f7.0_1586395482439_0.9728394606483777"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.9b03ee68.0":{"name":"@material/mwc-formfield","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-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/form-field":"=6.0.0-canary.05f5e1583.0","@material/mwc-base":"0.15.0-canary.9b03ee68.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"ab8e352b8af06379b151d5a80b316fcdfd6e2024","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ab8e352b8af06379b151d5a80b316fcdfd6e2024/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ab8e352b8af06379b151d5a80b316fcdfd6e2024/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ab8e352b8af06379b151d5a80b316fcdfd6e2024/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label.\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n*None*\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.15.0-canary.9b03ee68.0","_nodeVersion":"10.20.0","_npmVersion":"lerna/3.20.2/node@v10.20.0+x64 (linux)","dist":{"integrity":"sha512-qjRmSUq14ftJVFpccyHIwP0EgHkOyMpLgMqoDNaRrhORTrJptKeKMgR+eXWLyGV+LezgYLYWxzIqmrjVbTLaLg==","shasum":"1f4de6888fa858576c0206b57f39caf8a4ef3f8c","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.15.0-canary.9b03ee68.0.tgz","fileCount":16,"unpackedSize":45763,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJej39WCRA9TVsSAnZWagAAlCAP/0e92x23JA4vRiOrgI+6\nMJP/gXHR7mmu77ihTOz3sZfddotbOyL4bIysTiZ59y29Y8j0KEscmyQTTL8x\n0UzhX2O9A7Khhta5J/sXKWAiIb3Yf3ioF4xRU3e5Ny5doOU8XHoxJI6VElGD\nywBWjrKy4jwq0Q/CGkm6Q7ioRtJoLgbZOeslGKTyHq1mOASFtNDUKZEPtD0w\nRJATcqnhMMJD9SEao2n8ZjYHmK7nY3GHIe2xtjQITP4KidP/AcUTYcp27iKL\nBF5G6nCrjX6yzPVvkxUFMG5g9SjpUziCGytUFN6Nq5shIycWyv/OvTi3wskr\nRYzs3eB6pglZJZ+UwaQ+3aACxD8hiyxE8nkuGwSWjhCyjNZHOH7mpQON/O3M\nr0Ey+BNuyIIXmBhTReT11dRj6y2JiK+V2LnXuQfBdPKgClX3sbqPltrP64bE\neDWTXA6fnw8SHdt4a+6nNSevgUWXlr36H3flvO00r0ooCubB78209pMwjFIM\nkjEygu342fFoqFvtY7QmbPrsk2aAsmB0EcrwJxBmBmB4KCSZpD5pOxzjVZFk\nYvRHFIY0+/2dv1a2dNdslk/o69hmfI3voYsaRJYv9xfBllZy5tTFQZINbC3Q\nHJaHqasALcfk8ay/ZAypdjobGDsrfvAnkEcxGb616TMfi31Pn0/v4zJWW7Dg\nNQ/r\r\n=l2hR\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCBbzzJN1Hy3/6QgeuI4FJEcxkmr9udYw3dXy8ZsVfYwAIgU3vF87KvQAJ13iF6HCaHmaA4sUk3l+KN5k3ANK3F4+M="}]},"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-formfield_0.15.0-canary.9b03ee68.0_1586462549803_0.646602320658781"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.bbc25b10.0":{"name":"@material/mwc-formfield","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-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/form-field":"=6.0.0-canary.05f5e1583.0","@material/mwc-base":"0.15.0-canary.bbc25b10.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"a56f18fee2a99903e5867ab91175e4802a21cad0","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a56f18fee2a99903e5867ab91175e4802a21cad0/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a56f18fee2a99903e5867ab91175e4802a21cad0/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a56f18fee2a99903e5867ab91175e4802a21cad0/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label.\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n*None*\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.15.0-canary.bbc25b10.0","_nodeVersion":"10.20.0","_npmVersion":"lerna/3.20.2/node@v10.20.0+x64 (linux)","dist":{"integrity":"sha512-lnktnerzp23/ACEaCBUhLuH0JHJzMq6EaKNWh29eTPoyXVr1POEe9EmChL0k4TchlqdKNfvEHxVriSb395lAeQ==","shasum":"bf9ef0f6f09a903964a7b1fe99cefb99ca161a57","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.15.0-canary.bbc25b10.0.tgz","fileCount":16,"unpackedSize":45763,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJekPbyCRA9TVsSAnZWagAAhM4P/0sxCy0L5mKZF2472uKx\nK4R+fUWAvLJM7gfmnHO72RQUnPQ3GiaCxdeSsQXx2/mEBoAkO7p7wS2XW8lt\nKinVBq15Ik1jVXA84EG5o8Fxq3uon8c2oMWUKjbAOzlKYdDOs9EWo3FC4eUK\nofT83ZMds6wAKaKo6HpfyAmwFMW6ugi1D3r8N9k0L6eS/CYWYjioRhmxJ3GD\n6MPvKIzSWIqyDYuGIoCLmyx9MppXjSzgC8Qh5KXi7jgojN4qrrMmZTgOK2cB\nWJW/blw+dWbZkLrE4+r4dVWSwPyP2g9TgS/b9N8LkA7t35OvLh+5CJhyVqwc\n5fAhQ4PzNAU/aoS3AY67FxnfcFYvUIizh7h7D8PXxIiEzMIa03tR45T7TQtV\ndsyU6bjajBgvc9vuGhozcgyIQAsuHHnTfc/QWsDW4nuj41n+SWmOtGjl1cQ1\n7CSwGd0vRX9YwHYcRGcK/yiJ7s6eTm1AdIrhyX2yq+YEklozD3hXsZqQRlhI\nVVqOyngyAiKzZHacluF8Jij2DVSuhVeGWq0pu7zVWXezfg5Y++FSbiXkx3Aw\n7ryTv+dGvugXTYqR6FEsP0xxXCshD3B4y3mjqBQv7KWn3pbDj/Eax5b5yofL\nI9bXhrIGIuf5vVrUXUxcEhdqqJyqIL9iCp52KpnizNrJO1KTSJzPx3D4sEBN\n97xQ\r\n=IoGo\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQChTdsle6ZbbVhysgegmfRxPGDKQDSbO1YHfmTh23DZvwIgPmKmj+efiKHmWPJpIBoPp9KzwgC3rrzR3qktqw7Xq+k="}]},"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-formfield_0.15.0-canary.bbc25b10.0_1586558705943_0.004626455020012132"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.339cbfd4.0":{"name":"@material/mwc-formfield","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-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/form-field":"=6.0.0-canary.f172b0f90.0","@material/mwc-base":"0.15.0-canary.339cbfd4.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"bb2a2c6f2ad1cc09cfc8d0cb5796203324564f76","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/bb2a2c6f2ad1cc09cfc8d0cb5796203324564f76/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/bb2a2c6f2ad1cc09cfc8d0cb5796203324564f76/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/bb2a2c6f2ad1cc09cfc8d0cb5796203324564f76/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label.\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n*None*\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.15.0-canary.339cbfd4.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-NqTv/UA0HzRl/F0tgMb7OzJZaQQ/WXBagtJjHEPjW/5xx7Pig8rAaq1wYXHtKTCbVKT4aB+rNOZyBchpRlRQpQ==","shasum":"31994399a9eb79671c2d0e27fbf7b9945b838979","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.15.0-canary.339cbfd4.0.tgz","fileCount":16,"unpackedSize":45763,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJel0aLCRA9TVsSAnZWagAA5hsP/jNI1Rsq/n4o163wcItH\n1dZiMmG7tce2hGvmFSYxXXbFACAwOkb4b6b/KqUSgOR09Ty3p37Cl812+yi0\nzJF3RotFO4AdpdOfU4+Kobo3/le5NE6i9fBnqrJJzTqZ4oahiZMhT01/kNFM\nx3rUmm6STYcz6r4d1bc+y8dMJNPQCF6TPCovc3RfaCKdxC2g5Z4Kmn+io5ue\nv+MEd6HgSTKKEq1tmoMOhj7TkqvOwLA9l7vjS8I3iCzRyRw76ZZFlfJ4PUVj\nOy0HLhQOjBSRmPG2FxuUnSqQhlyMQB0+D8zjXGr7WN1Oed5tV0uRrzEZ3UEJ\nRATfS/VE3iXDV04PjkiBn1aJqH9Ztj8ZarhdjIKOhr5iguHBb0OJRxVIAGZd\nLNxEN90VjqLLPwqIYQroTuWIpV8eIXrMYw7l92WbS2M7T2wFaaS5l6XDSd0k\nL3JhNjB92g1oapZ9De1kaxTyn3ym+Qfq8MjRaWPAPKWbnKAQ8uNFbQo6tbCW\n8Mmyl54IjdJGOcDCGS9+M+E6iz7MdCoZUgtKQNi76jjE9BYPBC+LmB9fHWal\nhf2iUZ5D96YZLGkRsTKfMUrAokd1KyX86QxbIuxU2s5Nlo1VfWuns03MqMpF\nACu2svtS9UxQQpSrAGnFmR48d2dHmQfjJT51hnLEQ4fTzopQFPv8W7tk3Ewx\nm0SQ\r\n=NVNa\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDfqAonyB0iNum+40KtLRBuLNvQ/p2gaymHu0t+TmnlwgIhAITZzK/cGarp8nAXChrssu1a3cAMfyUx2SnfMRMvKpCg"}]},"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-formfield_0.15.0-canary.339cbfd4.0_1586972299011_0.8010861155249933"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.b74ff19f.0":{"name":"@material/mwc-formfield","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-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/form-field":"=6.0.0-canary.c02642273.0","@material/mwc-base":"0.15.0-canary.b74ff19f.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"4a8d0d2eb87a0979a2039ae68ccef8af0c8b7b48","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4a8d0d2eb87a0979a2039ae68ccef8af0c8b7b48/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4a8d0d2eb87a0979a2039ae68ccef8af0c8b7b48/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4a8d0d2eb87a0979a2039ae68ccef8af0c8b7b48/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label.\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n*None*\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.15.0-canary.b74ff19f.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-/9OjJ6lhx8VJIsuTpzeqNPFeSFG6eoBrCsrquVKD2e17KvZApP9mhQBF/DytH18iZCf0npWHalAp3eV/0cw+6Q==","shasum":"82012bf9101f93d92d490129861b3eeadb77824b","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.15.0-canary.b74ff19f.0.tgz","fileCount":16,"unpackedSize":45763,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJel2ikCRA9TVsSAnZWagAAwMMP/0N7z5EoZ4OZ2G38fucC\nx6tmuL3dunkCM6R0Ef78rmjidV/msCCcwFwQLP/C1tIxzn4bANbmfOSdV4Ij\nWdThWIZkEM4+0r29Wj1n8T9ukUavPqT3QVw+iBePIFkiDmU1A+2KCyjEUAos\nApd+B7AvgidAWUPumufRu7M4uO3rAdGJ/Katu96SCxsmc9vq5VvfHubuAC5t\n9e/ZZPpxmmNOytrhbXExRKsPu3jizzQGB+uPE+K4/k9tNwkAowBUZBElHO8t\n0C2daCKKUp3rzN8pQT98VwB3JLQmYGtcwmInLRTr+2GtBAKkw1pGt44sAPU4\nY2M1DMV7UQdy3wvduE5i11gos4pqxPBZHbMjHTO58xdHHyezg1psvvV3liSE\ncUhEIvn4pT3aZAKRwyUY+StSRjUV3i4XVncboJ8Ti+/OzbWQ/HnIkDfOfvip\nGCve62dimJIhV0bDqNxnTwCnv7Dew7NM9jstr8Hx1kyRAv7MvdjH6IhKmmdh\n//A++VkXXR+aH3kNpjiyFmG+EdcVSrsjquzsByva3a44zfuSsKFqPfTFz4pZ\nrrNE/SaL9PfLWVhYTBw5cyUyBaCXehq4/d2oIhomHSprKiWwxzwqOtx0+GTL\nRpf/LVWyA+o1jSo+zFU3JWCaSTYPDr6bsYKDQSu3zVXhmclJxfSdqXAv7yBv\nnFXC\r\n=pW1z\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEKnLB31wzsrn/pf5yxRrU7ywEJzTSIB0gJxpIPjZmnWAiEAn176Z2p3DRZcwVThC31O/2NcoYiRX/vbiF5oGArDeZg="}]},"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-formfield_0.15.0-canary.b74ff19f.0_1586981027532_0.3868687005178615"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.aaa16853.0":{"name":"@material/mwc-formfield","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-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/form-field":"=6.0.0-canary.c02642273.0","@material/mwc-base":"0.15.0-canary.aaa16853.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"7546404b77983a36ca5e25efc1078681498f260b","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7546404b77983a36ca5e25efc1078681498f260b/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7546404b77983a36ca5e25efc1078681498f260b/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7546404b77983a36ca5e25efc1078681498f260b/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label.\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n*None*\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.15.0-canary.aaa16853.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-yKU3ymauyI6zh441bjzqMW6NVjbPUkcd+fuMITQU9hteB2eVwos9PVE5aRws7kx5LWlUvcMii8LM0KYt0TTNww==","shasum":"15c7373d2bdf23185d4a57bc04c7f6960895a3a4","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.15.0-canary.aaa16853.0.tgz","fileCount":16,"unpackedSize":45763,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJel41pCRA9TVsSAnZWagAAvnsP+wbggX3So2o+z2TsrwgT\nPGYETpD29alQ6yYkV4uCYUO7Jc9JU6vd0DoH3h7BgIjIauWVmTVZ4+HyFVAR\n0hbyM9PRxsOB8ALmG9jvIc5ugUqG5k7BTWrzl7+ayt55mgY5mUwW0lqCblV2\n82Dcj2OxVlY7NkOL8p+0NDE05daVwAIBvViUJb6QmfpGk9quhV/BkKgqqLvv\nRcfphSy+FIi3kJZbNJxUuhEJN1ahcjlxl3XvoPRum3WsmiZdb3IxVLn0nnDG\nKKTB9XwK18Dw/XXKXuueZPWAS0lSD3uuQkxJykVVlisRpk/mVEPjjvKkV3vc\nmICUJKXthD8oSTvNoV5KBYjoDJZSFuwljDU+A7JbjxjKAu4kKeD3XhC50fDg\ncgmTaLpSwHyV07FUJY62ygVF31n6I9nI/aRMlBovwd4hj99lU5C88D6vZ1s/\n48Eb+A4rlsKZcjjsMko+63n1kHfzQJ2Z1tcLZb3oFEl6mpQCWeqsvExELGwu\ncAmARAKaj7nsQYzrj+Kb6pU4/yPr3SO16364WmANTT8BH441p7vzxCXvyZ1M\nGQ4FTp77ek7I3XIlVKu1GUJU/e8bE7acsFMhAPalZrxvXcF8bpoYctslDDiH\ngipLfM/xACbeXubVPH6Fgy1W2NCz38p6SnWed8FipuDGmErJckUb+ZRgR4zF\nEGxP\r\n=MD0r\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCBPGxaSvC1ys0zBX4gylrrPYUYKFYTWBLxv4JefGEp1gIhAPYTsiYKPJGfQu7QZrp5LfWM6jhpAStUpPhQqH8ogJF4"}]},"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-formfield_0.15.0-canary.aaa16853.0_1586990441296_0.2653083461924879"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.826b23e7.0":{"name":"@material/mwc-formfield","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-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/form-field":"=6.0.0-canary.ce6cb7024.0","@material/mwc-base":"0.15.0-canary.826b23e7.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"00403df32c75dc9e2a64a38be1eb1df45ecc57ff","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/00403df32c75dc9e2a64a38be1eb1df45ecc57ff/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/00403df32c75dc9e2a64a38be1eb1df45ecc57ff/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/00403df32c75dc9e2a64a38be1eb1df45ecc57ff/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label.\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n*None*\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.15.0-canary.826b23e7.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-Q0ytt3gXp0WVAeWQby2sDjNin58Mw8Uxqar5bF8jgavOhIFrrqEdYeliOX2zgDAAuFLUXgskWEUXavsOiScZyA==","shasum":"35ec63065b63f203a44375a7f701cbb843c14214","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.15.0-canary.826b23e7.0.tgz","fileCount":16,"unpackedSize":45763,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJemKpkCRA9TVsSAnZWagAAf+gQAJ+FtYoXoPq8U6k1UXf6\nQwC0C9aqVABJYQh09Vg3zIhmRFNQgnpocQlmDj/sNZyYU71ldOmXwmdorNGc\nJh++0vRydO/rlYH3CTUWPp2+hj1IJHqERI617+m9to7UWat6aEF8uFeV6iqM\n2lAEgj69P94eERq3weuDtmbuEyhivkX3JEtV87JEJlj7Ye9I6kg5lFz4K2Dy\nGJ7Zb7PBnToa0boo0ERHtRPT14ht99rm9XC7yG3WWC25QFlxo82oI5dJvfDc\nfMrU7FTOS5SXxRVYUwFc1sHLaFjNBzY1IFnOSm7G6JoJf1MwO9g6ofzh8cON\n20bFF1+elRA6jcjzcxQKXAGIwxd9flrhAPsi/KiLrRkEW5JJBX2VQq17md00\nSxit35osgv0YuWnzmpvxK6520QTdRhMewJoXdHzpkRGUlXRal2ptM5lvNfcp\nUzZR1mBcRkKfJ/j+Rr1KbNGW3IgnCQrWiPUcM7nUks5MO/2trf4HUdAOlB2n\n86g6ll9NGOlUI+19NZzfz/TAgz06FdYhI891qworzWDzVI9lRt80weUBYln/\nc0YYkYZ3B8lHc7RD8pAjPxmX72XfYosPC6ODjgAPqg+izwl5j14d3dIhRNyJ\ngdDWrV1hlgYafcJ2R2OSH+jrSJZszh6LyrfQ2IyWGGTOQkcfQ5iZ6WRi6w4M\n05iq\r\n=L/oJ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGssC7N2ygw6giICJLfNl/mM1hHqFiAUlBTL3x4YErwvAiEAiz3gYrAnvYlqytdWO6Tooha9hVEutJ7Eb7mjpfKHrbU="}]},"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-formfield_0.15.0-canary.826b23e7.0_1587063395890_0.8680712710420824"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.e1ad2b2f.0":{"name":"@material/mwc-formfield","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-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/form-field":"=6.0.0-canary.ce6cb7024.0","@material/mwc-base":"0.15.0-canary.e1ad2b2f.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"148a509de33ca1ac17781a9e24bf8735ec5b2874","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/148a509de33ca1ac17781a9e24bf8735ec5b2874/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/148a509de33ca1ac17781a9e24bf8735ec5b2874/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/148a509de33ca1ac17781a9e24bf8735ec5b2874/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label.\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n*None*\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.15.0-canary.e1ad2b2f.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-WPgrxIKl7i6hYJYmJN7gFF68QP0/zdD+63onVFI7cwVbnlOBNNYXjP9kHgjvZOjJVljWBMBtMtveJQtDGB6LeQ==","shasum":"03c657b04f15e64676ff3631c027d00e73bc6d81","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.15.0-canary.e1ad2b2f.0.tgz","fileCount":16,"unpackedSize":45763,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJemjUtCRA9TVsSAnZWagAAvswP/i2xGUGQZvG5eJpJHnKn\nrEmbCli8dLc8X+EfJRn75a75NXGy7mckSdwkBsf1SE3jkN/GAcQr4Mkks0Be\n27h65Q/nuhsRpH+34pQabJ8rUM6Oj0gOcWQwcS4ldn8prNrLSCLqh+YRzgr8\n/o/KrAzzn35DIeRg0UnzkU752cl0SIAi+SN1E2vB32GRZ3uw71+qRBjodFOE\nFYF9rNDku55x+TmSAplG9EufkYMJqQ3LXoDwTLpqkbYQFhjxqk7Owxn/6knA\nVg5e92kFkgLycg6dsQJY+14as6Jslj5lLVovMNMhwDc3DdyoWEjsA5CFo0QG\neeSvTRV7tTslko2/VlvPXZStkBxQqpmAqgfnKFdH3Sry1LOES9vlGC9QpDg5\nYNt3MPxEbohtFvq12/eQ1giKaBgRO6xpD8+cGcmBMlffJnfoPAgjE+FV6iFR\n5N7w3OKSe+hd0QevgDTwwQjEmMUxNFcMoAAqeSV0Nez+rZH55nLLi9ryO76x\nVBQQ91S5GXrFNBkTpZt2kZzAA6IBP9T7WioLtxIebrUMWwmCmfbsxL9NZs4C\nWcne9oNMAxkCGNEEdGF5pkQjO2XLl8v8ToKCAaF2+kIqPFj5JnpVEpdMF1oN\n4eq7nV74ZSd4UjcrP4339k2YJs7BUEz8AaV7Pl1TmA5rVyXqnsH/EVVCXXfH\noYEe\r\n=6shA\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCGrWZeZkyg5gsrYylPkShhqFcQ48oF52autBgN4Da9hQIgEkvAq2mm5A+1lh6BqBgDodj8mlhj2lXETSFT4bIg/XY="}]},"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-formfield_0.15.0-canary.e1ad2b2f.0_1587164461210_0.07280012361837618"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.bade5580.0":{"name":"@material/mwc-formfield","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-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/form-field":"=6.0.0-canary.ce6cb7024.0","@material/mwc-base":"0.15.0-canary.bade5580.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"6e463a20777b8cff5146a68db7bffe3f5aa9674d","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6e463a20777b8cff5146a68db7bffe3f5aa9674d/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6e463a20777b8cff5146a68db7bffe3f5aa9674d/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6e463a20777b8cff5146a68db7bffe3f5aa9674d/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label.\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n*None*\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.15.0-canary.bade5580.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-OrlDv3bLoYTpGEjoqWdslOEcUkd/Aj3DolNYIdepHsl2aQPMizp6IIe90ntAhnH1ihQ9KVGdh++AjdPIEvz7aQ==","shasum":"223b2d80a67a59623091261b3109ff1e53094e58","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.15.0-canary.bade5580.0.tgz","fileCount":16,"unpackedSize":45763,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJemjldCRA9TVsSAnZWagAAAv0P/3s9xvAiI72Zp91G90pf\ncQ6/8pOcDrZFEsYG0NiNg+ElvXNqBl0PNU+J2zwf75y0/PcmyQllI8FSpLxL\nRWmT7u0V1bJoP/MxDDkoR9M6LCJMDLvmTpmb8bLSbisPzLlLwylc2c2xBCVu\nM2Lr3Ohn0Mii4uNck8+y0nXmDKzqeT0PZg33rUdcpB9k7YH92ZPKw8pkX+PT\nI6LlIUYCJ1d7r4blL41PcXRBy0JINxJRjo2b9kar1wsjQoQBhTjdMceYlDGX\nYhtixwBA3/lkj8uaj7E0A1mpUO3sgACaWeOi5xl4YhQjn6v7rf8r+p8Ocb95\nPaKzSHWVrGj2CluZ94jeIuBobgbVG8AXzbciqFyDcUXYJ2lpDzhxEb/boTx4\n+MJpIo290WtYolOW28RMsGqfT0Gj1Co1dqA109Q2UcdErzvqcjUMHQreRTmZ\nv/T99k22FVjz22eSj1+9cWE2DrjvswIubTgi32QojHfXmbZsWxVephEbYKEL\nl9aJqRBMoS3P99z9aDVjuxIXRE8MDjV8UMUMPeZpoYyN0gZ7MMm5hicSp8um\n5oq9jUuueUWfLWBwqwUkN02RFUdGGkQ513xQGKJ6OUvHXlCgV0AqR5CkPC6l\n30YCBkybHXUftvrkO0cwa3JfJSf169KaVjyoSaMaRw+oZ4gneduZh7yz2tng\nBbao\r\n=IqSI\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICIjqpD3lgPK2/OlIlkyYmkFdA86o0QIiaWt88twga6nAiEA9QjbSHQLm14pX6tNreyQOETqySU3CENdRdZZk2BzvIU="}]},"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-formfield_0.15.0-canary.bade5580.0_1587165533074_0.9650591212206425"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.dae38247.0":{"name":"@material/mwc-formfield","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-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/form-field":"=6.0.0-canary.ce6cb7024.0","@material/mwc-base":"0.15.0-canary.dae38247.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"b704c816f10599ee9a5d9b89a55d9c95d2e36f4e","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b704c816f10599ee9a5d9b89a55d9c95d2e36f4e/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b704c816f10599ee9a5d9b89a55d9c95d2e36f4e/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b704c816f10599ee9a5d9b89a55d9c95d2e36f4e/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b704c816f10599ee9a5d9b89a55d9c95d2e36f4e/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n*None*\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.15.0-canary.dae38247.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-BsB5+3tLbK2jhiRcQBVdZLG1xUmqVYSTW/7FBb9HpFIfUGI48UrFd11V1gHslgsTqiyiNspbGgIjjsmkA7u2OQ==","shasum":"bacd30af7c6fc315df98113dad1a8499ee026bc0","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.15.0-canary.dae38247.0.tgz","fileCount":16,"unpackedSize":47880,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJemka2CRA9TVsSAnZWagAAvDQP/ju+z55l9TI5FEOMJfdp\ntutLqa59KHDSBDq9VRyjj0A006QViEm7wbI18f/jJDpyihgKj5rgjKdW7bv7\nOL4pn9XleMWd932mAaK5eEE2826VvfjX5mut1KzIZ2fRMOTAmvZXx+IePcWG\nRwzbqGyCklLKUR/DT9rz659k7dPwcwssAh8TSRAk97j6FRR1rmQlXXjoxRnZ\nCTz1D2dzs1hNzCgzb9E7bkLg4h0f3EqM76fewzHT3wvzj7A2eXnMIay/lhLd\n/8pvVEXzJQtI0dlVDnQyD07zCAAmE2agzbU27zTft65pw5CC43FBoUufARBI\nU+b0ccsb8bkghNbPIUjtm088kSZM7gcMV15bFuICPOmtY0YaOjLUbK+1v4oR\n5Q0Lvr65+13Ksab02GxohQiBMt/hFBVlUWGWJReZfxWozoUO8Qiud7vMNUB8\nrTuDTbDqILHd22PMy41k5F60n8lbqHXB89CyuvhEJ8ERwpop3ou52pBCZ0Wn\n+mBV/8s6HGKubBh5B7GWA76hgJDKZ3X07RbFSvIHh8ozg/0yQHUt1eGXDg1k\nk2owJyG6LmAXF3r5YudN4YO+1eiX9xp2yEkXheh45OZzkCc8zKPHgKOqM4DP\nsyrrrTYVdecIq0eqYmoxlIIPI3F6FHqY0cbzpWI8mCIpOnvCLGg5494bMISu\njrHl\r\n=1OUf\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICvZ+QQqb1ICgBoL6HL2c1ZcCOlhkQYPWxaz2ug2kQJ1AiEA4xH+AwXrUdCbn3cQnUJfq8k/9Nw99hlcAmHLIiErcfA="}]},"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-formfield_0.15.0-canary.dae38247.0_1587168949597_0.8279673295063703"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.a04c0b82.0":{"name":"@material/mwc-formfield","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-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/form-field":"=6.0.0-canary.c4b4bba96.0","@material/mwc-base":"0.15.0-canary.a04c0b82.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"23904437ed2cd67305827b08d512e6dd06858b16","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/23904437ed2cd67305827b08d512e6dd06858b16/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/23904437ed2cd67305827b08d512e6dd06858b16/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/23904437ed2cd67305827b08d512e6dd06858b16/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/23904437ed2cd67305827b08d512e6dd06858b16/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n*None*\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.15.0-canary.a04c0b82.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-Z0TFIA06kne8XjMEhtWVGMjnDKiWddxmmOc3V4yfj5SuXuUKqFZD+A/ef/s/bYlaL8xY8WeXgPSqMpR+dahhpA==","shasum":"73fc247b5fd3eebaf90bf40d359e69aaaf073f28","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.15.0-canary.a04c0b82.0.tgz","fileCount":16,"unpackedSize":48144,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJemkr2CRA9TVsSAnZWagAANScP/R4nTd3KWuJl1fjRgra1\nNUtfnf9nleZdrOCGeHHQWHLBlfCUz+PnjTfAgISjLQLoTT2JnCD8vch88ghQ\nJB7qkYY+SzuCFj+oWsGemnIMBt5lxI3y/WGNc4JMzTMgLqMVxfZUF/Ny92zu\nBmsTuyzNQs2UQW3EQ7QhW6+pm+Y3gWdO4KP6tQw3afWFD+6xlDG+1r+UHjvF\nNWK0hnm79oVTYiM2x0vuklQx3B08IKy3j4AgEEKGUvZ1m2HrLfz0r7xnnc3a\nxqOmLQjpjkyqSNB4WoTjuu+uKHRp1A+RH9C+nsQkPLBneO32Tw2CLyHFiOjZ\nWE/CTTJeWUc4B881AJ/aVWO0E/glVNMYExbv53PXPWthpAMlRJW+qx94l1Y4\ndM9AbjjWZ80Kl+bvIDYBUtSfjPaAaH2Du+BSe/sjcHe6K25i+ZqP5EIcIMx1\njPi2hMV1hgwuA3F1qiIBdyy0UxYQRBT+w1LpyLoHKx+7/Zn6WUoSBuZJi7ji\nb7C1Dc74KWSf0xe+K5uXKQuBmi5+S4YJCkDKJZrplOM2yqBPbG8u3c9Yehfx\nXXVc5cvWktzmezI5A+yGBlRMx6mNeAiu/dWoj02Fk2WcmbRtXVHH/1Mmzo4u\nuCH4JJDtSq3JRmwvFCMSqGmA0yzHsGYC5JSdw5HXTPFH8sN6O52YPzueTUah\n+3Le\r\n=M4vN\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFIRs7e/gApnzgeUjyMqaERWmet80dpeTv6xjviQ5ivNAiEA4JST4tIaYa6U7VLNjlikhgO72kxcAq1Z+2BcI3SFfrU="}]},"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-formfield_0.15.0-canary.a04c0b82.0_1587170038505_0.2257413576319789"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.715decfe.0":{"name":"@material/mwc-formfield","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-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/form-field":"=6.0.0-canary.c4b4bba96.0","@material/mwc-base":"0.15.0-canary.715decfe.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"ddba034f53f308afea3b1390f775b49e8a473e91","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ddba034f53f308afea3b1390f775b49e8a473e91/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ddba034f53f308afea3b1390f775b49e8a473e91/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ddba034f53f308afea3b1390f775b49e8a473e91/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ddba034f53f308afea3b1390f775b49e8a473e91/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n*None*\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.15.0-canary.715decfe.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-wFrdd/rd0wTChdVp9WSmH6dTCMpQ6YpJTKYh0w8mMBnadJJTVZkQbUoMkh/HKqCCtmjQRv7OLjJ/Cq2dKQctbQ==","shasum":"e0ef468ac2057050b4c84c91d7307dc21086ade4","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.15.0-canary.715decfe.0.tgz","fileCount":16,"unpackedSize":48144,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJenetOCRA9TVsSAnZWagAABnwP/Ahwkz0SxAJq2e7falup\n61yQ9O7yIKl+7/jRIc/1Mj+9ut8KbmKQqY/PLD2xwMqjtM8oeLf1PGFAyQN0\nK6bE6zg5VrY0TNnXdnJe0oZgqCmSZJ6V7WjNuHwHVx1pQDWuNq1Se/e8380y\n0I+0aEoyV+ikZtZ89WIXIuHhVcNqvWfkHWaNL2VUXzl7bYONUM+P3pcEYBoH\nK27Z8+Au6z8NN0Hf6PSF4bgaPHsBRscMklptrMJVSPFejcmNp1k4m2uXVCap\nyBgUubLiWXs28z2A9Tg8LBJN2UhKnmJ5vjRxLknH8pXcMAm7EzZUv/5OVxH+\nDr3YcUyc2R6PzWkrfFJiZm2s7RfDN4sizMvsg898Yqv7MEhcYKvYyMFWh5tB\njmFeKdscmrvaHtc6c2PBH+0UvtUdieibDFrt3Tuj/qhKKO367Kchhh0L0Gq4\nRdHCWzvHEnxlrcApeQNuH/b8Ck2pSIsHvjLg0HQ1jHwoToeT9WaSF5FP4IhT\nVAAk/+eHJlk45rO2kadCJAyUa34i/Aqj93GSiJwDIwwN+LmYfZ4qm2GNRG7z\nipFDYXRG4kvkOUV9QMNnLzKkfB9aobNbGAiaBWs0tktC8WSL5vGdI5qNpOgC\nlKw+4GAaP5tZA+k5S62zVCufRDDg0Fsn8MswzRwMTmknMnapRZ9i9IvsCe3+\nijlW\r\n=qzci\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDaUq+oPSlPCMkVdV8y8EiPNq6yj/6rVTz17SSLrv6AJAiB0pqYmPdq5CDxrDTO3vfoUIrK+oYUkDKB0c9JljuzIrg=="}]},"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-formfield_0.15.0-canary.715decfe.0_1587407693812_0.3806113548270711"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.c862cd04.0":{"name":"@material/mwc-formfield","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-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/form-field":"=6.0.0-canary.c4b4bba96.0","@material/mwc-base":"0.15.0-canary.c862cd04.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"59b73d92f5709c37a2da654102a61dfabe148db1","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/59b73d92f5709c37a2da654102a61dfabe148db1/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/59b73d92f5709c37a2da654102a61dfabe148db1/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/59b73d92f5709c37a2da654102a61dfabe148db1/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/59b73d92f5709c37a2da654102a61dfabe148db1/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n*None*\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.15.0-canary.c862cd04.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-i+nYcj1qG6biL+/E0CjYrKkvRHNg/Lubx+uoaURcavcy5nuGRCoQy5msnHq5MDFb2coPkLZJGSG2ejA6r5EEWw==","shasum":"68418870d904bd168cbb91fbcdaff36917f1cee2","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.15.0-canary.c862cd04.0.tgz","fileCount":16,"unpackedSize":48144,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJenhU3CRA9TVsSAnZWagAAcwsP/3rhaJdRrreTBIlIUPL9\nh0aABNC7yoWeilELxwPIi/yh1Jz3UY+WRF2dSLFk1YwQ2xqyh/EYCPpItncR\nLoXv8xEPo7P++87VUXzVQwjDMGHZ4TpmYWn+PvHoxh2x7cr4CnU03HXssXYA\nz0lx3wn7MjmTmmNl7ebmsDcefwB1bxtFEaG0dCSbsbtaTqqhyilcYQVamYTT\nysEoy12rRC+xtWmen2cY9ndcQ0NY7e0PSZSRc6O0Uy81mdowWC/VVlBegGjV\nDreO7yhJELtQ9X+We8HBd9NrZhtX1gAMWzZxtQoXDxM1peuB91Ypavrly7uF\nZ3LhIkeq2vHFnvLmiiSoHwbgDEr1gYyKKduM2fdA+uQdM4LkMzII+3Ee7AM1\nOo1iOoaGe8EoZZqhaslXhW8lZNYrCJHM71RwVZnhDkOoQ0ZVTunVZot4EIp8\n/HvkYdsPVUdcpymu9pl/GrrvgMfUtKWQygR6lDjQ0lwFZ0/G+03OmYGwuj1q\n+K7eOjNRxmMCEE5qnlBc/XOIjtSZl7+jgmjTsCVU8MFzPMXAzMPHD/BfCHjq\nvdjrYSUGCzTGBl4RNpWQGbhePDmJBphRYu7YPQ0kqRaqcZ67XByikqxWpYoa\nqYC0NRI1SAgZbYTTDFADwVT/ou5Vz2g1LL5KfXVXJTqmEuu/xmpJqeAhYJqQ\n4QI3\r\n=pwi0\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCwfV9VpoFoCAu3C9oVCSBYe/rMB2xKQz9NX0qVlfEjLQIgEwS+cqabZrJ1tNL8D0a58aYXkqMjoe1hspO5Adnjyr4="}]},"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-formfield_0.15.0-canary.c862cd04.0_1587418423148_0.17132965396972977"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.e9b01b35.0":{"name":"@material/mwc-formfield","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-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/form-field":"=6.0.0-canary.c4b4bba96.0","@material/mwc-base":"0.15.0-canary.e9b01b35.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"873703765efd3bce3e325a39e56707cb2a7c47d8","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/873703765efd3bce3e325a39e56707cb2a7c47d8/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/873703765efd3bce3e325a39e56707cb2a7c47d8/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/873703765efd3bce3e325a39e56707cb2a7c47d8/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/873703765efd3bce3e325a39e56707cb2a7c47d8/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n*None*\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.15.0-canary.e9b01b35.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-tcp6in20hhtcrX6TYaShhq37b3opz64sh77A71ntFynpBxxed779dUXtedMlDWey4qtQ+jEZBQ2foBZl9bezEg==","shasum":"503c8358612459b17740b7c475bb353c1f44c69f","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.15.0-canary.e9b01b35.0.tgz","fileCount":16,"unpackedSize":48144,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJenjBCCRA9TVsSAnZWagAAV8IP/0C/zPYrHn2NY6m+9NyT\nj+A576BXxFozq+bYL6eCK4VTYyHlGqZNpKy3Z4lXKmedqPeULp9kwcBx+mlQ\nDOojMYZi1ZCSMMN9deHig16MW5Wuk19gzBVp0TyAulYB38zpHJdIJBzXEDKZ\nXqJiW/XUwfc0g1rhPWyg3j2kWfT9ikVvA6L4ZHnDxzmYquTwb1ovhdgcCZuE\njBBgTefw0JsJg0dru/L+o0+Pat6rN4aZxdAl584jVr8kbWh6x817QDBLfLPA\n4GRZkLi/1+XS+O3ZsSJrfcbYxkj3Yz+Z6ax1rYRoEBDHJIFVG/DLzj58BKZm\nSwfENJMRXYNS74d58LorsRB3EfL9w4lYmlkxLnkIvkk94copDZE+mM+dOdHH\nTGJKQYHGnlPdMKE1ZMVHcNT1cmNdhnH8101WBUb/OmqA47+XRMJ3rL9eQrNL\nxnafgl/0GrrjuCnl81ej46cTFPh9+3kZV5de6sSNKesd7vpEWNpOfIjsL5Iz\nfAk1hFvSRXr+WMgTuxD4sGY4mNblRF/M7QA3RDXA2QA5oc0+BjRQP9Eg3brj\nldHgmYL4Aj6GEOpsMn6Tn3nVbZDoNHgm6fDV2xr0optL2Plx4yFWWXeehzCJ\nJOa+2OsxJl8rkp4ZmmP7rspnSR7nmlBY8LzHg6RlwahGxIAZzIQtvOaydhce\nC8GN\r\n=ippB\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDWOCUdfksXfVxWBYZTWjqMzAi2dT1AusNjPjg+CKG02AiEAqeIEv0ICZOgKOsL6VM9vKod8Q8P4xfSBbveyKkMxoZg="}]},"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-formfield_0.15.0-canary.e9b01b35.0_1587425345854_0.6875395504531576"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.ee7e8989.0":{"name":"@material/mwc-formfield","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-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/form-field":"=6.0.0-canary.7b4482402.0","@material/mwc-base":"0.15.0-canary.ee7e8989.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"3b58236c5ca9326b11d092c5b9977dbd601298a2","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3b58236c5ca9326b11d092c5b9977dbd601298a2/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3b58236c5ca9326b11d092c5b9977dbd601298a2/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3b58236c5ca9326b11d092c5b9977dbd601298a2/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3b58236c5ca9326b11d092c5b9977dbd601298a2/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n*None*\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.15.0-canary.ee7e8989.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-5NGQga4CENJJp9jgd0YgXqLE8u4yar61QqZK8M1DKStc98QQNIeCiJ9hylAPdaD6l7SHJqel7kYxQ7TmDiijZQ==","shasum":"e19224d5c78437532933ffa845d2895e4f5b0bed","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.15.0-canary.ee7e8989.0.tgz","fileCount":16,"unpackedSize":48144,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJenkNvCRA9TVsSAnZWagAAZeEP/AyQ4Ei7thknu5N2MZEn\nIRhp5FRcPSv9V+vd7mam6bzsvTQbjsXwYrfWThxJeBW3G+iIuU4dcQw858RV\n697zn8N5LqXSV+AvLE9z6RZHGod3IvbtT072MzlyNy/p8+1t1Vmuq9YY56PS\nuSc+5f07fGUf5Wu6p5a8nCNpi5xl2gyLWybkjUPSP33TpX6737FlIfykHzI1\npek25GrdOXpleY17E+gkr9kChEcBXgHMxI/NtcQIyHfUYVAxDL3vAUbaJTr3\nVPvzwDDADzOU6HGPC6caqycl4aavM+zIkOCK0wch+gb5d8GIXaHdKCPFtnWp\n6BcBORU6vrjvNfQg720hoLBU4JE6emMl9mbuUXMvxDsRD2bJD0SJZQI882/F\npzXbeL/V6u5OeFhlxldWT+HMwZflVluP7mF0Z/PxbmOqoMBR85vO3WVRUg4p\nnoHBBlNmTp2cc7t2YwpExkgeIl/5IuMf4o5tUe1lj2NzgCjTHf2ugAa6CZZk\nKpaq0ZlW+YzDODicdHt6T6SsKC/vUoXY/fVqORUnlK2TdQkio8xbCpKoZp1g\nrVp93wVPBpkMHgvl6pCxjbQ1MFtTrEcc3rXMrfV0Y3GJvTMdW6bRkPdDXoNR\nFIKuBxWU2R2yln/cV9jA1k39z+lK3E28gOXnurxegvIWBrSgYQyHAjTylF7C\noiBe\r\n=YcCU\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICgiCE/n3yYk72/qHrezatSiwfrIqM6BKvAsNqahn9QQAiBGaBCzV9V2Z4m5tPsc2yZ4d5gP4/Uvn1e2Q0hCF0IM4A=="}]},"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-formfield_0.15.0-canary.ee7e8989.0_1587430254368_0.7364133038655238"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.9bf47ffa.0":{"name":"@material/mwc-formfield","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-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/form-field":"=6.0.0-canary.deda86d8c.0","@material/mwc-base":"0.15.0-canary.9bf47ffa.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"282e30290957ddb18c6119523574ba36c65d7abc","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/282e30290957ddb18c6119523574ba36c65d7abc/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/282e30290957ddb18c6119523574ba36c65d7abc/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/282e30290957ddb18c6119523574ba36c65d7abc/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/282e30290957ddb18c6119523574ba36c65d7abc/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n*None*\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.15.0-canary.9bf47ffa.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-faZrSoqvwDczFjZRRZSMA9yqQemomdPzV5hjsYV6H+OB0mbRJsTRnYHrqX1CKG9c9uDE8LteQy7rB6F/JrAbzg==","shasum":"9d3671f97ecf40235fa87c1931524c18c86f8f49","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.15.0-canary.9bf47ffa.0.tgz","fileCount":16,"unpackedSize":48144,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJenz1pCRA9TVsSAnZWagAAIf8P/jJmTGGrwuKxu553XnO9\nkQq3QZt5yQj8rSBkpjuO9sOLFFwsDS6TjR6wTlQriz0Z2VGns3prjKWmaDQF\nns2Ig4MkDmBbF+aI+8JuvyuYKJj5+F6dONjGuf3Fa/x9G1BQDxAYkl6Jy4Ln\n8Ux+FeUm8K6qnRdUiI1dy+B/ewwMI07DPiEj5jzYeW0dq1SRfZw5r63IexSJ\nvMLyAa2QBdRMq/Q/5MuUiAa4UkPAT0E5/T2cudChAuUllloLjYwFaZvG9eZj\nYhEfipZDnL/YizpFyyCLFAThZ86iuIAainSNqsVqEw0djutK5Z5QGaboibLD\niAQIu90NxZxHOUO5KEmkEcDBi6SJsZj2QVj6NNhr5SO1wypHgefVbX9BjseB\nQd3pWDGYJPbqfvb73MprkpR5XsIjbftqvDxpdeGaLV+9BPsN0wS6+XsUy8Qx\nae5txxJ8YAwWMgS+8xy1Ufx0frF++pMdSptS6/lBkhWuVQnPY1GCDeCPR4+1\nNAcnJ3VZqhd48wCUZOwEjnrs3/QuxjMc+6M9M31dd0ed7i7OS58JLhW4tqZb\nsrcDE7lsCQGXKZ7dd6QKHm2ndj7Ia73NLrcXVdtSTi2P1OtWW+X77gLuuqZc\nHeOa8yBbX3eCaNGcXpLEJD8ggPkeZJzqSUKzlYpZG0eeFZYXqO4aO+xfgnL1\n/61A\r\n=p994\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCeY7K384ahNyOGmn/hbYFPxTNYnru2sW+f8/5130/T2AIgNSPka8LZkbhhqIqNApteXLbBjwebAsUHfDfLNo2/gEE="}]},"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-formfield_0.15.0-canary.9bf47ffa.0_1587494249256_0.8998666686120347"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.078dbd98.0":{"name":"@material/mwc-formfield","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-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/form-field":"=6.0.0-canary.c141801d5.0","@material/mwc-base":"0.15.0-canary.078dbd98.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"a45b9b95a7710162ffb06fe74053ff1d108d5684","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a45b9b95a7710162ffb06fe74053ff1d108d5684/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a45b9b95a7710162ffb06fe74053ff1d108d5684/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a45b9b95a7710162ffb06fe74053ff1d108d5684/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a45b9b95a7710162ffb06fe74053ff1d108d5684/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n*None*\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.15.0-canary.078dbd98.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-nLr9nowU5bbZTenkv42p28noqX6Um9RLAymrVLiVTpXYYfy4EOBpp6chQ740PJRDydx2e0qftG1lkScwq8rL5g==","shasum":"33e5a0a25a3cc649d56620cfda512ae7b623db24","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.15.0-canary.078dbd98.0.tgz","fileCount":16,"unpackedSize":48144,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJen2GVCRA9TVsSAnZWagAAPMIP/122pgTq8S3y0guGG38V\n3pT7rIffDBPsbEJDpvfa3UpWcDdGE0VNWcgsK6VlhDYmzvV7LTGpKmBocjsZ\n7PNbTRsI/GVrYp+SLpYZQ5KB4W7cSeV4NbYAiPqnm5ETSpImZc8NOktM7zRx\nCaY6IUTEMYwBGaIAsBhhndjAdMtiBI6jwWmDDvB7fWntXCDB8zFcbMdVPiQ2\nLp90SxHr+pPKgYRyVVgVlkZxU20qayZxIf155IVm+9Ob9IBujhsOVyMrpLUz\nMxPTH6KLHFxx9+cPzUkSCAs3uK2Y8NqwOT6jzcuNCe5XVbD6YKHJb+2nP9NF\n1bYGCePti3S24eVFIoHNOmKrY2lgtd+VMMF17KUAU1RPSBUOtfGFJbzfzHDs\nlX8UNNt2fnhDm9C3mcOerbIOd9NWjnRQEsEWtBDY5uMpeE6y2pTRH+gUzlHH\nTrF1KUOF5OWba5mBqUuDDQ+ke6c+eMidUDsQFKQq5pKFGzyTjsH5Y+YeSL4g\nFVjvfmNj3bBfDCLz26jTh8YzjBks760oA4qvSiWaPgLfMCcIY/Pz1xwZkw+8\neFQLctqn1VKMHK8tzIxvrD2Pe59lls0sRoFopfJO++wdkcr21jz3B478b8ie\n8zYt1CR0w3x6QXqmAdj49uI3lJvLsj6tVNSJTmLZ0vg0Sr+bMKqK13Vxtntc\ny9cK\r\n=DpQu\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHRLgdyH/Q5tfpTItsIiaPgy5mZ0tvT7kMUDazgRX8zsAiBcS7ESJ6z5koOZ7JcbrqcUWdXUt6pk0A5Goi/kqEZASw=="}]},"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-formfield_0.15.0-canary.078dbd98.0_1587503507811_0.25267561261406524"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.953015d6.0":{"name":"@material/mwc-formfield","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-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/form-field":"=6.0.0-canary.c141801d5.0","@material/mwc-base":"0.15.0-canary.953015d6.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"d875e6d658b1a3287b35d2c77aa8274d9828fb46","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d875e6d658b1a3287b35d2c77aa8274d9828fb46/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d875e6d658b1a3287b35d2c77aa8274d9828fb46/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d875e6d658b1a3287b35d2c77aa8274d9828fb46/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d875e6d658b1a3287b35d2c77aa8274d9828fb46/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n*None*\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.15.0-canary.953015d6.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-axlomo2hAtEXPiE5tQvD+fk/29u1JfFYVkY8Eq/ll0vdNGuNrB5saNyJZz54Bd5oBdNTTlwdjaEz6LyaQIGTEg==","shasum":"d9ede209689aed1431fa155845531c4be964a1a9","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.15.0-canary.953015d6.0.tgz","fileCount":16,"unpackedSize":48144,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJen2cSCRA9TVsSAnZWagAAfBYP/2zKByLBDhg1iJokLRvA\neGDGYbUKQfeXtnjZyzZy+YSCKtBNq1tJJSSHlpeTFIaKE/kRFSLIKhmz/A7+\nvB2DpOYduPu8VTyrHvGXgR0hW4PKWmM/5v9sGVa8fuGmjr2J6koy4/ddnX8F\nwxp9ao5MrhRDyjwOJWeJrdf+j3wnRlVkNhJ4dgf03oWQ2sCKKnrts78L3Qpo\nBfnh7Dd0WfGjiAtu6MK/ZLKnda6dJUhsJ28D1R3BxFD+HIQREUsilbXTwsO1\nXIAzxEiYWhAv8b1tcDjxtTsoExS3v5SJn9iuo2VGiXnCE9fPyBNppXLpx48r\nucQzoinp+/i9Y08rC2gITBI+DpPpB9FrL/cQ56v+3XVJV//wJbyu6VlSCH5Z\nleWIOCycvXlrC4DWOQmicPmHuB8V3B+L7bxuxvV1ou+mNvqlpnZWC9+SuEt8\noaQ5AWOYTQRVQDMp35IxfXHgDGKIk7OSI30EoStJi9+OBdgiWDQ6GtEeOULo\n1TjVy+mJO84q9QSZLHpH7GoUYYLzSTvTfNrSgIGF+1Q/O6u4u0naWO8oYZPR\nxCjoxqwaObGeCFFNj+Gu/NaEbHat59njOOtHwQtrBNxgIrk4Fa9YskTDzz+x\nO1tiK+2D6oLp1kTXzcZH95o1ZQ28p3H4fb+GQY5M2LcvnlhAUJttSAktFBWy\npy+W\r\n=qS/f\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDXHBlln9WfGWNtoIEmBLsadO+ksHp3M3min626UzYDqAiAo4qU9XVBBd7Z8jR+DmwgwMhWh5arRQbJDzctcZKzleg=="}]},"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-formfield_0.15.0-canary.953015d6.0_1587504913762_0.24252334663217323"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.c360ec63.0":{"name":"@material/mwc-formfield","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-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/form-field":"=6.0.0-canary.c141801d5.0","@material/mwc-base":"0.15.0-canary.c360ec63.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"5147ccee26bbbacc14a1d7d86adb845ed406bbac","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5147ccee26bbbacc14a1d7d86adb845ed406bbac/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5147ccee26bbbacc14a1d7d86adb845ed406bbac/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5147ccee26bbbacc14a1d7d86adb845ed406bbac/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5147ccee26bbbacc14a1d7d86adb845ed406bbac/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n*None*\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.15.0-canary.c360ec63.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-dyMSkUdx+NKHHyok+qElY3Ze6Kt4j13eprs/wcFnLYE2YX2adaOeztHnTvEBFt3ZuOY+1kATchVVV2QJdBXE1w==","shasum":"bb789e9b43ab73f8d3fb395837a9c2de6b5c24d2","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.15.0-canary.c360ec63.0.tgz","fileCount":16,"unpackedSize":48144,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJen2yHCRA9TVsSAnZWagAA23oP/iNOWyEzbw2uXXCTLfgM\nlYNbn8oTwktIqa751QQ+zEXRTHey/oZpM5lmx0wkbQMkK0oSYH0dMWbmUn/1\nBgO0CcnFS8yq3l5siphrD/Zp3jTEZtP/8sAfo9aP83SOLk5OuWMC132AjWdN\nzJrSJnSXrvnAYixso1/lNcbSjtDdjLfUtBIdAIj2KwlvF5j5ju8SMDI5ENGS\nGd6c9Eb7qquQYX3Yh16kZcZkO0UEZWK1s2nPYKUPqWowmeZHm/CCZMtn/nap\n1L9UlkZsv4Quf+I2rwTcHfgFTVzCzM2qMSo9lmcswKYMurIbuXPxXjjMiWWf\nvb8hSzbAT3SpSs/ruok73Z8WYHXTwtVS1U8XiGJJnlpWQk1q75g/XBUgHnYz\neFMlAoMzD87FwpzrydYIt4+waI8agJW3xmf9S2cP3qbYYUQs/+BZs9hwhphJ\n20CoviMfby61GAp5dBXuVbyLsWVWm/mGzwlik85GTiRmOF76USf33GYoOBQR\nKAyF3PhfS6eAezln+kaYfXFlKlJzl/wBdKhheCDV7xrv3IfPMLCOw7VXVljG\nOC73eZfDTUriwA8DI8qCrKz6dxaq68KYZ+BD+A0koH/wofQbSLbWYCI6L4C2\nFjPCstCwx1ytgJk2HOQ0EfZYfrXExJ36EyfzHC6lCXe0/kmnIwbFcw9oC88q\neZIs\r\n=+xeu\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAdLHBAoFjoyhbLxT2qZmD9r770Kg7uAZzeUM89MtORsAiEApkZf/FgohgXUpq1LjzDhUVCTJQFM7+9+GY6Oi+EG0IY="}]},"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-formfield_0.15.0-canary.c360ec63.0_1587506310976_0.5602077188728449"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.d71b65aa.0":{"name":"@material/mwc-formfield","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-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/form-field":"=6.0.0-canary.c141801d5.0","@material/mwc-base":"0.15.0-canary.d71b65aa.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"5f57992160b26bdf181837dfc0b0ccac0425b3a2","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5f57992160b26bdf181837dfc0b0ccac0425b3a2/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5f57992160b26bdf181837dfc0b0ccac0425b3a2/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5f57992160b26bdf181837dfc0b0ccac0425b3a2/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5f57992160b26bdf181837dfc0b0ccac0425b3a2/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n*None*\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.15.0-canary.d71b65aa.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-kj+gPJ7fVseacw68fqI18dnv7QmLe6ohvOL0H03hNKHlSqAHVKSeqEAb9rUO5PRomHWEyHWd3dGVqwFxbRjSoA==","shasum":"807f2a833f2fcc6224bb75e419a5175badae8740","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.15.0-canary.d71b65aa.0.tgz","fileCount":16,"unpackedSize":48144,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJen3WgCRA9TVsSAnZWagAAkgkP/RmJOmyUkPoqv3cA2P5G\nzEx1B38Et2g4qnBIJd/PIWXhAa9XVlxvOv7ZGq8j6xSl5Vx1Fj2jZLbNHbtD\nRr0EyGyaZtM4LDndiPfvp20j0rcW0m+2xBPAXWPlUSYP1m34o+G96XSd56Tm\nZaUmxS/QBbZB/bUC8eZk7B5Qijut2fPlIt+pI2RCGpRwSmpco+uHbOSCE4yG\nwZMf1nAfCfz/cvQiWB7ZF6wWqZiYrk5DA+4yWXq1z8zKkMDaOhngTbdPGnxc\n3YXKzHluAllKgMkBu0z/Y0osI48a9L4FkZNBhqr5oGhN1NyYZmGYCNy/vIzA\nvN+2hydORxG+nOQmXQ27Jj6p2TE42ksiqUAVQmw8i7CGrV3Z68mdSSRQHfbG\n56LsOn3/8wrY2x8i2/RD9TUpPoQZl07/ADilTTX0DyR3bv3OH2hsBqxfAn2g\n9BXbWyIgmUl0J1KkdMAILZETnGRkMCfQbAa81LB3ILMjN/l/rOJ8qGniMppe\nNMG0P5bPrseqadzGD7A4/cC5U83+Ll+aFyDqDiBfFYMmBlyoftxKdp4HMm+3\naGA5Es4OwrFuQrrfzaT1PvgL6irgnRsliK6Wtz8la4RC1GF5UtxJUeviwnVi\njMSDiWm/tNDrDewTr1leRjXpUFmJmUA6i7+mJP05q/hfmCrCmfHAkqy/jfVl\nD+8V\r\n=Fyl6\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD9LoBcaLFDBouOsNw5xZslLGemWa2PLFTaeZhfVU0X6wIgAqiAUKTDJVvexmwIceCU2S6XdSMPSYznHwlgnu3p8aA="}]},"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-formfield_0.15.0-canary.d71b65aa.0_1587508639864_0.000709346146184453"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.58d51135.0":{"name":"@material/mwc-formfield","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-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/form-field":"=6.0.0-canary.28d10a96e.0","@material/mwc-base":"0.15.0-canary.58d51135.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"1e70b1d32a2db9ff5da6f37c7b50790b6269e8b0","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1e70b1d32a2db9ff5da6f37c7b50790b6269e8b0/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1e70b1d32a2db9ff5da6f37c7b50790b6269e8b0/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1e70b1d32a2db9ff5da6f37c7b50790b6269e8b0/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1e70b1d32a2db9ff5da6f37c7b50790b6269e8b0/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n*None*\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.15.0-canary.58d51135.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-KmjUd53sVBvY0Onao06BUkeWxWpelJCJr2DDPo7SnOxDWB+gbLA7jCsgLfTcocotkOkmFJQh04ZsSa9prEvidg==","shasum":"3a78d0fe03b2786ef659e3c0e32e4666d2886fcb","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.15.0-canary.58d51135.0.tgz","fileCount":16,"unpackedSize":48144,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeoOTvCRA9TVsSAnZWagAAuaUP/iypSgO94yb4p4Knz9hm\nd60IZ2hJgkCEavD7Ax5dZKNRfYcm7CJp+ZNfH3w+dvWFdc244LWoAuwCezA3\no/mhfALknsocMQBoJZ8DLXRKH4un6ecJXz1jkd7TybZ7YyM+6SMSRXs12I1N\nQotoz1JFPPD/u+AGVor0QyOwYg7t2hqy/y95hAq2/2fIjzIHH9cNXNOdVTnt\nFJ/ijfkZOGPvl78woFyz/2DGMSP3mVtNpFlPVxeSqwsaUKrBgfgTAdeKqMCY\nAKSvV3/aXrc5yP86jowQH4bxt8m1EZ6CnkqDYoYWbRVwyZuDP2SSDFpqwfqy\n/JWYFpWkgczIkNtFBzaxlJ0mZcpgvYpqwZMLcteEfRCOUqsRxv6s6LfTlzWF\n0N2sFP7I+Fg/QWQSCBfbF2EZKez71QQctu//3uwLgkaOC+pV38IkqzGBo0fA\noF1mJdC/OkRZqkntqVgf2eDfYPmASDEKfKNXDlb3A/NK3j1MxPRYgA4rtoNA\nNpBStKO5COFQZJLXTHmA4tnniw1wcSzXsqSU3ienUI2otjDL/6K/4TUSgSJQ\n5fNSsnXi/LUP8aP57bdJxYFfDBGtLIb6VstcBBjllqau7KTudlnlwQUKeEVm\nniN2eD8Ykc/DQTXFjhgNLmcQtRpUkf/sEiR3l8uAWmnRl91EGq8tjrFZIY+I\nji/C\r\n=rVN6\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC52t8HJs3mGzClos64ErEBIxkzItGvqaqqCSMamNMkwwIhAPTZVvVTd32CjxexKH/PG6vWIdjnKlQkNKnFyQu3Rw66"}]},"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-formfield_0.15.0-canary.58d51135.0_1587602670767_0.10716031453299313"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.d0af8ba3.0":{"name":"@material/mwc-formfield","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-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/form-field":"=6.0.0-canary.28d10a96e.0","@material/mwc-base":"0.15.0-canary.d0af8ba3.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"86c71b26d7f2ffcaefe79c4882ac9867bef12b0e","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/86c71b26d7f2ffcaefe79c4882ac9867bef12b0e/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/86c71b26d7f2ffcaefe79c4882ac9867bef12b0e/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/86c71b26d7f2ffcaefe79c4882ac9867bef12b0e/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/86c71b26d7f2ffcaefe79c4882ac9867bef12b0e/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n*None*\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.15.0-canary.d0af8ba3.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-D5dvXXQL8s48eUn2I6WThkhzLeLyAVC/URSKAi0xUjSYAiD+x6opWRHYVQQzxjWZZKroeWWcFbf3HOjZU9zOtQ==","shasum":"1ce11f525d33d0239c01b4b59b700120f093e794","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.15.0-canary.d0af8ba3.0.tgz","fileCount":16,"unpackedSize":48144,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeodncCRA9TVsSAnZWagAA0zUP/10sludALkk6qcut3X/S\njae1ClhEh5pwVryUDcGyocJMfh4CyNqt99WvY8qUsNSlWytYXjo+H1hwfDpC\nEWSDEcZ3ZKiYisxHl9B1dQcmhiUQLdWTN/K7YUyW5YEdtmsnnwWMqYSbqQl+\nxUBhHxzT62npVdSU39HHYt5/3FXhsWD9eaLa0+w5lUDR2c7z0th7f6dNuDUE\nxiX+kWeh4FQVqRGgdNYciUOQjwyOeE6ZZh1THWZ+P0R52XhGIKbMZXNXuMUv\nSCv9S9FzFwLduHpLcyQ1Pciu8VM3bIAre4rvZ8v4fH10Fcy7pA+WuXAR0Jj7\n8gMEng8bVyjNMaN/TBSzF3IN0+PzLwltoisE/8WlsLaOlX7vx4xDA/UB2LAf\nMiSnuzflss3wTFjL7tzpvbhkg7tnsBPdB+rTsA/sMmPETmn86CuS80Qw+8cD\nM6VZtvMqm4zn1hb+nRDImJmsVlKYR+ht9AE3yDb6cFaYe8y+OEImuAL9OJTW\nL7NHofQ8/NF9KB7CZotikES/aNS+OWWmjmdATewiYw15jpL9yvVeTftCc4Vg\nzYy0LO9t84x4NQTjR7EqtdFwKU2M4bGnNnzgxrO4MJhSAZGj0z60t2A8yw2A\nGeVrg/F18EQOzMaCjrQXyC6z9dHnopEpNa9p6C91SXfypjYMXbEzu4hpY4m3\n13zA\r\n=keio\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDtwcsdGQSIw+k5TEAAI22kjSVHwxmc1aeBFrQnaeBvxgIgfe9rLXFkAB70+crjYoHbbCRcfwCMELLzDXwWtOMsutk="}]},"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-formfield_0.15.0-canary.d0af8ba3.0_1587665372420_0.23232801774842216"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.8872b17b.0":{"name":"@material/mwc-formfield","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-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/form-field":"=7.0.0-canary.8540808be.0","@material/mwc-base":"0.15.0-canary.8872b17b.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"d1f49732d08170a0330f9fb28f2b2ca978daf858","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d1f49732d08170a0330f9fb28f2b2ca978daf858/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d1f49732d08170a0330f9fb28f2b2ca978daf858/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d1f49732d08170a0330f9fb28f2b2ca978daf858/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d1f49732d08170a0330f9fb28f2b2ca978daf858/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n*None*\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.15.0-canary.8872b17b.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-bKMYpohExzVn14OuAbsSgMt4yxqzhkbdFmcs0nfua0gn8Wx+Yod3NFs4jZseR8kJuqVqp4Tu0RWx72vKV5cEtg==","shasum":"6d05aaaf9dd0d64856ac2362d976ecc846498ddf","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.15.0-canary.8872b17b.0.tgz","fileCount":16,"unpackedSize":48144,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeof1ICRA9TVsSAnZWagAAKoYQAKUot9JpqcfDctt0F8Hm\nUpH4qvEc+4HMlr68BNehdIHMibl6ux7hNpt9SYrrBL8tdHIeWDxJhx9QA9ce\n9xorA5p+zC5BLaQ38htyL6k/IxbkX2cpgd9fLxecK8LQxuMmPyu00FfyrciC\nNo5abim6O+HOcFxZCjXJveiB/ubcfXv71Gwat+ivtHchfQaxpHIBAGApX7CS\nvuYbBlogYD8jMYuqISOJAUnW68jEH/tqdUKhyQNuICsVf+9zIIqX49jdAKJr\n3KPlr80s91PlLVKhvr4+XvWy0iD/IpF+9Y55extD/M+4lan1BycVAbLONQpT\nIquwgI5wjjG4x9NRSuF9bSqIrPCj/DWG6pSVSWaASKXgPXueyv6N8xM0yIuD\nWshf180VnK+Zj7XIprsu6J8Zc1tJqjQNuwa1ku/i1aiqQMZ8bvCQOt19Psut\nPQgICxkXXEHd2ySiDsytgM7lQ5QH6fqHRqVFEIXjQt21RQIyJSDs/9yjsNIB\nBK4/nOnAgP4DRP4OlZ+xbMY2afBh9d+/O0/z65VWalIoZOPai8NeNaQlQzJo\nDDmmo5M5V/4nlvdvEEmb8iy5n2DJhatWUllyFf9J9feE6sGZIk/HOD5g5cBh\n2PBMqhOR7vTkf1/BRhPBVwpyxK39pNvz0FDeyyCQ+OAU10nGjNn5DnAwDYqi\nf1Af\r\n=spLd\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD5k2S8HwbxDyGr9Rap9YjUsRT85AzLC/h3aBEe48mlKAIhAIszTIM6WXjATqmv598sRqkrSfETGUHUUcukIzeAqk1v"}]},"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-formfield_0.15.0-canary.8872b17b.0_1587674439731_0.5852405841090897"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.eca1a610.0":{"name":"@material/mwc-formfield","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-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/form-field":"=7.0.0-canary.8540808be.0","@material/mwc-base":"0.15.0-canary.eca1a610.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"c2d2c958e6704a2df0a1a210e3c3d050dbe7a50f","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c2d2c958e6704a2df0a1a210e3c3d050dbe7a50f/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c2d2c958e6704a2df0a1a210e3c3d050dbe7a50f/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c2d2c958e6704a2df0a1a210e3c3d050dbe7a50f/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c2d2c958e6704a2df0a1a210e3c3d050dbe7a50f/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n*None*\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.15.0-canary.eca1a610.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-ly+K7FUUNHbsdhPwLxSvNtp5UvcwbOrlsCHlMphKh0SQ/xjXfFwmaci1IRNuxafoqZ0M+YfyhTO0l4LfBwKtEA==","shasum":"54e44bb9485fc0fc0e90b0cd94c5c9945f2bcde5","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.15.0-canary.eca1a610.0.tgz","fileCount":16,"unpackedSize":48144,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeogvOCRA9TVsSAnZWagAA1GoP/1d9ao7EwZydZ5/JLRho\nXb3Hu8ks9LdiSRnHgcXhhDjKS9p5nK6t2atFiwwcxGZcfHaZxVDFObsUO09+\nFI+YK4FjYR4F6sJS7uf0Ylht3aGY+ciOTtZk/9myi2tso8+acPJikUAq7Rv+\nvoe2mdnFtutRC9i2UQInOC97lOERZykyU9u91IwKbWbWyZDynCuRyFq/ehDq\nHleyh5HuJiLwAsjm+QwR+fof6/VA1K92frKLdqFxb3caNjs9+RRXCvxt6WGP\nNAsasXjKUqVHOP+8/+ju0dxIYpYbUs/MNBiQ96BanbDxjF6e1bUV6j3gvvjy\nMbSYMa1OLs6+WDEZ5Jl+qALadzYKFud4SduGIonO5JXxj9QoXUFMhhupKed8\n/WgyJT4j1g8wAqjq7McyOhZqJV0H9i8eui+A4+P61y/Yr16+QJI+93ZjsgVb\nEFwEy3MFbj69YA5wQ7F0Ubjr95B3yOrhzptf98KvDtSHiy+pI42ATpKHvaEO\n9qGa7z0b2LtvNeuOrs3iZj/xBZOzfl4XL8dooKCWAn/yNpEZBOu2Qq7l3tEf\nQmS1bu81+h0WGNLN8FBWvESeHcpDKeuI04wGWAjpkzxCvSyPIVhRfuYSFtFi\nKoM8XeondlPMyfx9OrqmgotaiJIdb308OkSCVK2WOTiXgiY2PDKNx5uos2ge\nqy97\r\n=/xKf\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBs45mDfpVdEbE6iAifGSHOCUXUO1DYluVr3jDE6gmv1AiAuWcCEtciTwnCzff18CKfcOSgz6IqccH4o1xKnfIXCEg=="}]},"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-formfield_0.15.0-canary.eca1a610.0_1587678158491_0.8867959436452069"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.baaf529e.0":{"name":"@material/mwc-formfield","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-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/form-field":"=7.0.0-canary.8540808be.0","@material/mwc-base":"0.15.0-canary.baaf529e.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"4f5e01f380a9f1e5d4d3b0294d5110692bcdaee6","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4f5e01f380a9f1e5d4d3b0294d5110692bcdaee6/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4f5e01f380a9f1e5d4d3b0294d5110692bcdaee6/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4f5e01f380a9f1e5d4d3b0294d5110692bcdaee6/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4f5e01f380a9f1e5d4d3b0294d5110692bcdaee6/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n*None*\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.15.0-canary.baaf529e.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-daxlGV6DXPQyuctk3OIZKxauBBGxebxevmBKrI+kSCcQI+8iNCbAes2spCkKych5BSNropzGhIgqU5TKcTqCPA==","shasum":"32f51bcfb7ddb903e7e78243da6a1be0219282c5","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.15.0-canary.baaf529e.0.tgz","fileCount":16,"unpackedSize":48144,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeohokCRA9TVsSAnZWagAALGgP/AljN7Yj1jn4Lhvds2w/\nj1X5GQ8JuAYhw76i0NTCJWleMR+cUGYjklnDEAJwcdYNNxjcgbjPJyVgT1pD\nWTJkY6ysu/QSAoIwardn0RsSmLnFZvMI+Q7eszd1GhTD9HSGzce1zTfi0TiW\ndCvpoNOuL98WB8l/De6q1GnfGE9Yk70ZaBSB/ZWw1fBJgGLYKME6M/fNv7qU\n//M4VrbdEBIfWntsnFmdgS/PZ6wjCIrlDzI2azwl9uxrJ/5CLXRx9vBJ1xnA\nG2GkrLmZsb3hQ2EQq2HJKjjBg9Pp9krfEWX0FI6N5G0EAjhhzszDrFwjzIqg\n72syaetnGXVUSaNe2Kc/XHLhC1rXAP4WG4ywZMQY26GoGYll7OWFJ8GUJI5C\nS7jLho6rogfBFKriN9DYBUfwnTmbSNjsLX1rw+eUtBbkhuzZLe6LPnvzzjsf\nT6L2ku6ownb6+Rk+3xVhhAXvdYs58o8PIZjn8Yqg8CRbmr0gpU2izE+N7QCC\n4nKO9hftIqPYpVMMq/Hn02d7DiGe44l/p8WGroK3bOsczan72Xeb/2P1siWO\n6zH/jB7XqORZXyylO7smc5R+fn7k4tF01Cjozu3LBDTQtkEds+HnC9/AxSXL\n1ZEgEW/uidFtnnhugcjxIbaN4syth9A2ORdy9fEPxKunZreXbKW1aHeJ8uyw\n2sU+\r\n=IPFS\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDHYURtqVYHBu9MESVN8r7RVA02TPjG7wXCcDIJQ/aImQIhAKX7Ko4nIFrz8XdWXiUsrZklA7mZ7v30bR08AwdDmg8V"}]},"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-formfield_0.15.0-canary.baaf529e.0_1587681828214_0.6279851343264009"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.7a7992a8.0":{"name":"@material/mwc-formfield","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-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/form-field":"=7.0.0-canary.8540808be.0","@material/mwc-base":"0.15.0-canary.7a7992a8.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"b9b74b473b6026badaf980339f4451efd1a9e8b7","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b9b74b473b6026badaf980339f4451efd1a9e8b7/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b9b74b473b6026badaf980339f4451efd1a9e8b7/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b9b74b473b6026badaf980339f4451efd1a9e8b7/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b9b74b473b6026badaf980339f4451efd1a9e8b7/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n*None*\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.15.0-canary.7a7992a8.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-TlVTDSEe9E92PfEIyWuU7RgKagsi2bwxuwda7uLR12c6VPGUjKNQIRsPnh5ZRRzFaudCKgI4llwjhoBawk8mkw==","shasum":"b863b59509b1daa3ed3134baed685d1efa741878","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.15.0-canary.7a7992a8.0.tgz","fileCount":16,"unpackedSize":48144,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeoiEoCRA9TVsSAnZWagAAlY0P/2JjH4Z3rkvTSrKVz+MY\nyNps4T2SbI1P035H4emKLCNbLxcqljoqKfckWcp46DPKaWUCHQitroKyH0tv\nZ2PA/JHEbfTNK5O5ZLp/b5OhIYYN3nD2vMsYIaRdtOyE2e0jsoRqUJVqrP6U\n7U49Q/CKVLL1nYpe1uPFnLL47/XsXS3pSijXjG84Dtpt6teOzZvDayVnerZR\nt5bxtJdMkILBWkRRXIURpjWcIGG69R9e+1bjpX2bGNwb44RReTXpcY9Hv2if\nf5rOAcXKHIEFn+kNf+GEyzP2E5eFyxYcXxEV+Svw35WcRBH4dfkH+jMDPvdc\nMC37WkmH1xQu/PxZ7I2MkmCCw//Yzy2yOUYFYD4Odj+iKV8aKE9hZyHg728t\nsmbvI3IN3ZmKXIPOHdRv1fssDk/4p/TfTXi0LO3Jx9I2bKCZ7VkKAnnNxqJT\nRY/MSrmK6g6asKsZOdbBF1u6x8SRsoq2S/e5vufIr2ShDvtVH06C7Xeppfa5\n3VKLK/n3YqLr5JT6BxK55ML3/mWcQX90J6RA3d9IwwOtBd9Ab4pwct6UJ3NE\nhqJssDSfPdmVv2SMouVIduHkzUSh2vG4yT672DnhuQc7/3n16eCj47KuNvN+\nKUtdsRZUw3o7vPH8B7ybOIzXsdo/rhNAilolraHLcGs/k8B/Tb2zeZ2tReeV\nyRwJ\r\n=x/0y\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCQwy3ESBkT0FSdDzGhvaH6nmpF3K1/7k+DktzUtSw4mgIgXT6jyr0Wi12MAGKuFw34FYD9mSZrIyTyLG4orjvIlj8="}]},"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-formfield_0.15.0-canary.7a7992a8.0_1587683624191_0.153322475018546"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.1150d64d.0":{"name":"@material/mwc-formfield","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-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/form-field":"=7.0.0-canary.8540808be.0","@material/mwc-base":"0.15.0-canary.1150d64d.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"0b7cb5830938900ecd0b5201ad88746d308b91e8","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0b7cb5830938900ecd0b5201ad88746d308b91e8/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0b7cb5830938900ecd0b5201ad88746d308b91e8/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0b7cb5830938900ecd0b5201ad88746d308b91e8/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0b7cb5830938900ecd0b5201ad88746d308b91e8/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n*None*\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.15.0-canary.1150d64d.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-plg/TJrfC61nyYC4rKKgfvtEPIn71Kx9K3f6LzXUhMEcyp/+Y8V66l4OJp9ravpeSgii2kutUhN6mCQYFxzEnw==","shasum":"ac9eb867dc93e0427e66a68c5f61b418908a6657","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.15.0-canary.1150d64d.0.tgz","fileCount":16,"unpackedSize":48144,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeojBKCRA9TVsSAnZWagAAEjYP/0SAs1NTwgKPHewZZJWx\nrUwio5QrsGiQO7JGFugRT7ptb6flNtbXxxyay6AhmIZlQsycpI+6P/khsy98\npOCHpyK0nahDPKAHSXlF3pCQV/IjqL2a05nE7b7Uzfbxwlq+yXRQsmHP5T4O\nqUYl8x+99XE9egW/yrH6JIqs8VEuDYykDtAEvJVJCJFO9uqlpQ3rGVlj5/pT\nnbnf//W+3tVBiiV3HvpUuofBJ5jdyEoI5q9o1HZyJO4SpP0VA38UvsR7IJTW\nvgOz2oEpkzoC4MuSFiHuBgZK9rQz36gkkokbiNQPZASce3nzAuuPpQk2e8QE\nsRPmU9oLV9oPt8ZpBraacnCB5b343XmM2I4wp7prTI0Pi17tqE9uAb82Hv7u\naAXKHpCasC9e0hWItc/yJ5KJLhHC5YPZD0pCZaeDCiXjGhgXoySKicHObxXb\nc/GAVeVnkscAsnzvzoQFPgQ1f4q8ZhZIS0Af/SF8fUF2yyD1leoYzJEynpRE\nYBhJHgLdfIcVOewdtKqLlRV1iIwWHYoCVz1nsTZElXqvOXPtiLCIvC0OVf0D\n1jqZVDjp6V5B5dhsOoUUvfflmVqkg2DtEEBbn6BQat06CzAnT6WdYeX7qe/K\ngLlvz6Lqg57SDWAYb9/kJVuUV+WhyS/vLP1FAh18bwfJILkn/K84qI6o6uJC\n7dC4\r\n=42M0\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICZ3igjxoGu9FCiktYgnaQeiY+8VzTnwD2uXaGJYiuIgAiEAvlDBKKktlQLWYK4UfpRlPlx2p5PF7YURQmu+c2t6IC0="}]},"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-formfield_0.15.0-canary.1150d64d.0_1587687497778_0.7818122211872849"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.dad3f828.0":{"name":"@material/mwc-formfield","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-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/form-field":"=7.0.0-canary.8540808be.0","@material/mwc-base":"0.15.0-canary.dad3f828.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"ba9b04a7b15588d7423d100bbf29fa317a1947ff","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ba9b04a7b15588d7423d100bbf29fa317a1947ff/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ba9b04a7b15588d7423d100bbf29fa317a1947ff/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ba9b04a7b15588d7423d100bbf29fa317a1947ff/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ba9b04a7b15588d7423d100bbf29fa317a1947ff/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n*None*\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.15.0-canary.dad3f828.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-ONqEmPbve7vvjQRjaqCjPPho1yk1CgvDzBYynPPYLdmyYB5b+6NnrAiw1uKaM5LZTUDz2Epz1nyjpqUNPXmEVw==","shasum":"c7044b3193a3ddf1ac581ab175c383a5e9f5962a","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.15.0-canary.dad3f828.0.tgz","fileCount":16,"unpackedSize":48144,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeo4duCRA9TVsSAnZWagAAkqMQAJ/nHI6pqP6eGRoopu4d\n5fIkx/bIRd1HSYLRHZlsM7oR3DiK0F6+CJIOIzlQUbcoYchv1qsre0uhB6Ul\nWZ4uUjAG140wqHG7j3peOwNAWUMof59nD5TlhSJ5unecbG3zuxysgJtQsqGm\ne76bBUzfTQxp58AyuAjBAw8kYH3IJcUfI5YExF6W84Mm76vHSsk0ltfwslpj\nxkVE4nsEMwbCMB66avxUeteSUamoPsq7Fjx61y3hBx2gTOk1kEIFY070+Vwe\nzdxTv7PILtXh0WCDgyLAPB/cshN0FcoFS6MN4+88JIycy3P9D8eg5FHOcBt8\nv+sioqFxw5OnjVyO3eGPPGbLCLYiww6xefFlzaZNNYcvVGCp6cnOiBax8cNt\nuxEjAMlq23SRDoHkM32CQOwnBtBTHm11AojfvIBeLuQlj2tEe1xEd9/kAUTH\nnuFa37sF94O/em74CVjZLThW638D8W5yHyHkMWMGOs9WMr0/bATG1m7wzpW6\nu9w4GUgBfASY/aJZRgq2yMikyziSYIjfX5a63FJ5lXzFAnebDpYtmTh7mGw9\nckjf1g96BpPpFT7rPkNSVx524AD98eDJAwcWsQM0Z0uIraBRMW+dVqPBwzUf\ngfKvjF8MCe5P8Kn8bBGU2XZyVX3afq/DJM4SFkOiNJudZ6eQjs2LdF+ryYIq\nDHat\r\n=eWGR\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICdM6LzqkFwWaATYQiP7KegXsWo/BB8Ko++pXkTqfyvyAiA+6ySOdJKtJwsn5XuzwB2hpH/9Uxi5zO/4a9RI3VCY0Q=="}]},"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-formfield_0.15.0-canary.dad3f828.0_1587775341882_0.5305591359699278"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.1bcdb47e.0":{"name":"@material/mwc-formfield","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-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/form-field":"=7.0.0-canary.8540808be.0","@material/mwc-base":"0.15.0-canary.1bcdb47e.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"ed51e46ae11b69727c91d55f440b68af397ac10a","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ed51e46ae11b69727c91d55f440b68af397ac10a/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ed51e46ae11b69727c91d55f440b68af397ac10a/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ed51e46ae11b69727c91d55f440b68af397ac10a/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ed51e46ae11b69727c91d55f440b68af397ac10a/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n*None*\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.15.0-canary.1bcdb47e.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-zKXY/po9V8UR4NcNsSTCYrvQLIlNBZbzCjn4i0JdLxZAs+ZxkkWtiMcA3k+L0IDync1WBTJlZNuGh633r0Pnlw==","shasum":"aefedb5eb338d8b29d5f0435b26a93793c845917","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.15.0-canary.1bcdb47e.0.tgz","fileCount":16,"unpackedSize":48144,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJep4L2CRA9TVsSAnZWagAAJAIQAJFwDbR/gaHetq3+Fx2m\n9lFv1GQO/zag6HkoYAxbRxXjgz84+VWO6N8riyuiQ/4NMCeRLxoiZMwyCwGe\n4Dqth0fU35va7lhniUJuoIhMM/Lc+g7VaV5bJFQMGPYRoXSgd5EOtq4hBMHW\neSwBcZ6cmTQlzhYZS3Y5JSdYd1jJPaC5HSjaqxnEKoi63vT7ahz8kKTr+jwL\nSRpmVFOfW7ss84AbY5nOudpudlFjdy9qpvyq+vEl6ZohS8vaL4I7xboVpBzX\n98ar3bZ+mFYjjBCmDsnqV0NuAcSP2REmNKZCXnQjRHEsQ1wvkQK6q5VgzJX8\nEtcGzxUe+Mu/fpQzq/WaKeUW8X7Ckp4f5ASbqFezPaRniK/bdlVClKIMS1z6\nfkvUUrx7ziDktz7HaI8bLHHdAe1wkkKxVVTtFtRrq9deQVeZL1BvEMXazs/N\nk0Mf4Fshzu4Cq9PfAhPJj7/KLVRRk9Z7r36uXZ2OhNfikO6hgNtWT+UwPJ8a\nA8feNv0dMHkLxOzWL1tDptHLmAr4PXn9wl83ra2izghMfWT0qt8RiCfabVPG\n78JPyPQCEmULRRE9iybr0uQSNPdT2x3bYFWN+isKcIyVUWtXOF4b1364BCI3\n0Y5uODluznaO8aQY8AVeAwtePifwd23pJr+KXZ/mgedauIoQhNMgYdfMTd/2\nIuRL\r\n=nY2T\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHhfo/DJgBc9SsskXPF49gzixH6/7qdLUTSdqa956aqWAiEAsf43JxKP91xgQPYk0OP2cOP2p+KCayh/dyHJq4ZK4k0="}]},"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-formfield_0.15.0-canary.1bcdb47e.0_1588036341996_0.26428589301766103"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.86ff1b9f.0":{"name":"@material/mwc-formfield","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-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/form-field":"=7.0.0-canary.8540808be.0","@material/mwc-base":"0.15.0-canary.86ff1b9f.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"61a98a59545d9e0b0fd96c928737677f2b981fb8","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/61a98a59545d9e0b0fd96c928737677f2b981fb8/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/61a98a59545d9e0b0fd96c928737677f2b981fb8/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/61a98a59545d9e0b0fd96c928737677f2b981fb8/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/61a98a59545d9e0b0fd96c928737677f2b981fb8/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n*None*\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.15.0-canary.86ff1b9f.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-uvnuNj08ELVAXE2+Ft/NAbuXLGqOTPJ9E5biJqwFRJxnLpNQ4Y9K866SvcKgVhDL8mSmBUdbGEhNT9v2gcWyGw==","shasum":"19a2abb1e824db8ef65e5d54de04036d4a148005","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.15.0-canary.86ff1b9f.0.tgz","fileCount":16,"unpackedSize":48144,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJep5sXCRA9TVsSAnZWagAAGScP/2FdaiUhYfa9yAh13dNX\nj60P/yUNXB38yGdWlQ2IAdH7V9WCgfuzbcL/fFWM8CTtGf8Ff5m6Y5LRoaWv\nq6RmKcRltfr4mmCyzlmfhRVhhRXHruiJefhyW4EiDBTnJ9I3YQXNrfTd0wmH\nOfI6C76YZiD+OUdK98WpsUOHjImpzAx23BGxWpsU0qqVVIb2lYVzxFQi6aUw\nCfSTSvP7VCtv34rPgv/Bm3mW2oY5c4BjvfnUPyKsxOFnZqpvyclscIwEerSV\nQnydRcwg9cVmQmXlbr0e+ZOIBTokcRBIzOfnq+aTqyRcPubWJeMEdWVJGimu\nCA4ZppWak9sRVYMxUxpHkHaMbOKZvIvkPkDY2gfdJhBtjFruGtA3KqrnT1gE\n0kP6UpabQlN7K86kLvKQnzJivbl9DdgykZlXQQXDxH79ERoFa8RobrBJsXyU\nrLm2GIoha30Ku37/vTxBZheOYG0ednlN3e5ZYpN+XMhzcqwzNGKt1TMbj86o\nqt8hiWXmb+Kbx8NhTGUx9hjLVBBMSI6SfQo1yYksCot5WyecnlDCI9u0ni7x\n7Uz/KITBfKsGHpqSCEa6ObEn28gVWxQGmptzh0rwweosKuRreIfR22n4ZPR8\nEINSUIe49tuWaTHAKJuDYQVMd5DJCPzaRIUKTV/rO1WQcX/phl5prIXuOe+4\n+dYi\r\n=16Xg\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBfBPea+l262Yt+yzmcj9VicJ/j/zFgqYa3MXPVxOb/wAiBpJ5mhSKQucWC2tWtTgp/AyMlPZHjnK9wHlt0rSNoV1w=="}]},"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-formfield_0.15.0-canary.86ff1b9f.0_1588042519451_0.4003966766694329"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.54a86b20.0":{"name":"@material/mwc-formfield","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-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/form-field":"=7.0.0-canary.28d32f8e0.0","@material/mwc-base":"0.15.0-canary.54a86b20.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"8cfd732e72200c6982fa6d6fbdd6cb5496660a6d","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8cfd732e72200c6982fa6d6fbdd6cb5496660a6d/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8cfd732e72200c6982fa6d6fbdd6cb5496660a6d/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8cfd732e72200c6982fa6d6fbdd6cb5496660a6d/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8cfd732e72200c6982fa6d6fbdd6cb5496660a6d/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n*None*\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.15.0-canary.54a86b20.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-s/kIDnfdopAkPPtnKs6QQB90p+M4n+yq6FONhWwmgweSrAEjHv6ZzWWnZ1MbQlYdugNBLvux94H29XL1G7y/3A==","shasum":"4fbaf82f9dadbf44a96f5a73eee052b65a606da9","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.15.0-canary.54a86b20.0.tgz","fileCount":16,"unpackedSize":48144,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJep6BSCRA9TVsSAnZWagAAQlEP/1U3UescUddi3IF5/iVI\ngbsyvItCQ08ixulbtjsE0OoyiRf0DBIdIHw8EJnajjQ5dvtTEayUekjWLVTO\n/L6mG5BB6P5ipW/n10BJ9GzYkRoWVPT+/Die+id5CVU+f64E8qmyXpkXp56y\no8Nx+nAEfOeZ1AjbSoMHLCqpOJof8r4VaQA+30nrEVK9pMFaYjjzM7M7av9I\nW7OKoBCcUwttsqW416wYzIGrnJXdE2/BA/NgHUkjk6P/flHEFF5GHHyq5tlx\nuQ9e43duOfk1bBU2QArRkBjLpTHBPguwxFwc6WFBFJxz8erPem3ma2VVX+qh\nuWzNTVSSbv6a/3A40v8kASO/NjilOPjisn9NfMcRlVzT9JE2nRfMdjoYhRgH\nJJjeQQTP98ahlhTywBdYg3brrZ0LO0qlQGGF6tFIM/7eFET+OcvFfKe6O23g\nSopjSuS83XVLsv0zqASlDzCFoUzkLlMdL2FQj1Egg0KFST7vbEqIPQo9Qt03\nitWlCFRsyyZ6/9ot+eHxhxIBdTktlI6LubqRkKH9068wtAx0OC0XzfC0ty62\naz9SXFI6miiUVPvvroQctw5k5rU7uJU8dK1cdlxdsEG1GHGViB543l+PMrYD\n6FTR8irvUUpIH6L1hl/ST/qw2PtjcAsCpy+PXkA6FIz0F1p3SYk674MMBWIg\nxj9G\r\n=TndH\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCQerBWLOaWMy/qwJF0eE0oiKjxwFoon4rLhHx/xUzCHQIhAI1oT7EYw0uO3vmSvILFlkqG+Vwg+kyO2JQLEaZEpuHK"}]},"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-formfield_0.15.0-canary.54a86b20.0_1588043857715_0.7755577095199577"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.938fd24b.0":{"name":"@material/mwc-formfield","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-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/form-field":"=7.0.0-canary.28d32f8e0.0","@material/mwc-base":"0.15.0-canary.938fd24b.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"1b731aa2e74a3ad03e8d40736e169d0bebc8d8ac","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1b731aa2e74a3ad03e8d40736e169d0bebc8d8ac/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1b731aa2e74a3ad03e8d40736e169d0bebc8d8ac/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1b731aa2e74a3ad03e8d40736e169d0bebc8d8ac/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1b731aa2e74a3ad03e8d40736e169d0bebc8d8ac/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n*None*\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.15.0-canary.938fd24b.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-LODcHK3BRLWz5G+7F0xltB+JR5aF5kDTfeS5i9Rub9ioL/CPPwOTYYdWWJCy2/hYi4MmoCYYi8LZHvDbqgNL1A==","shasum":"020c5d897794b7b8f426824cfaa232e9743ec82d","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.15.0-canary.938fd24b.0.tgz","fileCount":16,"unpackedSize":48144,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeqilbCRA9TVsSAnZWagAAUdoQAI5ioJ/HoDo37HIf8vQS\nFOQLeO3pHXy2qAghm2e6aGmpfBUwn8j7sNw6FqS3nMsqQZPsI9Fn8oT/M9lU\nR8i+eZYSA9zwIp8MS7eYxeew8rkt7pu4IW/GiQaue7jSFz5Qb++RgP9FX88K\nyfAOVWJ+a9dCLy3Mx7O2dHXzkGT2pF57K3KpxjYEEQI9zyPOZkU+mTzTejtt\n4yBKExRLzYa35cSKMHznVFfpC7VzGsjV8XqD00T7/d5Pfcc7ohXf5022QBNB\nyRAAm7+w33nmwustGVx5MLWXYKssBWYgMPSLT553GnJI0du+j9d+9azhSSrb\nhDuWn//kVT5N3CBb9DuO3SLWy1bcQrbjHZrJ7lz+HKTgua8dpAfLCFoENR0A\nmH35Gui5GU1+M3D3ivLZwNYyukxo5A3lRh8bDWsP4T8r1xhStxLYU6nepqaJ\nZ+h40PplIfoVNm9RZtoydnAxuxUZPrv2ILVpw10HR+Wd+HqDaKCQxptBc0/q\nHL5OSFHMRG8Ml1FrwHTc50J5jPhcj4krv/9NWULOAmMT9kAX2m1KsUGoPiG8\n6/dWc5aO+Dv8DYxT2nbq1AbC1yv5QfBlIb+oCTHhndaLPlFl8Eh5MuV6KEnl\nLYk7cYOFxA1BpyNVrdTgidDSFxmXQqhXNsDdMIChP/6axtDrZOArDL/9AzVZ\naANu\r\n=PUHj\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDcnkSm1ibAKLdBkQ1A+RyM7QKV6ii/9oAUhG4k5pXzgAiEA039vOXYZlIPMx5DBnGUP4XtyM79096b0/GluQLQYLko="}]},"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-formfield_0.15.0-canary.938fd24b.0_1588210010678_0.23738696777607116"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.39e9a008.0":{"name":"@material/mwc-formfield","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-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/form-field":"=7.0.0-canary.28d32f8e0.0","@material/mwc-base":"0.15.0-canary.39e9a008.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"2777862aa4cbec00918605f0726651658a2c66a8","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2777862aa4cbec00918605f0726651658a2c66a8/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2777862aa4cbec00918605f0726651658a2c66a8/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2777862aa4cbec00918605f0726651658a2c66a8/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2777862aa4cbec00918605f0726651658a2c66a8/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n*None*\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.15.0-canary.39e9a008.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-UrQuGRGetE1blChZ8eDtp28001o/To26bk9KIfdAI3LM/kBtMBOgPoYoIWEKBcXyBkwk/fXVxbUpD0OuHIfbUQ==","shasum":"231ab6241e9c981d32d25f2165630ce232d5f4a2","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.15.0-canary.39e9a008.0.tgz","fileCount":16,"unpackedSize":48144,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeqjQuCRA9TVsSAnZWagAAXWYP/j4nebOpI0IORwwwuQGy\nrcW0lWtz70okNWZcghzigBzSQMom+Sa5ES5BGnLRvzIfj6T/JxUpoLRkZ0W4\ncGXvcEnn31tEosYUtfu3HX6taQ6RuZleakph+DZ+3wEekbgTzVixlH0GyAaw\nyhnNV4tOmLUuVB5SKKZOOjOasDCkJD+kEtRvoo29JD2CxWHhkph2i5h1QWhy\ncts3Vj+/8KofxqEoP9d0nFOdYJGgxQnz48m+ckAYXN3iQo5r/HG74Y9qsRPQ\nIgs2PSLzQNZCoHeltNUgJTqo7KY7rfi6XeNGibF+GWkC5/wpORaDH6APWHBg\nQiYvBQCnenj9el/iJsdykUOyqfAw9sxg4kl8h2TODZB1GQRE28kOrwPVylxU\n6A7i2ZvvHKs607QajT/QbalkCcl4Dcam4lcpJmrPUy8r7XBCWdgq0I0pKEmj\nnl+HWyoL+Z0G1BufRRbVWoqGqTgwiV9+1iGgwJmSlfmITMPzOCwZ/Yfog2RT\n53RON5HzdSkqpsUNKNziX4dHbIWXNBRTdOFskZHGJigxSaxE8npAMulxX326\nddT0Jzod+MvRs7yYmD2eChD20SzLBXMRcKfOW1SmbLUSRO2ZR4TZjtRFG7GB\nBW3/YsxmtcCDzET4zrzv4/VoZI60PH8ZQjqpHH/Rifh70eV6BmD8ajFnVl6Q\n0ivQ\r\n=Boey\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCMl79PH/AAB3Q1EaqgsMpcRFemQ9nGTCmgvoWLi6LKDgIgBPylfcInR7nGNDQatkPzbj4b7zhH/+yvqSeYkylY0NQ="}]},"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-formfield_0.15.0-canary.39e9a008.0_1588212781938_0.9265488173806209"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.f3b365de.0":{"name":"@material/mwc-formfield","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-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/form-field":"=7.0.0-canary.28d32f8e0.0","@material/mwc-base":"0.15.0-canary.f3b365de.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"b6d6f6d4a289f46197727279f5e776b79264ae07","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b6d6f6d4a289f46197727279f5e776b79264ae07/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b6d6f6d4a289f46197727279f5e776b79264ae07/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b6d6f6d4a289f46197727279f5e776b79264ae07/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b6d6f6d4a289f46197727279f5e776b79264ae07/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n*None*\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.15.0-canary.f3b365de.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-eRLQePcobj1UsW4NJuSIv4zQWvUUWCn5ZZsR6wQ8l34jdByEpyvSsTZDPENKrY0YRZ6scr8nr0TziDsCUogSaQ==","shasum":"b60eff17b700773d6a8a454a7fb11cd3f02bb91b","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.15.0-canary.f3b365de.0.tgz","fileCount":16,"unpackedSize":48144,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeqovGCRA9TVsSAnZWagAAumsQAI73sSXeZCF5UvU2TJ6Y\nBd9GnYBHNW3moYpLnW2culCgFaD9MzzUVqCC5VC2C3t4xI1nJDyI5DqnIhik\n3j2yWNM0wANFuDmLkVhAI2lUVo3StD6GHFQiKRTSRNq751HfhHuze/N7QqcM\nbrBnfsK1+pIrcCRQ6XgoksGwNEBMhSmsa8K22+yzo3RiQ95yDHftwMm1ezer\n7cMDTJUIReX62mX6vUzOKz/AuFI9wQlPgUaRCKWkCgw54jnk7RcSkguD0tcj\n5a8BOiKxUJlp17m9eZdScnzt6iwsBTBIUBCFLEOiyDZs7E1MZTtj45xcPAO7\n8GpSIwWmGF3AZVXIafaGAfXUioXWsC7Ht1mVWPbEk0I1cXUQkgyrNyBdi+lo\nzFlXlu/DKjO4tl84ck8vk2zvH42b//wyQQLxu6vL7n/ixpT6IbfcYjBQMwXV\nt31pbQ1++5jKPmamt2aAeAStWmul7sbguLLA6BRJ3gvy4BTlYKIMGB+c2yk6\n83gCAFKBOWJlUa0x6I9/H3hGG0g9g32PWU1HHzVpqFdfeVUY6wDHqr1cTNRF\nAOpC+eqxw2mnOIp62tvdHGHWtr3bRPvDJVwNQzaWWWSMwNcpEPYIuldcMjRV\nMt+SiMWQ1WSYvPUJm37IUTCV5yooDHILP7MmPONiMEpTURJAKKoFclzK8m5H\nUaXU\r\n=WJJ4\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEIQsBm+ndSe7XYaOkCWSAnqMp/pqIYjBpygJ1xIycgHAiEAmRbbaBLjDIc983Pn7S9oLmZM9I9bokLNyW92oWyCLm0="}]},"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-formfield_0.15.0-canary.f3b365de.0_1588235206249_0.034857767483423174"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.cdbdf807.0":{"name":"@material/mwc-formfield","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-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/form-field":"=7.0.0-canary.b0f83d2fd.0","@material/mwc-base":"0.15.0-canary.cdbdf807.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"c46702178e5c5a1096937d4bd70ad6f4ac4d1dab","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c46702178e5c5a1096937d4bd70ad6f4ac4d1dab/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c46702178e5c5a1096937d4bd70ad6f4ac4d1dab/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c46702178e5c5a1096937d4bd70ad6f4ac4d1dab/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c46702178e5c5a1096937d4bd70ad6f4ac4d1dab/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n*None*\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.15.0-canary.cdbdf807.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-4shLB2a0GHM/ZCBKOj1bPSACkqsgD6d0JeFcAeWO9GGX8misV2TONYUlQTdXgN392x8/lg07922yW4ChhAqk3w==","shasum":"31a556bd0a403bb1015884a01a3db77fd0b3c81a","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.15.0-canary.cdbdf807.0.tgz","fileCount":16,"unpackedSize":48144,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeq2ncCRA9TVsSAnZWagAAjQwP/AuVnEgR19hDJK2pehrt\nSM70YTVw1p0Rfv/c5cZbmG7C4aXb8yVtArqHzwEFvCg3aQyejQbdNrm7oJ5y\nbDQB2JvjJTfTCRzHpxgA6LEfVB81StU0RyBn2TDeP0vFZiVM5f5w3k9I0o/M\n6JT9MSMYg4Cr0RU/U5kHsMoU/QIOTVj6+zdrwPWRKh7w3orCtsDeBlq4y0kA\nUSwV5RTWOiX8ZVMZAaCWhUp7/htMgRApOvncG/+nVn2QxYJLt4HPdv6r1m5F\niHh1EwE/+HZQ58v8ul47PZFFJUnT6AP5j78KbMwVv/VYKruoqM5yv0Jn+AGO\nnLWafc8jWdNYXfAcnEL4zfWNmm/H75Jg2VIUeFoLojUIlUZ31/A3mL8HGFhl\ncc2GaSuKYVNRFTH1SO1C0kasRm+jG3b5ZfBIRwK4njEilAZ/ggA/lSwoK7Em\n7EWveVblBjzixZiAy7/UgWfymPRfXDA978rVtcQE3TthepxEoeHGOOnE42ol\nRjPq+MKVvRfzmzWm6TWR4kWzn0ddJTsLWhPsW8sPpk5Nnyl3an5ww4KL7LIn\nOcpBwhYOf9MKtR2+3hz2GHVlSlfhEGQiLf873oaHDfpWXep6PNgRp1ufKxFS\n0r8eLktbLjpfHfDXVMOOZXM8c5qYcXCxMtHOfofirNAgCLtov+NbXXMXXByn\nSDlD\r\n=dUD0\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDeYbqKBxcM79gFl3QODj+Vz/+Bc2LVkpBds1erhp+pLQIgf6PZpK8W94swL8UkltqGm8HaVHcz326UMhpTHWnw9y8="}]},"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-formfield_0.15.0-canary.cdbdf807.0_1588292060354_0.1803928618063977"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.9995ae17.0":{"name":"@material/mwc-formfield","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-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/form-field":"=7.0.0-canary.e59906a57.0","@material/mwc-base":"0.15.0-canary.9995ae17.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"4d5bd8b757cc94e00dda1cdb19761b283a15eeea","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4d5bd8b757cc94e00dda1cdb19761b283a15eeea/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4d5bd8b757cc94e00dda1cdb19761b283a15eeea/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4d5bd8b757cc94e00dda1cdb19761b283a15eeea/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4d5bd8b757cc94e00dda1cdb19761b283a15eeea/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n*None*\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.15.0-canary.9995ae17.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-ZZIUXk8eQ9fQtbDkT8N04vtq17ahYOTGLds2Nl+buuMIAcDAHQt3HRtH/u72Vq0y/OhjlB+mBsJtN9MKXC6iuA==","shasum":"ffcffc2c8001af085d4a014f96640b24bb57f0b3","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.15.0-canary.9995ae17.0.tgz","fileCount":16,"unpackedSize":48144,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJerG4XCRA9TVsSAnZWagAAo6cP/1XAl87CkgtXycSfLmip\nC+ScWDC9qLY/FR6SC5Fl+pbABQ+X/ehQ/3DqVA78DE/Ai5p/o+FqhOAxSpct\ndevtmP+IfwUEdsCy0sRciZAqNEdBQxo/6VclNW1xNu05Qn75slpHPdXraeLM\nODUgwtmYjxHMd6CsID3bfvgO1xCAM1iMrAvQaUfPiHhFceR3Zu6cP2/gm2+4\nZcOMgDmOI1VJCa0Jnp/7Y1oULX5rRjCTbfzTZ3AQNuG5SVfZS6OMNjx1p3Va\ncEYJTNm94/FtNMw0ALro7bYQwjIV3CIxe9HcN8KqfLGKM2NwL5Jh5itYTW+3\n9NE0iBqSlxmJ4783tYF3hPGQjxl+iRyve3qwt2A6xmIJA1rMzkuFiLp7l6et\ng/qz1Sv8hyjMbf4DZOacEtwU6+esT91G+jSzY362hL3DiCVJy95uWkOVpqmW\nlPNDwSJigajHplEarc+OAwiQ/bTOcQF75w+FXuEcQQjNybURLWIQ0zK8OV72\noVy0C/jip8k9RUwxxm+49rB2OO1hcoazqk19htp9syLBexgJnCbhAijyPnsv\nBcq2bM/9zTdFnZQJZCrhbIVDexNGA6EXCGWKor3l4MGo5vYJYo0JVKC8Y/2Z\nHbKmgdchtfcRT0lCj6r8Vm3c6KsqfnQUY8NiF93AuYzoZjPWo58INlZKRkCc\n/Frr\r\n=clv9\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC97oiAI43ZHPFtLO3RFuRp3o2gEeILeOr0giSR43m4owIgLOu1V70ro6w3/sX+Owkzwlm/xH16tR07Mcp2GWGfwbM="}]},"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-formfield_0.15.0-canary.9995ae17.0_1588358678478_0.2336664068990788"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.457bf035.0":{"name":"@material/mwc-formfield","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-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/form-field":"=7.0.0-canary.15d65448e.0","@material/mwc-base":"0.15.0-canary.457bf035.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"4174fcf7d0ec013419d2f97c6a615216cacd4687","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4174fcf7d0ec013419d2f97c6a615216cacd4687/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4174fcf7d0ec013419d2f97c6a615216cacd4687/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4174fcf7d0ec013419d2f97c6a615216cacd4687/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4174fcf7d0ec013419d2f97c6a615216cacd4687/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n*None*\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.15.0-canary.457bf035.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-dpvFsSpQo+e1kVOnbcXiy+9RhCd0FAKkbUq1Y3HFeyOEH5P4JbqoO4XaT7MdqL6/nMTD+NZzxl2vQqggP7oI5w==","shasum":"a854cced2f4a3ae72d1917f61455fa8152751218","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.15.0-canary.457bf035.0.tgz","fileCount":16,"unpackedSize":48144,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJerIuTCRA9TVsSAnZWagAAKswP/R5jAjPLSCOdqI+h60ZF\nkZCp2X5S10gIykviorXXw3N7v6WoSEn3zY6+H+vk89K27dxybdUGPnfKWMwI\nhmK8sJqJ00Vy1Owf7uXJiUQU+EIPSRTXMXk4/Q/p/g+5R83vPI5tB2yyoPcI\nM1JL5wcuPVjpLvQxXgDUFmvgHmbox47BneidEAHsGT0nppF75KDSfYrh83RN\nbtyLGXW/MzxQCI+r8TQ31GZUpCnj9cUzt5fDovXkbiyHgRzowdJJQwantWMe\nJ3lEe9fVQBgGrdiplkiLM/2AAcJozVVzYvfVSl9c9+wyuXVpuXSH3W3LYwOt\nBQRTUx/udxLl7uYxACNXP9lN6I0J3P5JNfhC5UTFZ4vS4XGYvLkZOSyncJlh\nCytJwWUV2McrGzLvq0Jsc9jWh3qVIgWFlY66B41Wfh81XxMpWGPoT0qSdO9D\nTpqblrShKNlnp41pYajstNImNt66a1gCWic65sqcQBOAAt4GUWwcJpFy8jsQ\niVBEqEyqR36zVv+q8iWASQ1vXWvu2MaU24YNc9r9/H+JfNoLinMNKjsvhidn\nOpLXytCcQlcr6wJqMvq+7gD8SJHahcNciIegwm/cA+8U/gGcZ4bSXuAzt4uB\niXYj7ddbv7kENtlvru99MCwHaQYWHd6W3xfWHI8i6OCSTYlRQMX8u03OkVqE\nRlBi\r\n=39Qu\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDpShfVpJztEkFKPr5mcae2Ki0mlC+5DwGS4F73FCme7AiBdtTdOqNnX4ud6W/j4KEWbZLMJPd3Qq5as8XFg/5p5WA=="}]},"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-formfield_0.15.0-canary.457bf035.0_1588366226979_0.5882860702097685"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.2381fd02.0":{"name":"@material/mwc-formfield","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-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/form-field":"=7.0.0-canary.15d65448e.0","@material/mwc-base":"0.15.0-canary.2381fd02.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"4e8207837776c4f108fb86133541c49689664446","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4e8207837776c4f108fb86133541c49689664446/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4e8207837776c4f108fb86133541c49689664446/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4e8207837776c4f108fb86133541c49689664446/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4e8207837776c4f108fb86133541c49689664446/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n*None*\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.15.0-canary.2381fd02.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-DDl2+SwL3G9GPSwlPclMLIHV1gpPyG9wJK+soBYsPRJ0ry2iO4D+maFZX44oLeFX5kBZqi42Teaoh/pCiPKg9A==","shasum":"41a4550c64e5e9e627701aee6ef2415255b9fc3e","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.15.0-canary.2381fd02.0.tgz","fileCount":16,"unpackedSize":48144,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJerJOuCRA9TVsSAnZWagAAibcP/Arl1k8Yva5djHt89rN9\nofMV2P+r6h4MbTX8yj6XVKA+JGoRnmXJ5qgDHM52UbRXR2owJTcgNR8lzfjL\nXyUf0btHt/FJdlLY+fxr5z3Ufz5wTAvO5aPxPYAxYLe4tGN0xJLwRaYU6K8U\npfbHLC6xsneinqBTJeEvRfLA7moeGhhsKxH0/cI6ZxPCaFkXaMAAnYKNPe90\nYOaFWX3PSK1JQ3Kxbv3jWORC+DXA1M1eVvREhboLmg4w/31lRb9xmsNDVzs3\n6V3FZHtTNfZnN8vPW2Jkv5Dgbpvp1YrgdzYlEeS7xzMl3VAbWuTG9qGpX2eO\nQ4QIjYPComYj3jiW/R8FXGrN4ymMTmcpHUGGLPmlJWFLygxNP2N4MBaiGLK4\nhY1vrvGNG080qlfdU9J3JTDuLZbLL2fremLjbxN/DWK234DX8rZrNtp4vZr6\nuovzCjdWt2HWQ6pZ5QIHQtcVCJZ9jGQ9lsojOXglxeAzCRrA821pL5qdfIy2\n2niRsmAbirEq96MMEy2J0KzyPwS1wnzQrfB3kJ/Wssz5uo5jbdivuZhnGhJd\nn8GGyj3njpIRT1qOXhgKymfMnwDt1EG1wrjDCUWU9xfwppKJlv03cA0ua51m\nzzFUOmFeNuueF4+4AZZflQ5WDrvFMnCfHMkx6Jw4gIioM6WrX6aWueICI0Tc\nOQ4j\r\n=u5O4\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIB/gh/KnL+KKbzJAeTwTD/pSGc8opximtijoPJe3wWhTAiAIZpRFmvtFhgGCfoK4T38ndOcj6kSHaiGar86YyaZ26g=="}]},"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-formfield_0.15.0-canary.2381fd02.0_1588368302595_0.2807256156630804"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.b2ca9b57.0":{"name":"@material/mwc-formfield","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-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/form-field":"=7.0.0-canary.15d65448e.0","@material/mwc-base":"0.15.0-canary.b2ca9b57.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"98f8c3a13f6577a5e1ccca480ffe483c91183a7c","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/98f8c3a13f6577a5e1ccca480ffe483c91183a7c/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/98f8c3a13f6577a5e1ccca480ffe483c91183a7c/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/98f8c3a13f6577a5e1ccca480ffe483c91183a7c/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/98f8c3a13f6577a5e1ccca480ffe483c91183a7c/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n*None*\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.15.0-canary.b2ca9b57.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-ETwpddemgRHX2ywYHtmVY2/8dDVS8pOPWVpRHR20HmAg68lfzKS73InruhVtwT0opfzqghqrW0jC6L/PPxdrXQ==","shasum":"460852a85a4732657fb128a95529ae5eb004078c","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.15.0-canary.b2ca9b57.0.tgz","fileCount":16,"unpackedSize":48144,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJerJYkCRA9TVsSAnZWagAA82wP/jrymsbmLxeFryLfGlil\nJuRU5/NuxK3Nv0Qs7SYiVwNM85hJmqL+uXZOamW4sEUCeea4DvMNq9vyjEkk\n+VEFf7ZAOm0vCt7RAHS/tKGn8rLAMtftxPd1N3IH91VXUfP6RLJAEaF6+/MJ\nrMTYaUiwFHwr3sjlXz52Pt0ffgkgEeNwwNpzVZf30z8ySZVRhynM4Dr6a/bV\nq/cPeA+65Xb9HNd0cPeEqpNEQL3a13imeaeqaejr0yNbewkAunUooEFV98fT\n8SQaFe9TRU57ffBkvd//rJ57oud80BlDG/x8RbNBXtiNZRzw9Pwuq3SAfP+P\n/SU72uwB5482QEXsMiqWtvOybOSfN9gmkF25yAsFNJykjNCormhmnwEklkSH\n1IfzgHrO1+Y2LjgrMydjwtkl3Zaa0vsM1DH1rHC6y5IRnFnpWf9gOnj2hsAP\nxmTA8F54Hy/OiiOZRuqmuzwuA2J7iZA8KHAwbqFu8WkL4Qho7dhcyNWUppYZ\nZeCb5X902r21yI9mbxaHgFCKnsIIGqb/MnQ7GT0KAUzQ2A9xno9HAhpcv6ph\nExW1rRTNVdBYvwcIOlts/D1YnaZFUIlPpNL4xikNfdg845h9HcdiAIrUvx8d\nGiX1FPcrukUdNvCJtLWdAL6nJdX3n+Fy2vhXBPvHh317vbrazcpf7Ru0/BQL\nbIja\r\n=nyYg\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICYJZF9RssbhibZWWLNz0I9zr2whL92mELa0ayM43RIlAiBbzrfBaDQtCE1/L4n2r1Zyk2hqcSXuUR+kBZN+XOcW+Q=="}]},"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-formfield_0.15.0-canary.b2ca9b57.0_1588368931896_0.908360391713442"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.b2b088e7.0":{"name":"@material/mwc-formfield","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-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/form-field":"=7.0.0-canary.15d65448e.0","@material/mwc-base":"0.15.0-canary.b2b088e7.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"c524f04088895074106127ef3584a2aeac09b189","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c524f04088895074106127ef3584a2aeac09b189/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c524f04088895074106127ef3584a2aeac09b189/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c524f04088895074106127ef3584a2aeac09b189/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c524f04088895074106127ef3584a2aeac09b189/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n*None*\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.15.0-canary.b2b088e7.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-+Q+JB4YZ7sf2xIMAmqHiar3y5szKv2bPfx03W/tiAE8PguhV/tjBAm2zccBtVbJjKgk3eq48LwWxaUKDIF4fVw==","shasum":"15ef0c75905960c813a1d18f0a24fe2e80a0cc29","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.15.0-canary.b2b088e7.0.tgz","fileCount":16,"unpackedSize":48144,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJerKOnCRA9TVsSAnZWagAAyPEP/iYNSbUFAFqEbtlnT2Xa\nWmP9kGgh8Ln9UDdC+FlUcap65uoJG8vL9D3ZQW28y1bkgvZkGHUlyBqkPlpy\n6hdiL3Y9YIk1s7vXaVa8SXoo2VcD3rj8KZWzcrM1p+QD9yFYx4+bPNOwkSX+\nCxqpnjxSokASYhNhtWFkCKu/OPh0EOfoKkUvqHVMeC4U+uEwUiC06yZhPdq9\n6L4MlIrt/m9IJk2viypJNAzOh6uCTdt6drXlPTFTPVnGqyeMEmw/8MIGQ1RY\nZUAl9f82d3KKRPtgy6aLePSsb2IeGyVCNq/5/kGwSzG96oHb8oOdLIAz5JNs\n+/ErDmWuI4+kuiQ17CD7nIqaEXKbsc6Lkf+pZlPvs2iItcvcg7MxFyA9XKOn\nMO7FyP3SyEqRE0WKKPPnvvofbQq8jRfNXwcEcaBw4Zb5ntLM6JY522eL2qYw\n5txhMRKkE2vOp84NxoK3bbjK6WrE98fQcAoFJdcylc/T4j6EeqYdoVYkT5bb\nO7Tm6/aNXM09h19uVEzL2i36nzeRjAcn7cgCk1hmwv/Z1B3t/bO2rj0mgkWB\nrWd+oRT6uN+Y17SIkeEGtrPd+plpNQ4JPbytBnFxK+HLhgp6EOdI5LeJ9edf\nTDgX+u5qnlmGwZTGVl2B8TylxMOkFW6SP0QZ+U7mIy522ctV3/qCGfsEhS0+\nk0T7\r\n=66L2\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCjB5JzK0Hui9PKR5WkjPKxFXCTHjrvFdOCKquqictlmgIgHnAtsMxPHpCUmPnJxBa/qTJaecDSE53Hi9cWlOHTfmM="}]},"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-formfield_0.15.0-canary.b2b088e7.0_1588372390817_0.4374345810373381"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.fdd8f69e.0":{"name":"@material/mwc-formfield","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-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/form-field":"=7.0.0-canary.142b1549e.0","@material/mwc-base":"0.15.0-canary.fdd8f69e.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"3888dcd836699affb59b98e4306c2ac03971ac4c","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3888dcd836699affb59b98e4306c2ac03971ac4c/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3888dcd836699affb59b98e4306c2ac03971ac4c/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3888dcd836699affb59b98e4306c2ac03971ac4c/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3888dcd836699affb59b98e4306c2ac03971ac4c/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n*None*\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.15.0-canary.fdd8f69e.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-qp7XSFrNoczOnT1XJ8bJx8glJoH1NJ7IrCvDaBFrje32gQyvWN84oSp38lKypbc3KWVQLRSdCC5izr4EA7vfMg==","shasum":"39f44ee8ade2fef2f96483ae5a63a45ec3fbd179","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.15.0-canary.fdd8f69e.0.tgz","fileCount":16,"unpackedSize":48144,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJerLvICRA9TVsSAnZWagAA2zYQAJxbNO69CeW+B/OHu8a/\nfFrCwjP6yl3aMGL835rV0I7YE2JzB6GoUfNwkj2zAtYjO4KQf2b93IBuatGt\n2JPV5wImF7gfhg+8QiagBYMdAdjRSI0qkkqDtU2ULiN3+rb2uK4fTi4nTwdE\nLpHotc//nm2TX1h8D6Nc16q1G3cWA5WideznBGBPM2cWos26JjISlMe4Yzto\n4hD8mWPQCNWqErfE2sSdDBa21atuGabuwEsyfMVQURr6uUyUt2FHREn2l763\nUEFwneMMJ5j0cApLfUX8mlWXN7/qXbjC503yp3YDqyZqCgWedqAQ1RhcfnRM\nOQszY5lRYaetZwlJ0iaHqBaPDxsXfWXBPPk/mFqsR9vkjBqDmM1xm+sf2wwS\nRp0hTFgVdJECNzQU9GIJwusG4QcgCJwvkGPtF28RNxcZTaw6h0tZEE4eZAJZ\nEidUB8uVTE/WN7FEJyAYVgviI8OyRqLJ/e6z4WIEW1Nw+4aR08W2fEv4YShM\nSy7s596kZlW+dq3C5BSfZuhgDkOVra7ePZpHcZ5gTrmma/6q0vtY4Vlf6qm1\nc86QB1UDtFKfxmZowHT9e3NCssPX/7s9+EZkRFAYJYMeTeDwaRNyhB6QaS5G\nPcVJPC3n/XuzUIWmTf2IaJaDuQvTUQYBL17yrpg1NIWMapN/1w4FnqrZQCDK\n5Me4\r\n=ZPnn\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBF/XV+dHX5jnk8OwRHql4l2jQ/BKLzfPlX0dtuJWlIBAiEAzuDGdaBDEIjPRXeU/9ZWD4+nVyWnFfHKIfz8I9XnLuE="}]},"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-formfield_0.15.0-canary.fdd8f69e.0_1588378568230_0.5425274141844949"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.730f45a8.0":{"name":"@material/mwc-formfield","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-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/form-field":"=7.0.0-canary.142b1549e.0","@material/mwc-base":"0.15.0-canary.730f45a8.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"e4604a16ebeca9fd76a4f742d3f936e83aaad680","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e4604a16ebeca9fd76a4f742d3f936e83aaad680/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e4604a16ebeca9fd76a4f742d3f936e83aaad680/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e4604a16ebeca9fd76a4f742d3f936e83aaad680/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e4604a16ebeca9fd76a4f742d3f936e83aaad680/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n*None*\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.15.0-canary.730f45a8.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-37hKq7MtgYiZpwayMXtQn4RRUnhi46cBl5yY0zH8Ws1k688kJfCSSBSwhyTcUqWCC6icf/onFsu4RSA+f9ZxJQ==","shasum":"282a42e1226b93be7671de14221df2219293c684","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.15.0-canary.730f45a8.0.tgz","fileCount":16,"unpackedSize":48144,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJery0vCRA9TVsSAnZWagAAAQwQAJVt6vHJruPvYreFm/f/\niwiljh+84WcD8uoerbKlAtUs6D9LN6JnkjsHxzABWIgAhXsk0aIzewxgFDWN\nghNO0ed3omf0c7QNMSB+mi3UOWlPO9OAA7B9tyM7+Ex48gHW8wxpsCICJ4qn\nzuXb4WJrsEr6NiRZENlDybh+0x706p+BbCNoZpqB56M6UJvSHIas3NfppTbI\n70LPavfy/kAThzQ8H32dbseWtgCRM0GVClJfpvvGMch316kgYjZkRJgaYlS8\nZKui+7qf+gosT1gHz+ttB2lFgk9bvCFevB/6rWRNn/E8aolrTo3yzgtF6Kbk\np+j4wsZjtydZ8IOc99b7fMaaK/iqLkkN+l9PghMc+i+tZV9du/SZ4AdQwOW3\nzUHFz3gCocjL/scKPEUYxpQjOoGZNGXghGzMD0cEBbybgAV4CtcOl+JnAUP6\nXgTLrXo9BRH8QC62NZKmQSWSVVN3LT1/BHVS5uUB7qTlV2vQ/0Kp3c4OiZ/H\ndnzSG+itP4e4rXJ6RlvAHhum3p07H66P6xl0nkhxmfrhdw/t4bWpw3Im4q6b\nOOcV/iOHEc7XMcYj9T30NUB93HujHE1vuemIWo2zKPfcuqjusl5sIvSubV+7\noTevuroUXWHzabWsxsNZzcQr6YxHPiaIb19Yv7Q9WS9+XkJ4brRhQa2ptazO\nCjgu\r\n=yn52\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEoA7owQ/i4VIBtP0L6KCLm4RhIMon5nrXoTfPfbzjP4AiABKrRBgvy4MPKY1hZSk3BoxLO56p084k7unLhKzkib5A=="}]},"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-formfield_0.15.0-canary.730f45a8.0_1588538671184_0.4714911597630955"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.4219bd20.0":{"name":"@material/mwc-formfield","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-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/form-field":"=7.0.0-canary.142b1549e.0","@material/mwc-base":"0.15.0-canary.4219bd20.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"b0ea0642a3b7fcfd78e46e68022be39ccf7b5e68","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b0ea0642a3b7fcfd78e46e68022be39ccf7b5e68/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b0ea0642a3b7fcfd78e46e68022be39ccf7b5e68/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b0ea0642a3b7fcfd78e46e68022be39ccf7b5e68/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b0ea0642a3b7fcfd78e46e68022be39ccf7b5e68/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n*None*\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.15.0-canary.4219bd20.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-UVAVo+ecceLvE3ISDnGvt/grVXVEcGT+gH/Bo1edd+fB9SoSxU9ji+Zr0xwm6MBHKwIuEU2fdlNrUg9vsjIHNA==","shasum":"621be1f735cf424dbe467fc02212824aba75a22d","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.15.0-canary.4219bd20.0.tgz","fileCount":16,"unpackedSize":48144,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJesKXUCRA9TVsSAnZWagAAvFEP/2nen8kUOUO7e35qYGCC\nuFDysq2Wslr3ODAB+62s7SrN7VrLDokdQDz7yFYJLUqdNy8a9eYn0IR7wQoC\nHcHrFSHoOhXrJJe0rgEt62fk8PSx78ccJxYL2VPgkkcQUKZCAJ2gJhpx8zCg\nfhf1m6hkXt45dLM3uT1HCa/CKIW3EDzIbdjbrPzYr4gAPNbwekOLUqzFZ7b2\ntfWtoGWq6ZvxAaoRYnPCdaEXhxHOqclsS+kWlyPItJaS9U/ycJyVtyKNS5z2\nUg63VBU8pDYnZ1dYYIY8rIl7MlFpGnD2x6/1/ooCXsgD8RPxTPQWIEsTwEcB\n52iZCScD7T4z+soSQlGBaWMeo1lAAMqgIl44Dp/UqQdyk4ORVHWy/1BFEbxH\njzm/deejyvxmy1TqIKymbsIqR2CZP6+tVVpMGW/sm57lKsv/so4y+2T0/tpx\n6xVwr6nVIc3FzIOqYwlIEzH7uTZk3ekif+MUmvI2wV4wy4w+Iv/jYBU8wikx\n6SMsnkXnVtBQg2CLEVpUbBovEGkhc655etf4RU9IlVM8JncgV6jsGB9wk4+D\nCRkuuYyzbWpY3/vTyewjzsz2M9x5eNqnrWwOEWQ9mub8QuVi3GjQ9fYD7oOk\nH/QvfJM0lIVb2MK+U7zeAKPeLRAdSxYpoGDIJQ4SHc7LMUdR/4E1gx55iM16\nqGba\r\n=t8mD\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHywAvSbzRiOKcQxWZR12N6zrkUUtpS0CcwMezjuYtCUAiEArEqpL1QhGCIlqmEnqmFgI4a8fFz6R/e5xhRxNPRlO1o="}]},"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-formfield_0.15.0-canary.4219bd20.0_1588635091656_0.42853860998787097"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.1d83cf6d.0":{"name":"@material/mwc-formfield","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-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/form-field":"=7.0.0-canary.03dec929e.0","@material/mwc-base":"0.15.0-canary.1d83cf6d.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"72586b3b03638e183dfd5440f006b405468a37d1","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/72586b3b03638e183dfd5440f006b405468a37d1/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/72586b3b03638e183dfd5440f006b405468a37d1/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/72586b3b03638e183dfd5440f006b405468a37d1/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/72586b3b03638e183dfd5440f006b405468a37d1/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n*None*\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.15.0-canary.1d83cf6d.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-cLXx1IesES6LZZJOB9OscDthVIi75TkSIiy6GN53DCGADuqtbXsuWFzEZa47IdhuU+l5DwN6q+qUhLR+RjLrdA==","shasum":"0cb95eba58f01000d249aeda82636e4a1bf296e1","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.15.0-canary.1d83cf6d.0.tgz","fileCount":16,"unpackedSize":48144,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJesZ5QCRA9TVsSAnZWagAAosYP/iO7t7tSlyjE18UlvhRC\nkZZ2B1yDbhBpXqzH4IdBO0bdAJFMkjjux+w94RDaEvQb8svlz2yAbvIc/mkc\nu8WAsh+q5pz02xlsAAoItrMirj3PQQSh1wGPHInBFPoMMlOxBGeUpWeGwjsY\nyQaaZVEqNGeheFluDANMTTUqwblJIBEmpoUh0d1GwoTiEXCPKt9c+h5FyDD+\nFBzrPHgX8mYnQXKZWUs/x5bQ2qZbBLvAb1PvN2yjhruyXFElqdJdBRC7kjy8\n4uDmyAaou1lAWhLNRQaEqwFKcnBpPtSn2yxbuaDF7/ahp6yVhRzD/OLx8UJe\nWGuc0E37LazZmr1peG+PYHOD+lLwYvwwr5d9vVpnqyEfAXbo/Uc4kTyJB12D\nKFARtLv4uHaOInZFFzOLTOSbqNNpUkZtCo87mdAr43SV4kBdcPIzwDzaeuVl\nOolHdzY+sDdm6evGtwr29UXAwoSm6SyVXtdVU/FkZm3iUZ6aFhsZJQEXSKcn\nwgxNuUWGwfKCUrbLnfgtPwILiMR6xv5xjcqqyKUNMIFVS2TGQpbA22WTDu1z\no7Ht4nDoHdUH2mQ1uyrkPqxlB6boaAIJyHfDeRgKAh/04W6OwmMbIpFx3Cgm\n3caGY4lC4JeA2MGlBRVmCM3gC+2W6B89NKbY/vfQKaIQkOqTj39mwwz44Tnb\nOOQu\r\n=jY9Z\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDRvICL/C9Gg1neS5ZZbU5mjqo2HMryvzF5Lr+D+IbFqwIgQa+58xW2h1VeqWDuQ5DpMoXUoVEdmnl5Nij8EGvPKdY="}]},"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-formfield_0.15.0-canary.1d83cf6d.0_1588698703913_0.07410778265987839"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.3bfc63aa.0":{"name":"@material/mwc-formfield","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-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/form-field":"=7.0.0-canary.d92d8c93e.0","@material/mwc-base":"0.15.0-canary.3bfc63aa.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"00c84910ddd746dddbb2d651a4fe51c784dc78b1","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/00c84910ddd746dddbb2d651a4fe51c784dc78b1/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/00c84910ddd746dddbb2d651a4fe51c784dc78b1/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/00c84910ddd746dddbb2d651a4fe51c784dc78b1/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/00c84910ddd746dddbb2d651a4fe51c784dc78b1/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n*None*\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.15.0-canary.3bfc63aa.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-KgrW32snuPDcg0m+qINJQWLCyyQv70NIXePE+3u3qTFxv0ZbgzLY1ndJeYvBkhd4oF5X+S+qVCmWZWmeF5C+2Q==","shasum":"18c29bfb66cf78456e4de6972368e8b6ca1be86c","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.15.0-canary.3bfc63aa.0.tgz","fileCount":16,"unpackedSize":48144,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJesazACRA9TVsSAnZWagAA42AP/ApOJSojm4pXTGuYTzXz\nrkUObecSpqLa/6rELM8NVVeQqsBlweELUGaUqHmDdEmFjNZuf3Vc1YZGXHF4\ndEeEqfLwHPNER72YUUJJXFjKbQyTZhMk3A7I/vD3DzNmk1k5leCCeUlbJonv\nQHYZ+udqbmzPG5KCDFRsnZQvEVzgJPn+/ZT04/fcelu+XcdO29mR7kdPH0eG\no3wk1kxBhLJOsbznwheiAyrZ9BBwjEtWcHa1vz004o6Ip7WbNwfxoNfa5N/H\nGClSfevA3WdOyhUjVO8zKhk/UPx1ZtviAOb+1czZJxBltNBxeZI/hWxsCu/t\n7D6d1fyUNPBe/JYYHEqz3WFcgFNM3wUX55ATmZcT39IqOdYp6340WSgo436a\nSJvcnTTr9wUqd/mxnoPg20gcP2NbBx8FZoNXD1mYolFBc8I8pPkGGiLn0QSv\nYCRzmJhKOKKE9lfOBtlXoILv+ogCFJ9ro6xveY6bHgdCKp8Q1ddAFzMF0m4C\nM/D1jwFw+AQDcH6FaEtvLHa3u1ktGukJdE6/0omjzTz9Uae0uhph8pLGoVuj\nulocfwqyN1IJVebekKO38sk932UHK3kbJt/DmJRqBAbPXz4HZPv6tNIMTt5Z\nUeOaItoDmIzpJCk76NnQRW4oA+RU3+09W55mRcWEULO8dTd1fKAi4ORWDO+h\nH0F3\r\n=7VUa\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICG3oyFwLXrLVXlnr0dTUJp/2OI1PnkXspFIIWGH79XjAiBVKtCXOFXv1+hlIJSVi5xHO7CWilYEXa9gNeP3dGPqvQ=="}]},"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-formfield_0.15.0-canary.3bfc63aa.0_1588702399653_0.18653739784774226"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0":{"name":"@material/mwc-formfield","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-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/form-field":"=7.0.0-canary.d92d8c93e.0","@material/mwc-base":"^0.15.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"749d0b52cf7911d260027fba833a8a291177ad32","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.15.0","_nodeVersion":"10.17.0","_npmVersion":"lerna/3.20.2/node@v10.17.0+x64 (darwin)","dist":{"integrity":"sha512-LLzG9/35LrHW1rx5pVUmOmpvSZRw8yD3H7HkQvYeTUbEKP7quRj7v+VMFRQkvznYIWMqEudgTFhNyUAD9DrUPQ==","shasum":"ff06babe3c6aa522e33daf2e9dc507f18896a819","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.15.0.tgz","fileCount":16,"unpackedSize":48109,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJesepTCRA9TVsSAnZWagAA7jsP/3zNmIt1UNJG+927G0li\n9u1nMPE/7H0wBZkndPKiuhjyJUnB7232XSrOO641VyMegegHSHdBEBq/R7LR\nkr9NIB7BaruRUVN9SQwA5pzQvDDmbFcZpDFayyEL0DDVMFAkgRydmV8yMQdT\n1nWeSQW1dzTWfRIjqYa/vd74dCNtcI/TX7VxEqCCJvr5e3EhXAbiBccBHpEt\nQ6OQiiAV31MsuMz5pBTzlDgn0psGCyGywtseDUnzZiyugfHO/JRcK4mtAbEO\nmuC8dGbu3b05aAtfOnYLE5mMmsQQnjyKjDvcv1gTy/uq56BTeelRDdP8MwiO\n5lB4q5zK+t5YcMumj4W6WPAVKSoSYzVd8E8NF8ixnPJKZTROW4q1uC4LqoY5\nFsduRBRMFou03KePcmiq/yZGCibN9Ln8wbQEX0B5IHD7FrYVxN69V4wmEw75\nmKT4CrNIYyoTtA6RPONcVp6J4g6LWVMqRle1vtOk9vLyHIeZFBb7cxC6gMeU\n7Cv/TgkBXOHmGoKPzKCb1RjgBhNalWpXoajwV3E/40klK3CNYQYWPsuriDwp\n6/ggH9ZUMbhMWArQJwPpRj09DQZBNiFWqCtk8tSI5l2KKc3ZOaRZsnpbZNa/\nE7X0Wl5+QebyWN31uFz+f6GZnRZDnd0ZfuTpoAa5Cy1OnzNiaZezLgg6JwqO\n8M/u\r\n=I/R1\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAMSDXGu0nMY9owmYh5A8jY/52gJMd3asBOe42YeAa+3AiAiYVON+G4/fxECko+I24TkwqA/KHnzJXTBLOsus2Y14w=="}]},"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-formfield_0.15.0_1588718163534_0.8681637077543629"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.1f4e3d1c.0":{"name":"@material/mwc-formfield","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-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/form-field":"=7.0.0-canary.8135cc085.0","@material/mwc-base":"0.16.0-canary.1f4e3d1c.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"cddafa9ea64276d2774eca727578ad51fda9c366","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/cddafa9ea64276d2774eca727578ad51fda9c366/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/cddafa9ea64276d2774eca727578ad51fda9c366/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/cddafa9ea64276d2774eca727578ad51fda9c366/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/cddafa9ea64276d2774eca727578ad51fda9c366/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n*None*\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.16.0-canary.1f4e3d1c.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-he5PvR0XAVzkvTIQu5JHnCuJoYMLPHzSuERHXymQguqN3NNgKPTMd9eKqXhRegsyNkLMIMxXe57NMX0qyyu1cw==","shasum":"3f26525b6f8db98d9f3a3f2f3af5b07974941172","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.16.0-canary.1f4e3d1c.0.tgz","fileCount":16,"unpackedSize":48144,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeszRUCRA9TVsSAnZWagAAJDYP/j82k9GMTMJFv/FGCs2q\nNC7F7LS80opHRz0HXZ8iMKKxuVYuGfQED95g07wLYfX2ZlMRw5VtKLAqZZru\nhyxNOlacVpEXCPTyNN49/9IYPI5klPtPH/HF+SYBZZITniVERaudx1lX6W0g\nahJ/droMk0iZgQZj11d/wkL80yy3LUMxETxP8Qvd7qnoqZdkxKxDzK60PRNW\nmSDa+K19n5meUGOpMntwkDOINmzMUkLPIOQ5UAY/gYZ+jSBC3ztIQVc31oy0\nCjwvTsqdenoKKhKSAbfkOe6pjoGVyZOObni8gPMBxWkukmXxYZlBYYXq+A3W\nOSsM7NdqXBtIq8Su/8WiJBW6ph72HPDatNq3ZcnNgsSP4xEtjtG53iAOwcS9\nPtt3kzBAdsq+/aN7Aq6WxRiAvHtdCEsUG0aBGZoeNCiDL1dptX0p0yfR8Aik\nZ39o9b8PpcJtAcInXJQSzaLbKtvsJMLbd0jcMUS/uhsTp0PeTLidPYPY/+Ii\nyanoRWGbI91LRAEzJl+WRCDazz6eCpvm9z4yd0QbpGQKVy7UBpoOfVMywNWb\n7GTXFGkGDBNja16IpWYiB7l+7fx7Z5y1jmoooPYs2TYxiBG4o2kWLB/ImJjm\nBSa1V21dZFC+HCzheZsTzs0hqP9N2YVyIzQ0Ch8vTV1GAHEHJNbZyJvLpjSf\ndr50\r\n=cNA2\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDJOHO1H0KQir9MUXtRqa8mcYrHQg9xNP/KVgLjW3ANIAiAjGwMfIF/v9Tvbe4h6qv4KGOAP05XH6I409sbpq/XWNg=="}]},"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-formfield_0.16.0-canary.1f4e3d1c.0_1588802644093_0.9379554722292098"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.bc8759d5.0":{"name":"@material/mwc-formfield","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-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/form-field":"=7.0.0-canary.f83e00898.0","@material/mwc-base":"0.16.0-canary.bc8759d5.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"bd62828e2f7b66a127bc0ab165f32bf39b79fb0b","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/bd62828e2f7b66a127bc0ab165f32bf39b79fb0b/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/bd62828e2f7b66a127bc0ab165f32bf39b79fb0b/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/bd62828e2f7b66a127bc0ab165f32bf39b79fb0b/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/bd62828e2f7b66a127bc0ab165f32bf39b79fb0b/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n*None*\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.16.0-canary.bc8759d5.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-fn9J7H3yU2DBBVNccD62r2SRCdSGp7lMn8fYhOX+ZapZw+H0X+KPFTSH7QG9982H9qlYZFc/3fintPXfLLm08w==","shasum":"2d30f9d13da4a948a10165580c3301e86433d87f","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.16.0-canary.bc8759d5.0.tgz","fileCount":16,"unpackedSize":48144,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJetJZKCRA9TVsSAnZWagAAx/sP/2v6dSADMA8ZIfDRd6rI\nEGklrfCYT94FqoibBahI6fh9CTcuMy6pQJnKMhT3fxcFqCvqSPRjPsvrKQr9\n0rqUTMtYkxkHhWpPVNUfayLqxro+AAMgCFdmYZNtLr/LCziEFPdEdVffDWqz\neLbBArqJ2YL+1lOAQkGId5TqGUmyDSZJMXW09Hb+KEZIIRPF9G0o6EZeo0FD\n6+K6ZLWr9Su1vi/33HWV8c8Z8Utcj+t5T7W5wQEn1yG22LxHKXuBCKTttIxN\n6Tilto0iU3kyHqbLYeSiu+Mpo5S2Jf23+P/+xEX4WI69MTzITK1y7w9DDMN1\nGLtzM0QiWxbsw6jMpBfz5FI+A00GQcNMW/nXKTrPuhopLEtqtCoc8o/ZnKcP\nOHCL17GMivO4l/Jshvg5I5pkKnK/uIBXxnXwSskk1lmOwgitOc3GYzgVAV5q\nEIq1dLVT5FYO4xY4KewJ+ggSrUt9gWKLFdB1Bn1Ipc4xCioy1YkiTXBxECTP\ndMG36YMMX0CFSUV0bR42jQoiWr6aG4rjTJJlIKWSgPr7gXl2EfyS2Cg5t9Ik\nRjHkw8WTqmeBPgEp7xLDk+WaOS5K38CiZv+StE93aYOabXcJ4yuY4bR/FixS\n1TZHzksmbPRP573sQ7qg2uryUYJLZn72W7pKNUAreoE784madV9fL00YY6x6\nolNi\r\n=vNly\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEZ+3Ts5q9IcB7z0ntIU8VqW7qlhyhbIZHLWIejPJNE0AiEAqc3k8kw2zcmXOzBV8xpFdJLI+Jk/yJHMpqgsmGGmkdk="}]},"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-formfield_0.16.0-canary.bc8759d5.0_1588893258233_0.8076178809487229"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.d1379acf.0":{"name":"@material/mwc-formfield","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-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/form-field":"=7.0.0-canary.f83e00898.0","@material/mwc-base":"0.16.0-canary.d1379acf.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"7b322d565d0668b9f1c4054abde8984cdba4ee4d","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7b322d565d0668b9f1c4054abde8984cdba4ee4d/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7b322d565d0668b9f1c4054abde8984cdba4ee4d/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7b322d565d0668b9f1c4054abde8984cdba4ee4d/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7b322d565d0668b9f1c4054abde8984cdba4ee4d/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n*None*\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.16.0-canary.d1379acf.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-1Hj8n5Fot1f1EKxLAnrlGfF041Is/4jR9npP5mNRu6ohAA2DOZZs6M/i1HMaHhKuFfDG2OmUm7zuttYwbWspgQ==","shasum":"c566ecf41b36a88c425fdd68daa8025b9b1af936","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.16.0-canary.d1379acf.0.tgz","fileCount":16,"unpackedSize":48243,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJetZmhCRA9TVsSAnZWagAA0lkP/1iunTrmgRy9nzXTYc1W\noV4zgObvLx8Gp7Qa8yiuqs8pLs5nTqIvQ9HyGHAkFjU21UlUACdcA00iTQdE\n3j1rkALbXEEVa+U8TCKgMYz0xf3RONVTUK9RIFer5OI5zU+vSdDgdpVQE1gY\naDB4tq7f4nI9zywOK1Fmc2tr5tqsMxB0UFQOGvs7kiN5yEbHywj+KfPAw7nH\nMUSkzlAJnf75eZ9/KHszZsJw2vwaixaViiX6ooc9ogSr9zPu3d6ixXQR7Y0f\nhzVyD/DogUoVCIUKIJxRwlsTtN24BdbM+ad63js66Ehc8gSwYov0NytUNtp6\nqiTE9KA57Qlhw7UnEyKALPuOzlr3FyWydEfUJNpGni3CL7S41WV5DvH9005d\n/y9sQy/z8KAcH4ssQbel8rAtxGy+LK9fMDVz7lrPJkejLQ3eEmNyqIXa/PF1\n0oa2jCOqQ7ydOzoV62++FjsOo7Sk9U+6RIZHH26DF3AwXZOuxaP2c7hvdymX\nG1FqCXmJRYLFr/yHOLhma5SNSoN033Bv7C2ft8m66K+l0jgMUmcGg5V/6XDA\nbvb5OamsuqLVgl5RQvwtls8k4rwVkogEmxYbLS5xGulMUVnidg5f8TYrlG7J\ncUZzisByOq+Dca9tXj443em2Vi8LVZZXsuJkvRLmJCnOrKa3UW0aF6BDZdXM\nkhvS\r\n=NmNF\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBXRyFUOO5bC+AVWqYtLYlOOkFIDEbIaZMlJMjFC62iTAiEA3q1op3Cfm/+YSF+qBiS1OIe6KT+xQpSFHTlgxlH9rao="}]},"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-formfield_0.16.0-canary.d1379acf.0_1588959649107_0.6005142579158429"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.58d51fc0.0":{"name":"@material/mwc-formfield","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-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/form-field":"=7.0.0-canary.047e6b337.0","@material/mwc-base":"0.16.0-canary.58d51fc0.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"095d9f72ab7ca9994ffd376ac6b1b0daa4c99011","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/095d9f72ab7ca9994ffd376ac6b1b0daa4c99011/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/095d9f72ab7ca9994ffd376ac6b1b0daa4c99011/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/095d9f72ab7ca9994ffd376ac6b1b0daa4c99011/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/095d9f72ab7ca9994ffd376ac6b1b0daa4c99011/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n*None*\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.16.0-canary.58d51fc0.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-UxpWGFVOZJYhhVUK/u87hvxKo+At7B18ZM4kaZis391cFQ1pS7IkHHjTXai3EFv0xeq3H4nWrUsbSph31c34fA==","shasum":"493fbd4d20d444beb84ec9435a117894f8cdf314","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.16.0-canary.58d51fc0.0.tgz","fileCount":16,"unpackedSize":48243,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJetbAzCRA9TVsSAnZWagAA1gkP/1bHR1i8MT5LT6QjGzhx\noem0jW+wY6pkOBG2JBPmUt06aeiu0Gi8fBoUEyx+3FTy97V3S3hKmBeRvTuC\nhSaKZ2VbzhmhRefhEXML4klhuR/HJABZaMa9eepia4g3loHVUGSDkIrO0dNb\nD1v/8E6jJgRRVSASgRSUz5jwqW7jKj6NoPYihuk/BjWNiZGZS3OzPjGmT4hu\niBUvFrGeAhr6dAD+2O/yICM3r6mBzrJb2cXOQlhJPVb0x8vKf+fUnFdw8knP\nlWkPzhh5dOUBGvCmI+uyXUgvpWGsvidegpC4H6F02DZWwTWr3/FKObc2Kwad\nrRPI4KlSrKx7xDMJcbc85Ku5MvPjSJp/w2EBVU/GYokhNWu4zt5NX//BqmVa\nV3xEmzCWnq0ydGdpUrTDftvBwC6GTZst6D6n3crKWb7HeHUDctE9cyxdW4X3\nGP653A9VlDVH3+Ftv/oOyq6ZNrJdoG8llryWAxCuqcuMUZI9VjvH7UtJ9qcY\n5pK977TgZoWnI6HcmwJf9BB1cbfDzm7/hkb1t3XT7wejGgUFuhLATOh3Snr4\nXwUrJhhozPTVzFpzclbM3dwdWVRRS9nA7NcENqfsrWHZiX5WmmRcG/dgob94\nx2dRvX3wM37eD7vEhi8K7M7Skg8XPlWxkjuawtCl0a9pmIdfRYLdO7cbgTDE\n0ChM\r\n=WxUR\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDWCwyyxoIrAINw03Vj0vi26SlzS/1m7tfSyXoz0lZHJwIhAKRasHha5cadOmuMOzm/1sQbehSByWk8R0hFEksCM0DG"}]},"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-formfield_0.16.0-canary.58d51fc0.0_1588965427098_0.01803758283110235"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.588062d7.0":{"name":"@material/mwc-formfield","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-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/form-field":"=7.0.0-canary.119e21426.0","@material/mwc-base":"0.16.0-canary.588062d7.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"1b66fe2af3ce7c18a07562e7ad2469074135eec3","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1b66fe2af3ce7c18a07562e7ad2469074135eec3/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1b66fe2af3ce7c18a07562e7ad2469074135eec3/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1b66fe2af3ce7c18a07562e7ad2469074135eec3/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1b66fe2af3ce7c18a07562e7ad2469074135eec3/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n*None*\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.16.0-canary.588062d7.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-NnpOfYWHp0Q5xCoSQjptDL/5pFEnKmOdkdezDZnqltV4hfpb28fw6nPErggv3G4J0upHDTwP0ulkJYBz7Ekn2A==","shasum":"15e0512d63c48a27c20ee49a8d48d9f8dfab1770","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.16.0-canary.588062d7.0.tgz","fileCount":16,"unpackedSize":48243,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJetc2/CRA9TVsSAnZWagAAR+AP/jA+Y5mTe9p7zVgodrpm\nMVFsYz35PEqu6fOxHZdPDHl1nyu5cftuCYafA+/4SjLmd19zv9BXb+6oMpr9\nAyYoGajgsSB1MD/pTAsP9Hw7SThlgF6ogx8StYtQ4jx/I2DOGKwAlLIctHwJ\n8pzr3m2ss3LFedkVq38dqQP+RaYZRsVtqXcdLbdV5IaY2HX87f7P5neGmctm\nHDq05e3UIVGILy6AHsZqplqd2yH2U7gq4cPw4IjgAP+JnnH8nakwdNQbC1MA\nZ/PKV7H4CE5OHvjTHMsRhvd3KEqGe71WsrbLfkxkb23DwipCC2WbuUjjCReU\nGlg9ZD43jJMV5QGeZwhU8x0mHW25aCfNgMtrjtXdoVFfs0jNZOxrgY4dsxOx\nz3TBqR54oqRXieCBdjEEs47G60vXyBqLYodpPNzotjxxSMCKavoUSUYDEQmh\nqKmArCsoiG/oJFAWo6Mom+mMvEOKYxQWVA43w74c2TmZLQw2dyTqwVlK3Msi\nhGnCebS7diufwjCQPSSheXNFSVJ127ide0XHYiEqrsUTVq2V4S283pUYydfK\nooDTiUC9oRPgQIijp3UYr7apSaatrIstcwhBDzqZrb9mMAuSfTLYWm1UgJ3t\nj0kVQapzKRNUMjTbmAaZPrOYeBfrgnuDLUQGGuOy5MGIkEhDrBQOsw/o9E9x\nAJMj\r\n=+yhr\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDfDgKCTnf9rFMh6kwtunBZDjdAGl/0BICjshZ5EEHbaAiB0Vul1onoND95saUXuHNGkQQAUvPYAUjsxtcqU+PYIuA=="}]},"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-formfield_0.16.0-canary.588062d7.0_1588972991041_0.2884307281767784"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.fa21f639.0":{"name":"@material/mwc-formfield","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-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/form-field":"=7.0.0-canary.a5aeb3001.0","@material/mwc-base":"0.16.0-canary.fa21f639.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"e20cc975825eb5a02be956c28db1cebc2f8908c0","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e20cc975825eb5a02be956c28db1cebc2f8908c0/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e20cc975825eb5a02be956c28db1cebc2f8908c0/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e20cc975825eb5a02be956c28db1cebc2f8908c0/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e20cc975825eb5a02be956c28db1cebc2f8908c0/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n*None*\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.16.0-canary.fa21f639.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-YfnL3cQ+LPmHlC9CKf+NPuK7toKArVI3PBguHvAt64i7a+LexX1JvxNBabdCGgHQ5Wzut7S72M1pkjGuE+cYjA==","shasum":"07386a7f5bff99e7b9e31b81912a1ca8fde46539","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.16.0-canary.fa21f639.0.tgz","fileCount":16,"unpackedSize":48243,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeuYt/CRA9TVsSAnZWagAAW1QP/RAFWef2+B+CpqtMfjxW\nimMmyectqBtUnoWjMplNjAdZc5xo9vNNOiVSK75QmvdDu3SynEg90whgK4pu\nec7+p1V0o8cNhmqQVElvA/671II+WybyKus2DF4HocUF+HdyHo7YbXqWb/Cd\nW5UiyxbbpT9lREEruKVkvzwY8n53pNjc9wv7OWtToZHrLzx4c5nFIn+N/owt\nHKXkll2ESFObdi/4KGoNZnjQ3O8jOHchwUMP/KEmGuHBF8XfyNsMGuvy2+n3\n064qF5+U3q6cQijluJYUrUXUdMZk1hI/xzX1G7nAQkq+ZL9xw+l7wcsQYxux\nI2Gy7Ht91Xe0xgKiO5oER9e2VLhCHFgGAJbVxjFtAjFxGBTRZxHbpK+are9K\n5IqySW3k3oy2FlPYe+5YVgGqbgM9RhRie7Q9T/GySuNiWH6BN5HN9mQ/Hz18\n5rD2Rk9S3cAgjlXWjEXiHzDWD1EdZ9Dvji5uuxn7WMZS1MMIhdBHShG8j/hA\nKLDHdFBW1/0Uc5YuydES1SoobWLrjs2e9AmU8cMu4bwKgPtjHQCHSdxIkNad\n+GaecMHWCd4zYIJ+WtljkEaUyDFi6bUyMhGVq871Szh94MdkA8VV7rdJ6Ia8\nHicNzdbsSon/Z9Qs3mbblLgEV7LVSBwqCLxtDOuCVGo8yVnTI1ZQxWemzN0c\nyBlV\r\n=oYhG\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEbIAP/EhWYLlk+C0npwH26KY49e3hoCmcuZQApneAiYAiEA+2G4oTHkWd5hRsIUg47TLcMko4jt28q8bFvauIVSiwE="}]},"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-formfield_0.16.0-canary.fa21f639.0_1589218175243_0.537590118788571"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.2772c509.0":{"name":"@material/mwc-formfield","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-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/form-field":"=7.0.0-canary.a5aeb3001.0","@material/mwc-base":"0.16.0-canary.2772c509.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"757bcaf3dfdfbcc62a5b2990c87cd91f80fbdd1b","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/757bcaf3dfdfbcc62a5b2990c87cd91f80fbdd1b/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/757bcaf3dfdfbcc62a5b2990c87cd91f80fbdd1b/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/757bcaf3dfdfbcc62a5b2990c87cd91f80fbdd1b/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/757bcaf3dfdfbcc62a5b2990c87cd91f80fbdd1b/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n*None*\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.16.0-canary.2772c509.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-U319lZoDMUyeI9MBWOm3KVGUiOfHFkoEZRe+xWmlARjFtqb9WEvAHJSW1p+7KxKKp6uTCZF046rHeVV7TQ2NAA==","shasum":"f217d63aac2dfddfafb1204b00ab56585e21e44d","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.16.0-canary.2772c509.0.tgz","fileCount":16,"unpackedSize":48243,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeuZsfCRA9TVsSAnZWagAAPd0QAJrY+pGMKzWSNne9nrtU\nPXZAVynLpuAra4jRcSxD5iCaDl74TPZbQV8kHPiqpYt6oq4XvX2Sn7TdC5HQ\nhVJagLKZOkZoRd2JDSxpy/zjTZ44zmqpU/cSgXb6no8UMT+YycRHLcKB5LdG\n55UrOJ4FN93zutVZxHk69oS0NppS8jnDYkIV/5+59FBgkp9SDiT5EHgJiuSb\n6sRyGGAXGOmwuzLonaD2Q2a0WCaBVk7qbmrFnzSAEAxdsM6I1y1ks/zCsWJY\ndTeNRYlPjPf6Iz7zO9IXU3CUzZHIyh6Efr++l0NQc29H6kdokwZzxZIfEDa7\nzVw/x9zJdFEyAnmtDZL6vgwYSzriPw5Es5fYXSXA88xLfnvh2aHr7Hlzq55T\nIAWOENSmft3HoVgUwYSj7CtEPwwx8wKYVJpqobd4Tt4unBYnR1shpnSxiWGY\nHNq60IWqAvnR5kNK9wD+gJN2AKrZcGv455io3MbzaFgActVXOlmu8h7oG5X4\nUUz5yxPCoiVJKbrHshQcw7GGtkCtcfrOc0Ta597vYlvfPtlzJLfUpHq3aFNA\nEp9RGHh8+sg7GDGuHniynF2hxWwSRK8bAsr7qpJwpLl3BHWrgqmkvuvTkNtf\nvRn1rLZcZBFSJh4f0ZVrQJjUKOglHD7trYj+b2c+wLHrgUUHqVZgChBVLg/3\nIHyG\r\n=K74Q\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD0sDooX9Ko49fEdvFFFOYBqIBiTX8oLUlU3bAW3HHnSQIhAOQxNuk6ZP1AgR92Llg4REz0+cWYOheaQKfog/T9crjA"}]},"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-formfield_0.16.0-canary.2772c509.0_1589222175281_0.016112987761387698"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.fc4796d5.0":{"name":"@material/mwc-formfield","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-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/form-field":"=7.0.0-canary.a5aeb3001.0","@material/mwc-base":"0.16.0-canary.fc4796d5.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"ddd82bfd80666625c1dcd7c92fe79f5de6f84657","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ddd82bfd80666625c1dcd7c92fe79f5de6f84657/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ddd82bfd80666625c1dcd7c92fe79f5de6f84657/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ddd82bfd80666625c1dcd7c92fe79f5de6f84657/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ddd82bfd80666625c1dcd7c92fe79f5de6f84657/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n*None*\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.16.0-canary.fc4796d5.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-XisYqIKv6XF+sxjz3cFMyFKZDo/0uM3nuAxSvk48GrAghFUrySO+7ZMxEXbrupjMVP7Y+j4Q/mhgT4yZYFAQtQ==","shasum":"775fa3388bbd1f1b301a950d90afe1e19d525432","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.16.0-canary.fc4796d5.0.tgz","fileCount":16,"unpackedSize":48243,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeua/VCRA9TVsSAnZWagAAQ7wP/jqBtkhfcZztIA/cZHU/\ns58FQMayI2KjOBI6J6pWSutIQ4/FbfM608SEgAXmPyMP2Qq7CRJxPFYiSgUR\nBSfd6GpifUp47b1D18Jcyn0ykVmudZpM0e681bZPkebP+xF0kgDYEfOiXlQh\nMPMUzpZiEQQe05EENizIhbK8GjP7LyV7FpXl8WV7ft5YIQJKrb2PZB5jGbOn\nkJQJNgV7n1gcoaDYkDr6MRLdHekMGWuGC20YLA+XRQuZ59/6pCyJCa195/fM\nwkbhAkAGyC3cLW2WXNBlSBh6h9T8bZOL5TX4ZR4jo4I8pVD9wJG/pvajjHCB\ntRS1AVh8srsFK7RjqBjtAFEhFJbwOyv7HgZ7AWSvenyhn4cyOpy0Hf5CrFqP\nxIOFVhxxgtElUMkepb1Bn5FOPpwmOEYBIOSx/zSezgvk/5sOVTLMDudhN6/T\nlKQ/Nru4MZhwNqT9QKmQerE+pUTfSaTZQNfLGnaBw7KcYV/93Uu7F7Rfakki\nZwUQusbEZckxtQHaYuY+NGCAJ/AVFOPAqsF1IlGZYVko1GffgdslqDQkm/6I\nQfAAQX7qZuqICdsjeKciAYIPJ4fMEpZwmKCT4LLjzSPl8D7L58DTtLRyBgEy\nR24O1AKOx1SeQnWlRv4L8sH0WYxnlGv/MKlZ79CaISkvRIbbZtdP3yI4VUg5\nNgak\r\n=E7He\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDenp3I1RyFWYdv+PoucfAZs2fxyVUcQCThdlu6Dm9g7gIge2UFUE42xRiLlAxfPWyyDgG9XbflmjczPOGzeOr4Hu0="}]},"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-formfield_0.16.0-canary.fc4796d5.0_1589227474382_0.4139319943914501"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.0d1c5f2c.0":{"name":"@material/mwc-formfield","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-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/form-field":"=7.0.0-canary.ed52af767.0","@material/mwc-base":"0.16.0-canary.0d1c5f2c.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"56733523245d57fa1e6ebe3caa22ef89bc95e8d2","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/56733523245d57fa1e6ebe3caa22ef89bc95e8d2/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/56733523245d57fa1e6ebe3caa22ef89bc95e8d2/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/56733523245d57fa1e6ebe3caa22ef89bc95e8d2/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/56733523245d57fa1e6ebe3caa22ef89bc95e8d2/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n*None*\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.16.0-canary.0d1c5f2c.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-LL4AE9UA6SZq9OxIuTi9eXWJ/qCqSqkwAZ5K5YR9hvMh+bcwGNKvaQJbgW9rt1cwSyF2lIG179GqOjIPYXVKrA==","shasum":"96787da1157f327ae298dda792a83d4c27402c42","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.16.0-canary.0d1c5f2c.0.tgz","fileCount":16,"unpackedSize":48243,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeucFaCRA9TVsSAnZWagAAS4EP/AtaBVDPCkOA3WKOeZ0k\nRkLHznPA9shtxwU07/9wYmsXiCyq69AUlHksZVmJ0L62hhXB7CNxzWYp3rtv\nIYqmjoqxFaL8K0i3fjBXdQ4OaMcisx/OqD1f3PKy0YKMYK68mOlrLVG3VaW3\nBxsQBePiPuX/nkOQBkBum1/9rzX1jnNHaRgxWqSfAxBmhRCf2LJFZ6mI+j3z\nDEV79tSri79VVs0GXP6qPTy6muTc/Qgn4hDT0RVbc9vCJ3knwtKRy4czS7M0\n/G8iQeyXu03EWQMnS2rIyIv/zOjiLdU0TogMDdw2NIQXV//sVXTKmu5gRHqX\nGE0dyD17AkMZyBWBUwWB9+YRm055fZ0RHhFBqKP2JlFBe0EvrWEGEbt+ckn7\nrVhXXP020nNbcEFuzTC+U6ht5CPSaR/P5eFnuYqoHnUghUM1v8bfhklDLauk\nboqByOJKpKwAd0gLT3ttGXNA0Rr7z/xS7Fd0MyT60h4P8/Tb1BTDUAYt9//s\n71chD0bdH9U7mAu2QpTWvFwKkgGtZs0GGzzg4nWbtaD6Agd/T9vPwi3GsG/k\nj/RIIRzMIyaMDyiJkRymkg04yayExlb7WxVw1wCxjOEHAmB+zykMDwjaafHD\n29znU1ZAK2aCk0iZIhvPzJJG7FT82TVfcabjZMfwIdDFFHYv7RmjfWXiT+5K\ndWp2\r\n=LNTV\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGQKcXlqCmntystbSdiVHn239Du3/gZ7PM4M3BxRqzuRAiEA+NjZmH0pEqa6ODZvfjqjDt2NTQWeFjLo6JlDyaMaMRc="}]},"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-formfield_0.16.0-canary.0d1c5f2c.0_1589231962045_0.13686847835959814"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.d083d93a.0":{"name":"@material/mwc-formfield","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-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/form-field":"=7.0.0-canary.058cfd23c.0","@material/mwc-base":"0.16.0-canary.d083d93a.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"740c7f6a0f292b586689cce49e46a93876251b93","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/740c7f6a0f292b586689cce49e46a93876251b93/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/740c7f6a0f292b586689cce49e46a93876251b93/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/740c7f6a0f292b586689cce49e46a93876251b93/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/740c7f6a0f292b586689cce49e46a93876251b93/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n*None*\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.16.0-canary.d083d93a.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-I6o50lIK679jEvA8zanqLjWBOu0ji/oauA1+PpqcJdGJGTPzWvri0RVoAPfYEvJ1BEaF4xrvY5w1Y5KLEFEBOw==","shasum":"ab707a36a3d8064c3acef132733b61fa9a24d550","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.16.0-canary.d083d93a.0.tgz","fileCount":16,"unpackedSize":48243,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeueswCRA9TVsSAnZWagAAE/sP+QAybH5gwIhNQc4zMfXO\nJV9I0dGO5gsW3GRZeDu3ATLykHu+99abUaN1GFxkjDJ2TyLbwqJe80k11+6p\npKcPxTV7TUx7/pNyV45HcsRcv7KZQ+vNvOgyH22STZNElm24C1DyjyNV/nWh\ns0dadhdKPm+iClYNC2ket7QA3aCqmY9Pvr33ZIOGY6/xQZ85fpRwaemHiMCS\n32Ds1MFYVgsqhHkIE/Aj2uOSxH1ALZyc6wRnkQzIV1815+IOYeCP4UxJwr34\nfj1T0tvdQte9V+yeexmjKeu0AsUJy0bwk2OnYmjZoj6hp/b/KvxeS0ct0LiX\nKtPKjiY9t471iSAgFelyCwhep/Rg5Hcih3tMsUqt/MXwu3Wdse+wnoW+Nvdj\neRLtU2pAvVwY8qKkpqnTkgqh7TLgyHvjbBY4cJw8Q82STPoQ01eePiIPU/nm\n9+FTISh1SyLFuWLNECjAxpb/hQI3NhJ+LUTeP7mjEVPvyDiN5X7A8L3SYIsH\ngRRbmfJ8T0VBj8Xat9TKtqzM2GPSg36HDIClIA+r8w0A2mZ1mylpbDhn3SlV\nww+/9PJAJ+jkda5WNiXCuDD1RxpeLlZ3o6VI/6vYP1699XmuK9zB7iR/C5aN\nWINcFSde66Fgfwo+AGSYZOFJI8pwekXQw/xOW0PuRk2xvDQvHYHznpu8g+NW\nmlmU\r\n=dJfZ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCKLmwrqXW5w3VSq4E/eonc4fp+zP59i6gWiPmuy3GWOgIhALx9NKBHumaJnB8HtdCvyZ7z60mLqb5HV1cw667bb+PG"}]},"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-formfield_0.16.0-canary.d083d93a.0_1589242672172_0.742183422303446"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.c95d429c.0":{"name":"@material/mwc-formfield","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-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/form-field":"=7.0.0-canary.058cfd23c.0","@material/mwc-base":"0.16.0-canary.c95d429c.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"cb13fcbdf906f1aa91a8a2ab889def17ec03e1ac","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/cb13fcbdf906f1aa91a8a2ab889def17ec03e1ac/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/cb13fcbdf906f1aa91a8a2ab889def17ec03e1ac/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/cb13fcbdf906f1aa91a8a2ab889def17ec03e1ac/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/cb13fcbdf906f1aa91a8a2ab889def17ec03e1ac/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n*None*\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.16.0-canary.c95d429c.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-J+nsUeJSQErDq4Vj4svEFZUYOz4+Cpdbmg/J1kh2Y25wBtBAL3TYBbm8Cxlhm1pk5Zbwburnm7AKG324TmrP7A==","shasum":"698e82f6136e419c8bab2f34aef75644c5a4519d","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.16.0-canary.c95d429c.0.tgz","fileCount":16,"unpackedSize":48243,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeuxbcCRA9TVsSAnZWagAACigP/1H4IZX9hfYX06Db3CuZ\nK8qqyFGBcTgPVJZ5a54BNPnhJd8uOLZGG7dHrSdHLPBejI1IiBcy6yLePO3M\nO4tFXy9jsRFnbTinnLMSHg+QKIxDG/JOZmzWAPO1K0IjQuILMYQSXPkSab3R\nFH4rzjo/8KLHmPpJmgtqZeLqNc/0ukPWnvrs0Tz5q8Us6LpXnWbEGjVYFcpP\nNHsKhnUbpNigJLYu8bOCvQrCp/XG/i71wBIKs4KiF8iEk8f8Nr5dPsDYThYS\n/TH+rY9i7RthK3rP7HK0sLvVmrEsDjz+JYjpmVMhaYPygEJn2xXzo2swxLV5\nOfAgNg9nedqDFzXXXh08Cba1zsnjsMv94oUy8NHbdYfseY0UuZE5VL48sRE1\nU4JiqJwi/KEbpaCmEUzr9nVCkZVkLv0HR5wLrbHJXb+/7u9iDD8Ael0kXOBk\nnDCrRSgbfm7h9IqgLvaYLWdadT5d5WC1OXvlqm5YFWhOzCQFJulzY3uyfPe1\nsdnVNLg51URhr3OPkRyUuR29tni73Q4eFGKsIFQmvdfFhbMFWs3RixGwcYRf\nwZ8CyBlbNc4xCKbgJh2pW/86b3SMo1Nmy05ILwHTal/QaVmnc9DD+1NZKH2x\nKuDicriLsTHEMrRpn4lV5hGEgaCrIrGmzHNJzmCyXzVI+ufLXmQtS0cvlRSM\nIS4Y\r\n=G2w1\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD4eDtfyYHUbPAaGi/Ybp6CZ39dQ6GYfbzOP1maErMbYgIhAMj3ZDEbcpI/SwfwDqIbxJjR0NySzjl5mroRRubo3y7D"}]},"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-formfield_0.16.0-canary.c95d429c.0_1589319388360_0.16504732334094596"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.0c1ad726.0":{"name":"@material/mwc-formfield","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-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/form-field":"=7.0.0-canary.0a371b4fe.0","@material/mwc-base":"0.16.0-canary.0c1ad726.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"9c86cc2738d0075eee9b892c5c2fec842ae62e41","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9c86cc2738d0075eee9b892c5c2fec842ae62e41/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9c86cc2738d0075eee9b892c5c2fec842ae62e41/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9c86cc2738d0075eee9b892c5c2fec842ae62e41/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9c86cc2738d0075eee9b892c5c2fec842ae62e41/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n*None*\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.16.0-canary.0c1ad726.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-XdXq5G8PWBzzQMfUPl2R6jP6JDVF+9aw+vMIKUj0yBFH/lL6DApkvKQUL3YHb8vso15RBgqXk4QqXmScGL4E5g==","shasum":"365e1e2dbdce0cecc7a8b2693c5b083305ebf02f","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.16.0-canary.0c1ad726.0.tgz","fileCount":16,"unpackedSize":48243,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeu0BtCRA9TVsSAnZWagAAAHUP/20OR1dwb8c29rrTQaQG\ny3RSrDafIK9IE46LXXed8q6+c1yfniFF8mIB80WBHmPv1MNxxoNlXpZhR0Pl\npZRAF9y2Kmiy9stS004DVMJjpqwLDvuB7oegRslxOPwcL4rk/cKNAJOpRfRk\nZbsju9IxVUCqyFnz1f62JinrBGj9ej5CZ2DPu0iGz0UIthDglZGCdJXcoxm1\nt5J0Bnl1uPzklCg6sN+RF5BD4osZoxER1ftKIv+xCeXcl4eYlB40xasOTzTY\nuleYLYliXyluJdt/KPuEcO4qJ9UOpPndc7wlxkjs2Dt+iyuf8ErcOoxlfvOT\n3Si4nzJk+CauMDzQRNhI+VlN9YkJMFLd8Bt/CbGDYqPnuOSCxh5l+vPC7OsN\nYecqwm/bNfzU9FypOjFAB5/bNYjgRcei3SLSXmDBp4DV+UDAVgEXJ3p9M4la\ne2U0S8YfRBfx4GOOOdEhZynEzfGbjuXSHi4qMwaehlRWWCQWDGFpq1uGcXMp\nL0gB/Lq7CNuHzcA6jYdIvIkoNMmwalMQDO5ablYwXtN0fuZXoySqjjexMxF/\nWpIhGP7G38KtAql4SMFscVRAH6E3M9vA+cKfo3XeImwi8/3dUtiCNC3QzjVA\nIFgB8ERwxzgRl8L3xLGAhWoQIoLV5mXl1MsmZkXOnl7k1vi4SxI1njqwUCHA\n0KNb\r\n=RRWQ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBKQLoyhH5C1kODX3GqyUa2vG/gUOk098ilaNlSt3RKXAiEAij+VURs8yLNaobJqO/ZkcKiuDiIjp7/cxbdXZFjlnzk="}]},"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-formfield_0.16.0-canary.0c1ad726.0_1589330029159_0.27658809617450353"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.8b6a4700.0":{"name":"@material/mwc-formfield","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-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/form-field":"=7.0.0-canary.2139200b3.0","@material/mwc-base":"0.16.0-canary.8b6a4700.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"268d44b68432688e310671d956cf5005633aef47","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/268d44b68432688e310671d956cf5005633aef47/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/268d44b68432688e310671d956cf5005633aef47/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/268d44b68432688e310671d956cf5005633aef47/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/268d44b68432688e310671d956cf5005633aef47/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n*None*\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.16.0-canary.8b6a4700.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-Vfpvmeut/ObVH2o+b9baKsJyOFPuSp86oeoUIrIHUhuRMAkl1y8nK89XS0AKx7L5u6eH8FUEvmv25+Rm0vyXPQ==","shasum":"5826ff31e9b5c536fb49de946b783239cc65b886","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.16.0-canary.8b6a4700.0.tgz","fileCount":16,"unpackedSize":48243,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJevCv6CRA9TVsSAnZWagAAeXoP+weC1HsR0ggymSalcnSB\n4BuSLbjXtel8OdJf9Vnn4MiJSFSeTHIB6wDrcUngaJN5BVa216NaBjXOcT7Q\nBN0k21NOJZcSx03sDBiJilskS8CziILMNAOajum4QSteV7IyuIFSLCl1RcQp\n42bAlUPmESZd9Yf/u4e/QNfTqVI9XNfQgx0fPjAuTIFMIGyNHmvFae5A/U5U\nj3kYzZ4wSjSwVNDP6HHupQx9SLmUbVwpKWcnkwzNVv1r88d9e1AyYejYqmMj\n/xyrEcRhCL65icov32E2sdRkcUk6OpSCZXsvjl+oMoAjbjv2ywxBPLJ1DSj6\nDAsjmgNfSQ9ZX4ku7Dzp8Y8c4dmM6BYDlfhjDQx8BnzsPCjG4RvwaTFJC2gD\nwZVm1c5ssAY2+JrQHV/Mcn/5f/sNqtJdW0FVtJ6dkR9hAHjZ7NTC0WRpApDo\nPpq80KJwmf6sTxyYcLhCyy6Y/yi719G/avZHydM4ylaXERJJdB3GQeUl4DZq\n8gz8jeyLlPb1moZIQ1rlbN8/i9SVteXshUEkDYLavBJhGqaPNABDIS35FeL7\n3rP7dlzkRoBNsLM+Xbx7wOzrYipmgJKZc8H1zD12rmWttdAQRJ08ZpimnhSi\n/hWCzPuHOIf0uGBc2ZppMRVcpC4LsQ1oAMEu7f89woOyXzIaq9o15NG5scO/\nWlrA\r\n=9zPR\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIC7oogyuLuwDDS0po2Zde8RkCTLvt252eSqS1PlK2et5AiEA1nsqs0LtPlwT/EO584m/NP6gcPmRmNOYSNF8qK8eA8Q="}]},"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-formfield_0.16.0-canary.8b6a4700.0_1589390330498_0.6616362238376852"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.3270effb.0":{"name":"@material/mwc-formfield","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-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/form-field":"=7.0.0-canary.2139200b3.0","@material/mwc-base":"0.16.0-canary.3270effb.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"5c72bc76b8ddfb71726f9139d6105a4b108b7174","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5c72bc76b8ddfb71726f9139d6105a4b108b7174/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5c72bc76b8ddfb71726f9139d6105a4b108b7174/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5c72bc76b8ddfb71726f9139d6105a4b108b7174/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5c72bc76b8ddfb71726f9139d6105a4b108b7174/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n*None*\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.16.0-canary.3270effb.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-9hs1NZ7yUpP9BV7VEKboh2x7tj7w6kxgBgiUmRawGYK51zP0+FrDfRuWUpov4MP0aXhtjrvjmEvB4b8cZaY9SQ==","shasum":"b0bbfc94236bd41e21785703d9bbe1b83c688dbe","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.16.0-canary.3270effb.0.tgz","fileCount":16,"unpackedSize":48243,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJevGV9CRA9TVsSAnZWagAA95cP/0dN9z1fYh5T9DSiaQZl\nhCCsbsGv9ytgv10koWxKSWJTVDP5bE82yUIqG1wXhKZsS1IlyE5nNV7OnlLh\naxMhoPmKYnSOF1qNanvPpdbd2E9vVJV+g+6kSj596riSy3cnx78Glwj9f6WR\nzMOIdsmbU/p2rw8pVvrrl0GWXlH2IjX8AFnA96STT+zc5Ns4PgKd7GjbJfCV\nH/7SOjI/NbKlUh+nDisku9I/4leCckbOZjyRvHX5Nth1tgeG+EzkHplVE9X4\nPsUYeDynCICYGaAJgD6clxIw4RWZeJQXyMRjVC+WuItJjePpnn0Cua6kaxq5\nqHfJMXKuyZnmAUsc4lfcxy4Vgh+AuoGLdA+F5hNN5ds5QdKSp1dbk6v0xyS2\nros1bJSCJ8eMkwUHMsut+PsDzVmoM8JqPBXfQIAa/7e2ZajAiFpY1HvgNf7f\nuDKid/APxfsS49wR0VkyQ3dRm6evPRkdMa9iOHU1LfQZn8fdASjgCVdd2BdX\nrdIjsxfxsNnOOQuqwUVwbOOz03shrO7mw0r0eO5KCBwEUjt5EnEjQchRejoX\nTBvYlVJKXxfvxri5F3MQzM1lRuGX3w5HMhgAonlJA5oUfWf5j0EwkD22UBjl\n7bEcsO7IJJ+c1bfmtzNBuyGvzkLOphwImUR+tEc0YG0VzIB9MWEO3d+F1yEQ\nuTg9\r\n=nssw\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHJHBjGee5+GTEB24Tg7ShDextVanZpXTEA33v9s+S56AiAXAhFNgroCcIuHXH64Z6WJaLRY0wApXMmuQ1dXLq+Uow=="}]},"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-formfield_0.16.0-canary.3270effb.0_1589405053118_0.44981733186347617"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.832e64f7.0":{"name":"@material/mwc-formfield","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-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/form-field":"=7.0.0-canary.2139200b3.0","@material/mwc-base":"0.16.0-canary.832e64f7.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"27f7d1ac979b6af26982de92c2f2bb7fad00ccd1","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/27f7d1ac979b6af26982de92c2f2bb7fad00ccd1/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/27f7d1ac979b6af26982de92c2f2bb7fad00ccd1/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/27f7d1ac979b6af26982de92c2f2bb7fad00ccd1/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/27f7d1ac979b6af26982de92c2f2bb7fad00ccd1/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n*None*\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.16.0-canary.832e64f7.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-+BY4XWdAt8ceLOQ/Q8gA+9YU4RstJXqjq2Ct3yz5T6Yq4PQC+MWrPuNG60qQzAGd5YpgN5j+1NrwufRb89WBvQ==","shasum":"054a1da1045cdfe9304212c5db554763f1b195c8","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.16.0-canary.832e64f7.0.tgz","fileCount":16,"unpackedSize":48243,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJevJYlCRA9TVsSAnZWagAA3iEP/2Cr4oq2+iKaUD8DayMD\nRhK8OW8AUqJyMBW5KZSjl4ene0BkaG6s0s13UEmFbRe7bhtcuz9F4f9wQQvf\nn7sU5XhkvxRUdwTbBEl4xlDJUHnixn+gMvD2a+IsyZcxDDAE7R4gzFpxEkoC\nympQTKCnGgWUtVEOvamJlDxJWnEsbmhIhpqJrSpPJZQHBlkzKfcVaU5XDzYJ\nzzKHSQdaQV8gO8vEtAbrONFwDdFEWuvr/dTZxwLe5OirhPqriH8msqLzVnQz\nDuJXAjfDdRpadW9thM9pLWh0FAxzEwz0JuL4lRw9ShvPF/WYSzp33QYDdysS\nrqYoB1bBhnTq1DWxXE/Y18E1Y3V8i+OG2im+VNj5IrNphiZcJIqyp40YKtQf\nDvyiMuyy/x9WUM/Lc4y2BOeXCCgZ+Seej1nYeGgHEukwaiG2J0Omh99cdH6U\nIU76WqyiwRLFmoptXBJhsP/7vfuOxBoBu0h/mJjvwVXfSm39RjzOiFAXDZyA\not4Var5lynfsfdsTgo4em5loT1PYmd2rFYno3fBhz93i22hmgQUjvryCnkvh\ndGLB5VCtdwClK3p9qE8bEAbFr6C7CUeJ85A0Ss5D89NYSdZ7LJQ1cRyo0e6P\nonN8Xq2sp2lbPUAkWxJD6Q3nVm9FFhRZ1lHsIqSiuETKLFCAceUJ2qU8swjt\nTYCd\r\n=xRYN\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCy4LGLZtk1SaoyG55FxsZBprdWlPHz93bZIxWnN2fdZgIgM13v4P6uUXoXCOk1XoO/PGxm49ZbdhPvBSTooCLBZpY="}]},"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-formfield_0.16.0-canary.832e64f7.0_1589417509002_0.15311134381255065"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.472fc4fc.0":{"name":"@material/mwc-formfield","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-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/form-field":"=7.0.0-canary.2139200b3.0","@material/mwc-base":"0.16.0-canary.472fc4fc.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"0eb6479ea05a7af0418b4fb939f915e39af03923","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0eb6479ea05a7af0418b4fb939f915e39af03923/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0eb6479ea05a7af0418b4fb939f915e39af03923/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0eb6479ea05a7af0418b4fb939f915e39af03923/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0eb6479ea05a7af0418b4fb939f915e39af03923/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n*None*\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.16.0-canary.472fc4fc.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-rCjYq2NhJ94bI1z3KihqG/F5jQP3MV5rcBiWont6ylNlSiKDGulxI0xTvwY3kDkiIPSUkHlgpY8O6TYGSEDm/A==","shasum":"3c98dd992e47fa9c2fa859157f8dac0f6ca850dd","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.16.0-canary.472fc4fc.0.tgz","fileCount":16,"unpackedSize":48243,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJevLyhCRA9TVsSAnZWagAAxCYP/1noB98J8iLmaTccIJUJ\nxJIjdH13GnKjMqQ0xoSy1ByI1W3yZoCEoEHlyb8lkY1/sQ6Z6KeoGl01dT7x\nqYWl+4gpT4U386hqXdcjMEYZBklZwT85YM9Xi7JyvDJwA3RKXik8XMO8NgXt\nvLSlBh1KL8jFa6nwYSqO792lilaeahYcNAOHAHjRd4rFP3hPLKB0gI1nGKbp\nEIu37z2Tdc8Jgv8EAWp7+uPS0YfHZPP2tkDO15MtIhTizyLsF2UUmqNV2/bP\n4FUFplxeVTvDNmvDtEu1IKJA81x4dAdKjgcet8tuU584SevD4c4NveTFyic6\nnaL39cV+5vY0i4r9w/a4dLi0JjG0XFN69Fc60uZpBfvyFlQhO5KRHj98KQ/X\nmTrAevcSfY2N9TEE2Lta82PzATdvnFLkub5gko5MZiRn1FeFbXzGp1g0wNQs\neiIhh0DY7jN9HGCmvKnu+60kbNV68UX9by2TVnBBWEaJCWOBhzqRsru+67N1\nRSZRKmDW5x1GIz+yNE3v+ilrw3kk/LK8s1FYvX2i2RuZDck8c2Nmy0HS0yq0\nDVw75k1Lx+39wh51bQpy46pSXHdn6NrmVIY5BL6kfOJm55H/eZ6dkOXm0YuD\nxXyVV6l4LE4YmbkXz+mzfdhhwue2goL0W/IStjbPNqfzkZ3zp8fLZN/u2KWr\nBQoK\r\n=Z1Y0\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDQU7Y+lH48vJtGoDCbt1r8d1Nv2iBgZeJwpCR2p5a6YQIhANae/+3qkuVI9/VkBsRHNbHSFmzwIHvyNLHCkglVRHai"}]},"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-formfield_0.16.0-canary.472fc4fc.0_1589427360967_0.3702372892506698"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.4dcd7dd5.0":{"name":"@material/mwc-formfield","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-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/form-field":"=7.0.0-canary.ad0c0c103.0","@material/mwc-base":"0.16.0-canary.4dcd7dd5.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"a2b512eab44e739c09fa66cee4f0a65698e697f2","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a2b512eab44e739c09fa66cee4f0a65698e697f2/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a2b512eab44e739c09fa66cee4f0a65698e697f2/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a2b512eab44e739c09fa66cee4f0a65698e697f2/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a2b512eab44e739c09fa66cee4f0a65698e697f2/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n*None*\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.16.0-canary.4dcd7dd5.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-nxLrrZezsdX0zbVdQ7MYNny5I86ap8oJqGP0xuC2IlWTXCoYQcYAGu3f4DQ6K/IVBZ6NzsuaCCfSaaitdVpwVA==","shasum":"5ecbe5259624030d38ac8a7405dd8e59e5a348de","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.16.0-canary.4dcd7dd5.0.tgz","fileCount":16,"unpackedSize":48243,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJevXCuCRA9TVsSAnZWagAAN4IQAJLOpoKTP02Uje0WPKk3\nHMGIc3EHLJoflZ6Rh5g0Gi1bTAAJ7TaONio6KUpL8H7k4ZEhNmZv32gvZre7\nKrF2EGUKCyv3IYdd8dXd/xZhcB6ux0uMsG5fWbr2IJ4idN1bIE6msU4fLNpx\nFv7DrmhjdRk4DRfgSZPWf+M40966oLVqGeY0MzqT3Ps6aVFSfcWtJz6CKmwG\nlB92oMxa0vDQvfQrvXwx1hXZJhzL0zm5/S3F51bhBUhr/xqtfNMQ5lZmNkIM\n2jvNI5nTYrZ48030kDvQ6EyKsceU90yDo4xTjivsRkEG3yC9S753WJuY0SXR\nYsTAokethj0B4ZbhpVt9r41gDnXKwmWEiRuPATct5XSZaCztAyq91gB9TUPN\n+rx3sgiHQFquQEDNhmjQILoFn2AUPoOGETtY+GC6B+fcDwlNddHAh8LtFLil\nCM3YfO58422gbC+rcNKr/Wibs6nxpUbDCUQ4DF0YtGccu4w3OyAfi4dGg7nG\niDdsAEB88O//TRcIUtA5G7IPbbq0VtOcIcVMTfl4tdBbPuHeoHWuMvMcPj9t\nWdsQG+2HeMLH8gyr2ZRome4UtX/rC81m3G7NAlmHI51CYONmICiBGPut+r5M\npV5YwgyYQOyi7kJYPyoS16kuy0s26XLel5gTKVUaZAwYL9nF0GKRaAOvmWBb\najk8\r\n=nOoW\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDwQu3QAFjHCPiruFNgGh/TAbA8pIbkNzAET9SV1UtfKAIhAJq16kbPV76xv0w3h5gqvSF1uYdOlAv8Cd32CcEQAYuK"}]},"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-formfield_0.16.0-canary.4dcd7dd5.0_1589473453756_0.5261374497073847"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.bcd3400d.0":{"name":"@material/mwc-formfield","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-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/form-field":"=7.0.0-canary.ad0c0c103.0","@material/mwc-base":"0.16.0-canary.bcd3400d.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"dad5f0740d5be7e0efe9c5037afabbec57771668","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/dad5f0740d5be7e0efe9c5037afabbec57771668/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/dad5f0740d5be7e0efe9c5037afabbec57771668/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/dad5f0740d5be7e0efe9c5037afabbec57771668/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/dad5f0740d5be7e0efe9c5037afabbec57771668/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n*None*\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.16.0-canary.bcd3400d.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-BBvP/wR+Zd+KGDX0i6wBHwowu5Sl9Cq+BHHtqCtCQRUD41rfZE57D1Bh+78NqHoK1lNBVAhTQffrHl5r01172g==","shasum":"b553b54ee2e1ad3dfc1e75375f3d7e52b41e658f","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.16.0-canary.bcd3400d.0.tgz","fileCount":16,"unpackedSize":48243,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJevxx0CRA9TVsSAnZWagAA/FEP/i2J2mqESezUkrmES+Sc\nn0Uo4sDFU07CE/5uf6zUzB/OpXzGm39jEm9QSN8GXNunwB/iMZqKop+DjqWW\nALYwvW8en/2pQcKytAxpqGMDhQdhtAzBvpKksfoZzjhm04TYZbk5CVtUPy22\nPoIsBk3cuJMc3AbbFtiyqP22tR9+zU4Nq28BScnKpuVnHd+cAvniTPwlrCJ2\nu3oRJJ+XuKShnDD6vh+ANZ+5siNBBWCOdrTN/NG4v6KVGyqoJCMPD9w+plU1\n0/krL1MCGH2hB+CMU+KD+yUck5geL//yWuWbTSCQkgarRseq8Fp8GKft+wcV\nVzMJVNOSaPlV41KyEN/5AXSn5wadivHnRaB9TY1cfgmeXV+/K+ovGiHVTl+W\niJkQ3oNn5/RpzLS5AbTTOf0mZISW1T4mJq9CZ1M2EMQkVQolIkSJ6Gll7161\nsjdr/czJIM1Kp2OzssDpIEsnK3sfPwyqmZ6NZ4DSUmGUs4pbNFtTKAZ52XNu\nl5G+DHEMOjeoRFiT3QEnO/FSbli1unoidXEk2ttk5KzU+JhfW//20hdMNxFT\ni6qGOmKGX0qZZwgCzHPa26skQzVUw0Vesxq6BHLse2Z46zg4ZP2qDNsAM+Zs\nP8KM+nJBhbLjRjN7y8k20wjcC+5RuI8q22ZMYNvsSmVL9KlGV+yTcUQpOs+i\n+vL7\r\n=3fIW\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDU2jF+EqNGEEB4WatdizKXkHjAJy6AKLNzoF8H7UQDGAiEAwFiImfDHOFexIJlujgbM/e3vGH+co6TWoKmakAvaSL4="}]},"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-formfield_0.16.0-canary.bcd3400d.0_1589582963754_0.6945295401982365"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.91f63179.0":{"name":"@material/mwc-formfield","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-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/form-field":"=7.0.0-canary.ad0c0c103.0","@material/mwc-base":"0.16.0-canary.91f63179.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"0e5622d76bebf9f0f121549fb3dfc9bce15378d5","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0e5622d76bebf9f0f121549fb3dfc9bce15378d5/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0e5622d76bebf9f0f121549fb3dfc9bce15378d5/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0e5622d76bebf9f0f121549fb3dfc9bce15378d5/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0e5622d76bebf9f0f121549fb3dfc9bce15378d5/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n*None*\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.16.0-canary.91f63179.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-MhIFb6vA/HANw314PUswlUZeodTUhzid8nT2qMvufnu7hvpH+0jyFMHTzkqne5T2QNXoGEWx9UflFSoJj/CJ/A==","shasum":"1fcdfe6e8fa383897e4511e3118a074fe164b95d","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.16.0-canary.91f63179.0.tgz","fileCount":16,"unpackedSize":48243,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJevzUBCRA9TVsSAnZWagAAwecQAJu9s/Lo/HM9LNQKhm/k\nH0TeS8IRyYirZyVO/llLvpey1suhV1uoiPUoRoCOsMM4+IAPyRP4Tkc9ok94\nBFD5uwHpcB0Jr5bRRDnb6hpEo0A7pUGCHeDqmJBhLkaposVmRwhCltBtyXGC\nNlb/uGRDTa3L4hvGMqzV+jCBKrHN22iEA5utnwBS/XhPuEuaoTi4e0jU8uPV\nLWbgUY/4r61y8+SlIGVRa7m+ZGlUNvoClTVZHedWQyMIJIG4vEJuMt1TOdkY\nTc3wXErlpVTbl7Xs+VApLWIxPw4QQEzOgwWmHSx0oJJ4hmLs5F3Jh1BtpS8Q\n8KNH7C3NLqkRDPuggZxM+XFc6xIe03XZaC20202gXUD66NBX9n7JcOkhMrNN\nX4coNooAtrIiOtmahPUsHbt6TAVwVQIkgV2GH8kMaSZxof2dpEO6bedMeyu4\nwQPwDC4UqyJ2APUsyC18CpePhOuo9KK9HudUD2iIXPkfl0519lcW2Tay4nJB\nmUVKJ5pPpMTWso3UuX5XyUuZLeInSXqOAo8BIAyIMD+d/NHd6o6pzOtIpjC6\nS7xAHquy9Gk91TpRkGEEuWEZl48uXPWK3qekmt+fwU05MsiObKgHd/MlzGaM\nzfBOHrIY/fMAS4XuOmtCfb5kez9pkGPp1GiCsV7g9vTvcbbV5SuugJ7WDTb6\nrj8j\r\n=uLmq\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAibKDXkofU4YF7JW2iA8CZYeunP1qHWFTqmFch2I0pwAiAOwlrSgABYP11Z3waprWPd3AoAEeQXYzOu0ur2SiOHYA=="}]},"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-formfield_0.16.0-canary.91f63179.0_1589589249391_0.6590038447376916"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.b8aafb56.0":{"name":"@material/mwc-formfield","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-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/form-field":"=7.0.0-canary.fd8f8f2b7.0","@material/mwc-base":"0.16.0-canary.b8aafb56.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"cb4a37dbb03476df8ec3422cb9bff794468ad220","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/cb4a37dbb03476df8ec3422cb9bff794468ad220/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/cb4a37dbb03476df8ec3422cb9bff794468ad220/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/cb4a37dbb03476df8ec3422cb9bff794468ad220/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/cb4a37dbb03476df8ec3422cb9bff794468ad220/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n*None*\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.16.0-canary.b8aafb56.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-jFifjasv/4EI+y97DWREYsINiK+Q80TiwbEykqT6QK4mpAHnazeJSvgXuaP2XKSwUn7qmSNR9oUHT9uOwXOTvw==","shasum":"0ec07a906bbb3e1d15d1ef6480e986e614e0afef","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.16.0-canary.b8aafb56.0.tgz","fileCount":16,"unpackedSize":48243,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJewtRvCRA9TVsSAnZWagAAHwkP/3tiptC2rrmY1f5PsMWy\nmJYvuWtyJTgz4tb+uMXdKsUZvVG+/0XXd9v7gRJzprHPKrihZnQPhrd345Ls\noE2xfdhOsd/T0WyIQJHzQ9Ig+OvwV3TeFsqk3g0XomUC9krnvVrHJf6PSBfZ\n44dA/ZWxClVzsaMrMRDYPXdAiIW4TVGSTQ6gDWAfU21JxsIYLJFR9tR2y3mU\npUg2kDazO4fT87CSrW7dSE319I8sh5inO6Ur0efov8ekLe7odbGMr/2F44Ze\nUhyripnOlyGI4bE4OHTzJ7tXdGy7oQs+2m/Xe1w1+UW/oXvL5b7Ga/Y/wEaL\nyHHIMbI+x6fm1XlO+0wyq5u4a7BLfNKoZUOZjiR3LsuGbJSIoud7Y+5WMy8o\nW5MYvLfgxUiHBCv4pMqNBHHQucLNR+d6vzpqSXEq4IkS+7lUqsOdGhdb4u92\nD/4SKKGChCqa4A8Q8hSkcEhr+GWhKFXh9qSM+E5Ok1Ez3tOl7kzxVTThlANH\nvL5pm0ITGts5bCU4RFwcU+7iXGVsMgmz01iNJEaifr3LhOAHInQlkVWnktc9\nk9jeEMFLw0hjew+Aj9NQqmMJCppmr6NZ8iUiF2bQPLr9QwKDlC4X247ryXCN\n/tJoIjRXesZ1aosoP78802ESjqPT5U07f/WqVleJHF4ZL16/YzL5p1hcf8RS\nVAn2\r\n=WMKG\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCWwPJTMOl+VO7JZX8EltsbbZ48Kh9iDiVBldhJbCLeaQIgYUBC10MY4TVPTtM8EhW78WfEF8ahd9LF3dBpCqoA5Rg="}]},"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-formfield_0.16.0-canary.b8aafb56.0_1589826671124_0.4066322693143838"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.a564b194.0":{"name":"@material/mwc-formfield","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-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/form-field":"=7.0.0-canary.730920fbb.0","@material/mwc-base":"0.16.0-canary.a564b194.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"88e988925ffe167fc3916968d88a99b85d5f0319","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/88e988925ffe167fc3916968d88a99b85d5f0319/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/88e988925ffe167fc3916968d88a99b85d5f0319/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/88e988925ffe167fc3916968d88a99b85d5f0319/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/88e988925ffe167fc3916968d88a99b85d5f0319/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n*None*\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.16.0-canary.a564b194.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-U8lpB5ptLXNiHZfuJVy/Yr3FLW3cq4k+CdQHU1LgeV5Ejmgs3l/fxvbb6gW6ruUvj9X3adScH8RbNgz7FJzCcQ==","shasum":"dfe3a018173794eabb1ae03353ff53e644ea847a","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.16.0-canary.a564b194.0.tgz","fileCount":16,"unpackedSize":48243,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJewxQtCRA9TVsSAnZWagAAwFMP/iD+3qKUZrom1rGARVob\nU78fM+pMZfXfOyOWVWvvesgqculDYy7/2p7mZrsvO55fGeIirpJ2SEioP9qg\nAnJZQV/MX+krmFiGNsOQZAsQGtRHRFnBUZf/4sOe2sbmRpZZ+jElPq0J51Kh\n/yG3fWJwv6BDNvTXbrt/puxb5fpoPqDVsGIJ4HqN+IG/f717qqjRuhh9QpgS\noQCjkX2Hq+SMy6IoBxWjgtBDSHLsh7QcZFFRu/B9o3HOfjmZ96zGSIV3cR0I\ng1KgS3MqPrfRGVJzr823nVeSGgmPholRqR2o8W3LvMwBSgH2Bdv6lS+YcWlX\nmGA2euniPvjYnXZOWfs0ePpWKikaj1tdzEIs5Va85kX62NnI5leToadAckUF\n5Mbc7myuddgU40zgQ733hwNy5I9l0wbjg3el1D89tqEcLt8o9jAFNusBHjR+\nzSZYrp4GpQWAYiNzCT4YZY4brMiOhAobnBRquPZKUk5g2oKHBAtId07CKM9n\n40+QbDIUH4+mtMAiQlYIZ8TeDJewudWtctEsrLwxL2pN0Fe06aOZ/Mn6Jlc9\n/Rm+bXjaBtqDAl+2IOhn0UnwsLgIunJfmwVa4dObkvjGStEsaarpvMfYEF5C\nhUU6ZpqaPcx/Y7a/1XrdlihQqP3HeW39ygxe7uw7BLRn1glCVHELTbKWBSwQ\nvT3G\r\n=kOB7\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDvEdKGKXghbex7vtS6HGeHk/99wzSQMdxqCRGV6EXMRwIgMEAX/73t+6CK9++oXl7+qfzhERtOuQO1d8aTBDMGjkc="}]},"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-formfield_0.16.0-canary.a564b194.0_1589842988893_0.2647718058695958"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.ef56465b.0":{"name":"@material/mwc-formfield","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-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/form-field":"=7.0.0-canary.730920fbb.0","@material/mwc-base":"0.16.0-canary.ef56465b.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"ebf59585445179b39ed7a77dac598972ce48066b","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ebf59585445179b39ed7a77dac598972ce48066b/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ebf59585445179b39ed7a77dac598972ce48066b/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ebf59585445179b39ed7a77dac598972ce48066b/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ebf59585445179b39ed7a77dac598972ce48066b/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n*None*\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.16.0-canary.ef56465b.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-aCc9cUCa7WlDo3+jTQBwYf8lcTJfAPfEJHYv6Bic6esMFV50bJbKk9aqS0UX+lLMadt1w8IrdS1uLpNJTPVtfQ==","shasum":"cc14774d309fd290b8a2d8b8c2066e0b968ed17e","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.16.0-canary.ef56465b.0.tgz","fileCount":16,"unpackedSize":48243,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJew1bPCRA9TVsSAnZWagAAP7IP/2oCkY3ejVYgjHH4IVOb\nWPnD8Z5isT4jwTsPobeVasN0QKLXhCycNf1tI5tTJIeBDdSozj+GzRFVC0iC\nrDiR6VunKv+7AwB6qC9zdueU9/O+IKoHqjdOVSxtuTrfPeT9l2IgbliCEYLC\n+LRObq9Go8WmV0DOWUZmm9KOn/jgVpxOIvOWRsfWbVfsAsV//+LkUXQ5LWrx\nHaSNo3fj4k1QfP3kqPjAMpu0fGMFB9EaVuU0dK1G7OASp2HftjOUHH5x2+Lt\n+a5fAoK4Q/Vsz0TAkoFG7R4C+DhEqs6JuREMenP05SjISw/nHKldCXDfn+j/\nf6roMX8ztAPbGheA39z13iZt3zuMHZlkes/sTvvqOtxOcK/mXNOamoJpY3A8\nsbSGXvSEW4jTNPyIkoaL3ylca8zzvz4U67uFMCmT6lprvuUKHlIQTDQdAPQn\n/XV5/b5uc6Uo5bv/EyVBKJ6ZoGKA7ML4bLXxxlnJ+MQuIEC5/rDbaslWcGIc\nsI3O9+C5/0PbxuOTzE5sOOLj0VXp85G/j4LBRCvtnyI8+J6hFRY3pw0amF7X\nTGXRs2wB+9+63RCvKvS4A9Adbk2Pm440tHrnZO+RJ+Ea7tYfCLwnb85lczz0\ncMdRQwcqH5oHbFVVHcx5cPhJ+dU9dHksdmsZO+97R55L+A/ZM+9AxKljSJnm\nDqGq\r\n=rjkc\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIA+/njHMdgF+tGC6zD1gdHT6OD7YMoCtIuXmRXY8j92oAiAWQUOdUDA1UYo8olAExYzceXSyo9DjQOgNCtcmPbl82g=="}]},"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-formfield_0.16.0-canary.ef56465b.0_1589860047392_0.7575438588573247"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.c22dcd71.0":{"name":"@material/mwc-formfield","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-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/form-field":"=7.0.0-canary.4497b86ed.0","@material/mwc-base":"0.16.0-canary.c22dcd71.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"6a706d54228a517263b38bfc1185c9ebac4aae41","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6a706d54228a517263b38bfc1185c9ebac4aae41/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6a706d54228a517263b38bfc1185c9ebac4aae41/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6a706d54228a517263b38bfc1185c9ebac4aae41/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6a706d54228a517263b38bfc1185c9ebac4aae41/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n*None*\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.16.0-canary.c22dcd71.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-RuI+P83W51R/gcB7vbxS1ojSCp8liKNEkgEji/GfQSbft/1X3nomyRIzVg4DiiNxPZ6Q+3oOTwoiu95SvFUM4Q==","shasum":"447af7263a9c303c8f1018da0847e6cab6645152","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.16.0-canary.c22dcd71.0.tgz","fileCount":16,"unpackedSize":48243,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexBYpCRA9TVsSAnZWagAAG74P/1ZHoQcKQKZ1n6tuM4cw\n5g1rcTwM9D0dTXCIuFVtDRF4Tkio78mwuYZPPohcesGiF9RVs463nGi4tdtG\nQTxdFgvceTJXSf2Bpr4DWLMBJA631tmxyWf1Adv9F4cXRoHYgoTvW/dr0G1z\nA2Y6cY7utDGu3rRulC9lnB8O0tjx8akOAreoCilTpc0yHre7EL0tRLwnm+7t\n9njvbmfjwoTqMBDOi5/CMlx4qFM5dNT2OohnpsWrlDnKhKJtqI6Uh/MC/Lsy\nxoQXBMFDBZU4sOyAByDkAZrccHUtEHaZHpZP6sxWDpxmyGsK/NofZjBzjNDu\n75R+QlNqbtdU5h1EVR/Ltr6ato5MZda2cR2lvjx7HdolcvnmhW9cRnxfPVMD\necic8GNDH2WBJKW3acKVlFpiHUxtSuG57xaTLzumWaWqg1LX2FE3DQRkUthV\n4rrgq2eZguAX9as5m8rAARICxzMRTv68g9obZ/W3XR4HBNNowtCZ5QWht72+\nO9orxyu1W/cZhmDZYG5mo/Rd3WYIlnhhSm3+/sQFSYA5GgvLd+RYOtMUoHoL\neuVpGWtoOxHa44EN1QZQj8PsGw5LAIkBQviqmmwkOI/Ja9YB45nmQ2eg/U+r\nBydj5jkc+kWDVuwBMza81tniSIWrGLsG64pavSyNzb+53ceRSTWAOYCHWSru\nFqT/\r\n=D065\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCc+lkeSGUjwyTdVwamPLwchMXmA/Ctzo40woFPelMadQIhAPo8t3O6DeUlD7rAWk7niWJK1DZbh3x/1xurdbAiZUbN"}]},"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-formfield_0.16.0-canary.c22dcd71.0_1589909033383_0.9654918216909318"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.6eb62388.0":{"name":"@material/mwc-formfield","version":"0.16.0-canary.6eb62388.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/form-field":"=7.0.0-canary.e3eacefcc.0","@material/mwc-base":"0.16.0-canary.6eb62388.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"abe9e974102de52260c3cc1347abe8592e0d5e7d","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/abe9e974102de52260c3cc1347abe8592e0d5e7d/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/abe9e974102de52260c3cc1347abe8592e0d5e7d/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/abe9e974102de52260c3cc1347abe8592e0d5e7d/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/abe9e974102de52260c3cc1347abe8592e0d5e7d/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n*None*\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.16.0-canary.6eb62388.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-2NZlU5y9bxiZShY9ojjlDdW6/zOgp4/fPR/eTpd073Z/y46x7UwdcXYc7lLAi36YVnCaa8uspPxIzQXAXyFQHA==","shasum":"2c4baa24487126fbb0d78957dc90378451b746ea","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.16.0-canary.6eb62388.0.tgz","fileCount":16,"unpackedSize":48243,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexEOoCRA9TVsSAnZWagAA3/YP/RanwgnJwF94gIRs4lnS\nUJ9dWqusJRUZRCsnnG7Xpt3hLzXLEbQHDw9AtlNkPG7CkQfIDNX57b2NmF4Q\n2zO1S8UrSducIYLnAkh1/h8AQTsdI5hNvDK6n8hoqcPBqhUsuWLNGnXD3j1O\ncy4IWMUdsA0b6kvosD/GhNotkqZQrtw8QK7wPhC198r6FamaGHCO84OamI36\nubYvQnYdVC5ktbHv0MDQljmMPS2ViPJuLzj3oHwlPjAat5O7EjOhNz0r48kj\nmE9cPkgTjdAlgLmp0RSVUHmmhmY5ZKCYutHr4ncXuo+uKBD3HYgKbSM7K8ox\nWF4d6ZpvfrYUzJOMX5N1xJPoREijZwx2hYSFvyvVQQSG84dgJZM+zvmAprFp\nm6YSUUcciQAAtMgWYXaFx1kaZYL7uFhfc4ackNq9c5ZXXq0h2/1Eo9jMi5If\nHL9wsPJtJHfhYOjUfyy1Ywpu8f+5jfEhU7Xcv9MVHClTZ+zFXHa7BmsSnBD6\n4GgcRp+/Q2+XWft+H+u5BtkfJidTbuLFoyQqMowgcXR/jf4pQZJ8+7fTNaBf\n+q2ICiSr3v45p94JJZNzpTI+0TQ64lKZHT+IbIEHXJxFSf1h0FLHaXFsCT6+\nva5H67h8OJfVPU/yXe39s9GbJaP9puldmCI6tyV9n8Rx9mT7cEALqvR28qQu\nHg6H\r\n=IsNy\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGCrcR6tk0oyPmE6DfAAnGTHTPwZP0ZccibskUZ15CrEAiA8QTZITSGbrkHTvKUTBAq2I8QKoUGP7U7FdCTsieYbkw=="}]},"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-formfield_0.16.0-canary.6eb62388.0_1589920680362_0.9372565323036604"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.9bc3230c.0":{"name":"@material/mwc-formfield","version":"0.16.0-canary.9bc3230c.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/form-field":"=7.0.0-canary.e3eacefcc.0","@material/mwc-base":"0.16.0-canary.9bc3230c.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"f02ad2a44567ccdf91e52b6e07f5986d49d2b375","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f02ad2a44567ccdf91e52b6e07f5986d49d2b375/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f02ad2a44567ccdf91e52b6e07f5986d49d2b375/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f02ad2a44567ccdf91e52b6e07f5986d49d2b375/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f02ad2a44567ccdf91e52b6e07f5986d49d2b375/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n*None*\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.16.0-canary.9bc3230c.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-KVGxf0Rcx7O2uNIT4COEEBf0jvqZf5SWHNRU2bz4tuAm4ElE+LkQnOBZTnSrh/cvemw+cbQmXY9s3WGaDE3RQw==","shasum":"80a7c9e5bcddae5b1a7bed1e1eb4a71f88b6cb45","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.16.0-canary.9bc3230c.0.tgz","fileCount":16,"unpackedSize":48243,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexFGtCRA9TVsSAnZWagAAJgwP/RUQ4agX3nYZGUO15ujT\nWdupD23s0k9HOjj2HYCfBHBXr59P05Km1DV5EuY5Jeb5uG+8SvVLIQ//nWDJ\nIGGLwkIRSnSiZ2u7bUTDOe8xZggRZ8uVNOV/nDTPWcxa/za1Fd961vpgxdUN\n8VD+EWrSX+SljgUThlEgCP2QlftGuOR0Z9dg2lZUg6KjSil3RVdibYdM9UMd\n8MTDp0jKP2343SkcHd03EH8bGU9YL4yVJ1TKGkM6W5C2cESYmcfoTCJg+xIK\nilgpE3RkwdkylaILvbx/kupgi2jyxqu86GKThwj3x5m7ElxTwLKGglEb2wuf\ny53WAC+0ixPoCKAxN3sKMM24lRFT/hSRnxxTEGUcuu0eGdORL0ibhXv9j0ko\nnc4wCR7rTnBnOoM9XVwq1sjk4d6BZUT01/7UpytLOouqDcBeTehHNQ9N7er7\nOuNMfErTxk6Cnd5JPCdB0ndRAxrXR65iuJQ7ycmdv9+ASRk8n7Q3a34agwsQ\nGyDHalT29RjNfI6Z9mgJbM68PNPddlXwPz1gR9+LWfxn1hVPap4pQiJLoMAC\n1udcjV03vYuduxtPQ3KsIyUZrWVKzRqg7GcJPDUtJNSbtRlAYOjubjPesL7g\n4x/OYMR8UVsIqybIwBvSEzan67CgDa1MISRQ39yWZCK67v/Ht+a3NaVrAHKY\nWnL8\r\n=Orfm\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFbhg3jMizjCameRqs7kfQIoXQ7tsXjS7S6cb0zcQVS4AiBo6zEte22yvKq6wSRzCq3Bu87vwAzROeYeQD6Fytpjpw=="}]},"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-formfield_0.16.0-canary.9bc3230c.0_1589924269368_0.413891432748831"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.421a6856.0":{"name":"@material/mwc-formfield","version":"0.16.0-canary.421a6856.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/form-field":"=7.0.0-canary.e3eacefcc.0","@material/mwc-base":"0.16.0-canary.421a6856.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"caa535baf074d026cb6a6f50dad38341320274de","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/caa535baf074d026cb6a6f50dad38341320274de/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/caa535baf074d026cb6a6f50dad38341320274de/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/caa535baf074d026cb6a6f50dad38341320274de/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/caa535baf074d026cb6a6f50dad38341320274de/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n*None*\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.16.0-canary.421a6856.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-j6otCnMmMmf8wb0BEFiyUN5/hmjQvlh0gOuzqEzbqDY9RRDtiGTmFhr7eCPmMJwPIFWhCxIaN99vb9/OnJ+c8g==","shasum":"3e3b14934bf53e57d8525c043e34e0e141941d24","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.16.0-canary.421a6856.0.tgz","fileCount":16,"unpackedSize":48243,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexL7mCRA9TVsSAnZWagAArh8QAIqbovdrL3E42aiAVvai\nUrZhkHG6b0HZkfW8YAH/cwirxS5fFZikbfUzCmPmtOV3dq5qvVwXYOyLZvO7\nxn+5j6uzszrGk83wZAxd2zDC3Y+0Pqjb9XrmCa9A6epMlvjIitCIOVfU1y4V\nrduDDxfZTRckBK+57vodwzVneku3QTVNPWbRKl3sRxHvzlN7iJaYBeUTWQ2O\n5H7ezzaGMaX2ucFpp2jRyxwoB+8+9djYI5EfKFa2cpK9HX38xw/sHiLz4MgJ\nJQPvFqzS2VFJbFl9Dz+qVcHitZ6EfcK9ImHvLma3Qab2fugmH1cPtEoPBFE1\n+fFe/Hu+m6rZnJk1C9dq9hbJQN1tw7z/C+Zg94hLIiJFCXyZhR6YRFY5dYJI\n9+ElJYeGX51PxcyqxIlf4ys+pTbyNAF416imfevALyvMfFC9QmbgeGFKhHZp\nBqU6WrqRbcn7KUTxwPL39erDLTLVsZJ/JK3RC4sVkUrU+6/93kKnIiC1p9G7\ntQxH7euKUE1qiE028850Qhj55lPfgOZzE2Y0Y+bk06rHUls6pwz8yfMa1tAn\nvmxR9PX7TipI65hxa91lFdFUokTt/ThV4F7JF/eMEbOm95K7nWMNqRtDYM9P\nLkXucSTWCVM/5UbjAVWxYLVOQounCSxfqbmj+9DWpAfJnsdy4CJcmhGOf9ve\ngvlk\r\n=kiaQ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCrzgGN89WvfawL/MHQJ9x9FBhFboeyCj0y6jEIG2G5DwIhANSKKZxR9SGBCl+FEYtToLwShOGu4vRnRDVgFk3H4hoz"}]},"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-formfield_0.16.0-canary.421a6856.0_1589952230010_0.3704683204972625"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.761aa6f2.0":{"name":"@material/mwc-formfield","version":"0.16.0-canary.761aa6f2.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/form-field":"=7.0.0-canary.e3eacefcc.0","@material/mwc-base":"0.16.0-canary.761aa6f2.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"2888b72f42dfca39ebb17e6fe3df0f964d21febc","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2888b72f42dfca39ebb17e6fe3df0f964d21febc/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2888b72f42dfca39ebb17e6fe3df0f964d21febc/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2888b72f42dfca39ebb17e6fe3df0f964d21febc/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2888b72f42dfca39ebb17e6fe3df0f964d21febc/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n*None*\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.16.0-canary.761aa6f2.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-pEFf9yt3tFA4N34BlArj+7McDPdJtMWaY5iDizC3azWdYZG3DiWl/6t2vQPnBqozyz4WavlwXExIlRGFEzCXIQ==","shasum":"57f3e161669b4309f0f25f755804575a2d98fe77","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.16.0-canary.761aa6f2.0.tgz","fileCount":16,"unpackedSize":48243,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexaFvCRA9TVsSAnZWagAAosUQAKCQuN03Yp67ODJ04dpS\nDKzU6yTq3yA0kKM4FLrRrKt1prSLbQIJrswWi4WppMU42M7r2pEMIio8JsRA\nrmu4BRk8hQJWzFmnvaWTmLkzOzHsVsD5FnbBUcl0iT5a76/gnX31K4VmUxwc\nhlflritnMa1VzB5WoSZul+ytTHDLkGK3Ii73pUE/CI41fLuQ0YlqGs3uP9Ks\nhpCZYsl3ZVMS6s4PY2ALtjHfPp8sgBcAveGRSq24pcTQISGG5Ne/HfHHKKre\ni67eSf6ZY/nuD5aZm8u6pJNPjWTGu3D9osiJhu0ZOHTLILBaQDc4NwpbA4rl\n3GBUV+yOkwcTtaj47E1Xm2X4PlH58Y3O5okcGaSqg6zy6RfT529RTMfH10cO\nIDQiPuUOUHK2nhkWxCb2o3MrHSZJxZlxlcvwVIkcXS4HF4o7sQoWgf0Z0QDn\nLZXq5NPnlGpmdDLhnkCzb7XBR+/6HWEu1P/wK269A+N45KzGrL/bTNaxpsAB\nbgfLPNJVGdSZuhlm0HGHq3RTg+CK7wh6U0fBriAbZOYFFPEiShPkVryCOPJD\njzOnN69zma9s1SBJ4iJ9akR9qGejF6rhEt+spx4Z8bUh5Bj0cNMVWlfEAr42\nneCXyr7vYYqgm8KFR6GRQYUzMdGFQhIgKZ0lLBwSVmzbGvukxbwj712Vcbjp\nhh0e\r\n=XW6x\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGnOWfh+h7VoF2ANFJAdrr5SthCyQiFDcGRryxGUOz7OAiEAp1s/qPe/aCGyGnMv8PwCD14/Y96EirU7uIuV/xtEVx8="}]},"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-formfield_0.16.0-canary.761aa6f2.0_1590010222717_0.4855739409705375"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.f8654c40.0":{"name":"@material/mwc-formfield","version":"0.16.0-canary.f8654c40.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/form-field":"=7.0.0-canary.4ebce8d78.0","@material/mwc-base":"0.16.0-canary.f8654c40.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"3b845b0ec744d5631e466e04412254ba2fba6ec1","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3b845b0ec744d5631e466e04412254ba2fba6ec1/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3b845b0ec744d5631e466e04412254ba2fba6ec1/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3b845b0ec744d5631e466e04412254ba2fba6ec1/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3b845b0ec744d5631e466e04412254ba2fba6ec1/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n*None*\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.16.0-canary.f8654c40.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-opVdFPv1gqg4vNofZl845wu9iaNG9KgnTpxDNDYvqcqhuS5mfmgnWC7lSARIuCZh68e9wNoceb6dDK+5JV2dJA==","shasum":"880ee96c1952b98f43cf7b0a8409304570a06ffd","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.16.0-canary.f8654c40.0.tgz","fileCount":16,"unpackedSize":48243,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexaOxCRA9TVsSAnZWagAAHQ8P/2nPNi0ZRoUjtM81tRhh\nrhbIU/1USti2V0T4Z00UzMtczUE65wQelJzyKDbgdAUryUORpSD9yPoozPja\novC74/1e1HdXVJirZfpG+haIgJeVrxfuLMHK2k+pagJNBwVlQ2VmA42yv8y1\nV7IuzhCTlk/yCwBNaBj6S6mSEp8ce5TqzTMtKEzNJtVLR65btg9o/OTTMlHN\nFqC5iUxm/PUEnG3Gpo2aIKm2iYP+pJ/6tSGgVZ/UFiRc346y/Z2QEdRQD5DN\n5Qp3filKrvwadsPuYwd2yMz/uz5vpWboesG7sncWPUQRlDL6jXdxY6muiqdn\ntXgCINgVH1SMa4XSHUGktSHeKgQbcYnCTVPg22q+JxmsRjnCaljO6gwPp1tu\nWKzr4Is0o2io+85DmsajtIz/IJU5GmL3nUV5jpvjTnUORdVTygSkNE0Xwwr7\n4Y38zHhgYZCjjecMQfay3nQ3Ktu3b0Vq+o0ssUsLKnqlPQ0nrBeEwDx1W9Ri\nvtE7V+uP/hOP1dzr+fipofuS63OolYiGlo7XRDiynPlGWhBKTPjOeQJZwUXq\n61NGqPTwsgk3K7+FBYUFvEBVaZNVjCwPdjcexwzg2dYUss5dgvJfOHD5TMWF\nzmecT2iZZ3E/4iS1AAvDsWPYYnEmHc8uoeGe8HgjtueJgxusrJxzKxyWmWWO\na1ey\r\n=0fHW\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDp/9GJiuXW6rCSJj8kUv2WX/+HAMEImZszmh2+BwBtPgIgZn689pZoOGKRkTUEkWM2OrEWiGxiCfk9ZIFaZqNf8EA="}]},"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-formfield_0.16.0-canary.f8654c40.0_1590010800459_0.34768368443332065"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.05f3853e.0":{"name":"@material/mwc-formfield","version":"0.16.0-canary.05f3853e.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/form-field":"=7.0.0-canary.c67667e8e.0","@material/mwc-base":"0.16.0-canary.05f3853e.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"47fd7bad9cbebba6f27bd4bc85aba3a4fe6dfeb4","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/47fd7bad9cbebba6f27bd4bc85aba3a4fe6dfeb4/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/47fd7bad9cbebba6f27bd4bc85aba3a4fe6dfeb4/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/47fd7bad9cbebba6f27bd4bc85aba3a4fe6dfeb4/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/47fd7bad9cbebba6f27bd4bc85aba3a4fe6dfeb4/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n*None*\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.16.0-canary.05f3853e.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-xNa88akX4PELZ7dkMRyXSdnoNAgClRWX4SNUrAeaH+cZCATc5pnYSKqFgtLTsO3pUZV4t+9luKYyz7N4d85U3w==","shasum":"6caa68aa5f5b50ca16ad7bd48860c6e0f7eb20d2","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.16.0-canary.05f3853e.0.tgz","fileCount":16,"unpackedSize":48243,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexrtGCRA9TVsSAnZWagAAsIcQAIkJ+UUYZ3rXOGkNOVza\nbghrje8RJyoaWjteYwRQdJ5t0XUJCJUiAGuJ3g6Nobiuk1qSw+bXgYzvDlb0\nl+9q9HOSwlDCSRvyIF0znJXqVXHB/dE2RpbKKoDggcNdDfMdXNVzzNoqt8Vl\nzxR+vJnaFZuHwUtXJRqj6RLRcAAqqmpsn5qRcPIYyyxLhuoj1VjMeI3L/YoQ\n80zCAV3s+fKf/dRxYSKA0VvM/GPm3QR4Jwc/tvMP1Cqk01owyoA/ZZr8YFAi\nZUW76EnGBW2EmH+V4RcbUHsjc7m2PoMauah3sNJGXoR/HE2HtdcCwik++SSb\nojqCBxZISg87ZhRAW1WniyDllP0JyzI8lJXw/ZDARWqdtqVY1TSnqc2au/SB\nrQws4zW5X8NEr8Bad/0M/dRBlkQI6AW4xb2Jo3ggA4AX9LSV66gEGOJaws/U\n4zcODRRbrpOkJ4O8GlXT7j9JzHdf3VdfI/TQchTtuI/1ZP+K+7NRjJL0pD39\nkhiYZ8WzlWC5XGs1+nK4sFx5HBv92tmjCWz8BVOBuGVivuWl1dSO4o+nBUQa\nCzhF3qLAvF27uusAPkdp18HSGN0eWfRYC5rRkZ50D2XAJ9icHlcwSl7IEeJ6\nMorcGCM+fHyVHk5FwTkVibRRoGxMmrqNw+Lrr+dEepuaKJypbhs7D9+VCbd3\npLhN\r\n=G48f\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCyWIh7RhNPINKCTvECL4EQZQ9DvN9NL8tUUeoTXGjvPAIhAO/gHW4kXZ5gMEfXQQFwTqrKg6idM83/MrNvGfp3bG18"}]},"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-formfield_0.16.0-canary.05f3853e.0_1590082373278_0.8985267604072962"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.5fe61f4e.0":{"name":"@material/mwc-formfield","version":"0.16.0-canary.5fe61f4e.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/form-field":"=7.0.0-canary.c67667e8e.0","@material/mwc-base":"0.16.0-canary.5fe61f4e.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"7b3ddcc96480928cfbc9538fcd5a840b5ba5205f","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7b3ddcc96480928cfbc9538fcd5a840b5ba5205f/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7b3ddcc96480928cfbc9538fcd5a840b5ba5205f/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7b3ddcc96480928cfbc9538fcd5a840b5ba5205f/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7b3ddcc96480928cfbc9538fcd5a840b5ba5205f/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n*None*\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.16.0-canary.5fe61f4e.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-BAsUi3wtGp0ybWrKxn3CxaycL21dCpZuHS/v6GLD6/UhBQ2FiqIsAbexhWg7loRzbR7bqv7in0kN74bKfUZ0tw==","shasum":"73bb147a6d47530d283b065482d43fcbb2555a00","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.16.0-canary.5fe61f4e.0.tgz","fileCount":16,"unpackedSize":48243,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexwl0CRA9TVsSAnZWagAAMVMP/1UENBY53/xWrBEuZrH8\nVnF4rlOjHr48Tig248ajWaEYh6uDibjA12gi6YyOQRIDiTm5A7h37ItTuFPn\nTuRh/zlXGP+sJKTs3lAJJWxQlzRJpTh+MO9A1TQehyf1XLPWVDq8SNQ/XuHU\n911/hEDBjBT9LGgszoKgcHOVtKeyTHFazIAkOhLFLZ45jHgn2fGgyHsG6OTa\n0x8jkziX+VkmwbRZa9BFxA5WdxfMhIsVLMGc2OMcZ7MRYyALxWZf+KUyouPq\nQr62ktsBwHSIFRNE1PFpwuFCd7/7IqrECUOvncFdSdIyzSq5wMo1jYhonlPR\n+yj1SF9SehWn910dceNEAbL2B+bkThU0agKid3VKmkBwxg/Sf8FA2bvjDCcj\n+ZyK3TIB9T8V5Cpetanv+Ah29nzbGP/IKmFvYRYifrh5qkKRqOn+uyLGjZXC\nI++SeY6WunxYbNcjE0oeej9FEh0Oh43VH4JWjHHIPP1lXijUr3/+d0r1LKOf\ncoXsFY4Y3dm/oIqWQsulP/yayJ4Az7HbsyLCsrr3VdkMlQ9xVh7yZ08KQQ9l\n25KyR4mUV0vjJtFeFXnktmuO1sOZtiWRE+h9s3Etsu24+RZ+2by1cV8YEiOt\n4P2to1PzU2yKFAGO8ZAmqxV1NdnWuTjgb6pB5qGE+OTijwTVuFWdleBAiQ90\n57H5\r\n=IFW3\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCinJnNfSNaXowpel7SrxaJOibYTFqog+cW8r4gh14wggIhANw06oS51al5MFHp1nQ/o+vQfwhCo7BNcEERHCRAEqXw"}]},"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-formfield_0.16.0-canary.5fe61f4e.0_1590102387274_0.6698554573674891"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.17d33745.0":{"name":"@material/mwc-formfield","version":"0.16.0-canary.17d33745.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/form-field":"=7.0.0-canary.c113fc942.0","@material/mwc-base":"0.16.0-canary.17d33745.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"b97ea4369af06c50f10fd7a5fedf708bbbc380cf","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b97ea4369af06c50f10fd7a5fedf708bbbc380cf/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b97ea4369af06c50f10fd7a5fedf708bbbc380cf/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b97ea4369af06c50f10fd7a5fedf708bbbc380cf/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b97ea4369af06c50f10fd7a5fedf708bbbc380cf/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n*None*\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.16.0-canary.17d33745.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-8N5rGGL0GeXkeRa6LLrmzlvMhfPlDKRVqLwCtpG8zNNQb00SU/EtZvUCjz5flmSrG+vN2f52ywDGge4gCVOCdg==","shasum":"25571e297095729aeef43e698dae38ace457e77a","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.16.0-canary.17d33745.0.tgz","fileCount":16,"unpackedSize":48243,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJezUAjCRA9TVsSAnZWagAATkYP/2pD5GNtFdNoAWaVUka5\nS88JFc0Ec+96ZMp10iYB65p0GqAzRxHcMhMUEA/5xkFW5iJ6PsYM7+x0nXAq\nqGbAcgdsK7wSwgF6/OKEXPEON7zV5hBq5LvhHyCOkofIDQ0Pf9KszVfPRRwG\nZQUv+uz5RADcCRMN2lUJqJWpBNehuzVthOVfNgul9QP3RXDHKq7894e1uZlD\n9p2ceTqe3xTwy1JL2/O7tJXHliKAX1ev/ELkbIqTV/b+2L00Uj0wAjAcdXLh\nTaT1jcktgrixHUiJ2ovsrKemxuGHWICjvMRqcrS6U8hRLwTsi/oWmUpmqatk\nyBIOMtYYhoOeUWUo3mZrWrOQlZVZvUmO+vBvcMErs2gv9yLma18nvWeMAM4b\n6fiACzxHe7d3XvM/b0rZyflts394SuJONfaOwQSzwXA9c/8dQDBCnk8uNoVc\nzpVzFzM3PrAilDj3oUhRQyRjMcUJyfc3+U/2mR2M9t4dWDuS5ncHJfTN/fsD\neX5PA4chJwdp/6fwlIdz1rj08muUZCytI5td6KEhYlPlCHAvgwmAUXHpwWtd\nicV0/5gsmH30keH1Cm+faqt8/g6/nGfENiU2azI498f0QPMaI2ua0fh/Qkc1\ntfy6GyZxIaMrIMglFRky7VVTcYMKtGQPOvo/LPUBmAtrUwXZe6G4tSrFJx7M\nWeFr\r\n=9n1j\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCx9NlH0UHDC8KZqEziMeMtg0mq04NnSAAWwSgjsVJjvwIgWUQQ7rOcSkA6ZhCWKjaedVApjQJ0uewqrvQUASLj6xc="}]},"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-formfield_0.16.0-canary.17d33745.0_1590509602988_0.6177398713466102"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.e8b52f5b.0":{"name":"@material/mwc-formfield","version":"0.16.0-canary.e8b52f5b.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/form-field":"=7.0.0-canary.c113fc942.0","@material/mwc-base":"0.16.0-canary.e8b52f5b.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"2877bdfbc0560854bc1aab7aee7ca63f798613ed","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2877bdfbc0560854bc1aab7aee7ca63f798613ed/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2877bdfbc0560854bc1aab7aee7ca63f798613ed/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2877bdfbc0560854bc1aab7aee7ca63f798613ed/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2877bdfbc0560854bc1aab7aee7ca63f798613ed/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n*None*\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.16.0-canary.e8b52f5b.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-3T8DmmjloAxrbdYocs/nEYzU/D1HuCPBON82lzBV3O9iZb0+7pUt1pznWx1oC+xqswJE3EkFtOzgzx9hPtDXzw==","shasum":"df8e5a1d2b7616735ee7d38134788b4943166b54","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.16.0-canary.e8b52f5b.0.tgz","fileCount":16,"unpackedSize":48243,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJezWL/CRA9TVsSAnZWagAAnXAQAJlUrRGTEuYgIOF2/1Sr\nhuRIlcugC9K4b5CoDcG2i563WoW6q6drZ4TBLk8KCPGjjZAhqHPpa3MEjefM\nPUJ4jbozv1XXzA2fsjAB9LqeQXffRbvJrA33916Th5e0h2VZKSgpCOYprT0D\nzqeIzH2KrQEu3h/0kHXZLwXaQbJAsnZ1dBmpFTiCoNUZ0Kvfq9/tW7/rVL9p\na32afWfkoHkvp10VNu29N5lkIx+nAJLcOmNVV2jmA22HxhFolsi9eeyGv5dt\n1PV5oSsvEdB96aySH/9aQRDzg+MqxaOAlgnfdHoY4uBNWy0XVXLD5ixpjr9A\nRBHteuWUDrsZ9uCDiYtZlhWYew+762XYcih28NMna5UdnPlQoLhChHcXHgzv\npRm5omGhwrRzMKJ6bAz2A/rXH6BNPt9cK1v8xb+6StTKh6ysOF+GaMO93oXz\nojG9Nr2ZNQDEHfMU40yFw81pkl/SmZK3NMrgk2acZQ3JyO/DMvuQ6Ig5y2x4\nmXO0hvfCcdDjRYPabYVnKmE4DpTJTtg03RjpYHpRnGSPM0Vzp3MDhn/tOeCD\nROzyh+8/AyzGfacWBXqqYhkU/iqH23xVXlUn9XWu6kAm0QAQfIcPVVOL2mhq\nAC42S6ift4DCgyVL6RPvYQmyLKEGjeHIy4/U1y1tTo+0im6czkaRb1q7Mt2/\nBJg3\r\n=zlqI\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDxo38v57CUPmBbMKetXbVTY6PnY7RZ8lapPqhkOiqkJQIhAKiVcu4Ms2QMaIZTcdAzqOJ1YV7nRm5N9a/8iSNvp0JQ"}]},"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-formfield_0.16.0-canary.e8b52f5b.0_1590518524266_0.6772947561848475"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.09afa0a9.0":{"name":"@material/mwc-formfield","version":"0.16.0-canary.09afa0a9.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/form-field":"=7.0.0-canary.01de07011.0","@material/mwc-base":"0.16.0-canary.09afa0a9.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"924f688ba033093a21706afcd1d5b3dea4527355","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/924f688ba033093a21706afcd1d5b3dea4527355/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/924f688ba033093a21706afcd1d5b3dea4527355/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/924f688ba033093a21706afcd1d5b3dea4527355/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/924f688ba033093a21706afcd1d5b3dea4527355/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n*None*\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.16.0-canary.09afa0a9.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-2OY/gNme+MfmJxO15B8xvBW9l4baoOr0xFIipnSXYDg3Ef2kn5hMaQvrpYPGylYlvqm6bDpj0IAxBGkh3yLLkw==","shasum":"3990fe2fb0d77d31919f368ee36c1950f3f49a24","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.16.0-canary.09afa0a9.0.tgz","fileCount":16,"unpackedSize":48243,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJezY2KCRA9TVsSAnZWagAAg+QP/j+Z+BaipPIeNR5Uz4a7\nWgIdZFuvtbiW4fcmnrU2CzD0w4v1rxAQV9GFHo6K5FhNe3BAmW4LLT7i39cv\nyBdeteUCvXBACWg+GKJQLi6KWjpZ8nprqsoSoVsmD7ZZhu+QjJZEDjPWPYCO\nCVhdlaKkeIpG/sddkmr/SrobbADmxQ6Sc8fYvn1l8vu83pv92E9FVMFCQQ/n\nCNJlwt5+XTmcOwEROZyjkxZJ5Sl6Z9380d2+4v25J4sKXmkRDzVWRUj313pB\nrSb6KmnFEt3Ofclm14gX32HXsy3PrVDRKlWBfpThYLl2+6kPkEeGYtp9pkqC\nnplaEXNc52ILgoFCvBcuP/7sJkzA3iy5pdd/tTokVrBWYIDWloTtJP+HoJZA\nBDl4q8daoc5RMC56Q7buaBcIz/TOfA2uYZJdelRvJK2/KkyAFhORPfjVY3n1\nx+GIAKHSemroghdHevEh0G7jTvPx3AwjBGmjfhpDCSdauJWiOkD0Iq3lkOY4\nrz6Mr4d21CK8VySKM4Yq+3YyZ5XsEyxd+fBv8ncACMMJsVi29ci6tysBN28i\nAn/PFg0pC+UpfwR37Xp5ibN0rFtccw5pTynwb26RdWjq0ByAEw5tlTN9LI0Q\n7J2ifQrhEiYiSW96qfKgMQFn2IeYSc5P3EOSptXmI9GjynhyWOI5BTI39zZf\nVPd/\r\n=BHZP\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCGCO8vAH5Fvz/DzGA2Dl5x5RmioTOT0+RsZv9786O1CQIgaXXC6KoFTKB3zoYS3xRqF7OU7eoAvnllPJfZ1xldqDk="}]},"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-formfield_0.16.0-canary.09afa0a9.0_1590529418425_0.27691920236000067"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.58bc9166.0":{"name":"@material/mwc-formfield","version":"0.16.0-canary.58bc9166.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/form-field":"=7.0.0-canary.d91794c7e.0","@material/mwc-base":"0.16.0-canary.58bc9166.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"71845a1e43b7378230bcb8e8fec40f195da11c2c","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/71845a1e43b7378230bcb8e8fec40f195da11c2c/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/71845a1e43b7378230bcb8e8fec40f195da11c2c/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/71845a1e43b7378230bcb8e8fec40f195da11c2c/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/71845a1e43b7378230bcb8e8fec40f195da11c2c/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n*None*\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.16.0-canary.58bc9166.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-0e+mHXTIbnjBJBletaHzy8gdx3AP4Hjhk2R0DJTMWoQ53swWp9lwNEBy0EKBElaPf35HCCcZB2EiK/3NXSzpMg==","shasum":"893356edddfc08ce55c46987931b4c62d7bcee5b","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.16.0-canary.58bc9166.0.tgz","fileCount":16,"unpackedSize":48243,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJezbR+CRA9TVsSAnZWagAAzuEP/igGGJHypVymA/w38YJm\nHvTMH5OqB8Olqmni6JgPh2AhTYgcJVzkDZ4qHXkvcZRiT9O0lvqvMPlGQbwy\nhgymKX53t1HWiWGhBlrjcfAdyrcUkuA6FGc3YnizCkeAvKqKdPTSQ9/1IZe0\nUChspskP/P3prOai14ztfakYBLvWX3/kyci0qRvakp8uW0CvMAqGOrKcLKgY\n2oXrrjhp7W2VE+HKPfCIce1zFyMFAVJKIdLAYCSIPcnSZkCDTxffY0RZTbex\nr+hn/wFWKj5wqu1cCDuG4uh3TE35dEYdRyi3enKazgvjptfhyNmf24/arKSP\nTww1mZIKRhdwxCBj92fJXhEgsp4D7ze97dfi8htGZyYAuZ7XfVfa5dFa18Lz\nCB4P4qvebsw+Cqr0dV5SnizSPovKmbFcv+kJeisDWbeV0wMVkAHPCMuYk/Pn\nWIZdQZEoJ+g6xMtGJWTZbN9OAQWFIl2tFpVvIx6+DHgqa+eCOKTSQzoTX5Oq\n+sxfQWZcixCNyIB3HQ9+oUVIF3cqjwakjF5dK0HpaFE8K6Pck04zXLbq6B+A\nuOkaTzmvnkJWx/EolsBLoSZyOPuGtp77uOFHPbOWa+PaVCs/1XlMZi6qSOqb\nFULvg3SiKFcDx3tuGjb5PzRrmYcnWfjHBnpKiEYckTWammJhKnUB08aVuC+a\n3zGc\r\n=wFpD\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCCDPEbIZeX/6IMOiC2bkb20wzPFbvqyFol35h43B90pwIgO2TJ2BvJmK0jAjrBNnpNX0PyE5Edlbrl0Z3LDaQYuM0="}]},"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-formfield_0.16.0-canary.58bc9166.0_1590539389587_0.4822761796587194"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.43bde144.0":{"name":"@material/mwc-formfield","version":"0.16.0-canary.43bde144.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/form-field":"=7.0.0-canary.d91794c7e.0","@material/mwc-base":"0.16.0-canary.43bde144.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"eb504ac1efc09a16041fabd1f3fbe62a49717c77","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/eb504ac1efc09a16041fabd1f3fbe62a49717c77/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/eb504ac1efc09a16041fabd1f3fbe62a49717c77/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/eb504ac1efc09a16041fabd1f3fbe62a49717c77/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/eb504ac1efc09a16041fabd1f3fbe62a49717c77/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n*None*\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.16.0-canary.43bde144.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-yeAJQaLMWVIIrP19TkSn4QzYTGlUtnmpZ3DJe5u1nU3PikS5a44zqJANeNVX/ZRZzqXuiPBai9GSQHhVIFXqWw==","shasum":"fc9413214585351adc03a87f49d77d644422b46d","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.16.0-canary.43bde144.0.tgz","fileCount":16,"unpackedSize":48243,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJezrFgCRA9TVsSAnZWagAAYYkP/2yGdAhA9tBSuWvmFhng\nMxPbbaQMY8VbAOoLfH3NPsfr0BDOIW3ooMj5cmFYTfcI2GR1NWTaWkxlsWJE\n9FK7oMnyZVGtUJ6AFao+LpSdkI+/fcMcauCEycMJVColaljbXxCwe+kF4Hsw\n3m79odCTw6bgymyFsFXp0MQ7V3D3GhXta5DPMUBlt7nvVUwUGS1A8NMeA393\n2H9+Fnx+KWWZ6bFvPsvGvrCt1Vuk1734E2DlsGAg3eD/ju5YB9SGmN7wVT0y\nHPhj5si/ep7F9L1rwVRyOKtsS7m4wMuNFr5v7PrYmCb+Gf/asjkIgfIWG0TJ\ncMhZtLJsQM928Ar1qC1Az3ozLW/h/PZZILxl4Jym5x4+gwH2s7kB9ZJB7QLZ\nLCNxnrt8M1RBedRQnKS0v6LTkngh81JrynfVoZwRTvf5qohwKDSO9bVFxfiz\nDK5KGrezkzItEH+ERUp4gt9hlU4qu8LY5xgRVp6RB3oPpRhicXJlCj99Lkmi\ndH/ayQfYDPXUWthgzPxAgeukVU9Z9doSx8yNEYnOT8olHekLDV016zrTdIVd\n7dfSPO0U7vkl3ET63V8NoZsOvosiyogdAe8M5Jc4GYcyab3hWgY9Xnmu16XZ\niHHOTf90labU47GD38ED9oMsYoH9nLA/uxL7niVFMkJMiwgZziJa0lAenrMU\nGEDU\r\n=pxBm\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAs+iRHkPdj2iZzWewXVALbjqjtz/4dW93czlt3Z3h1kAiA1Gi6wS54GvBW9sdFWKbxotQRGZeecK3pSEtLDRrv++A=="}]},"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-formfield_0.16.0-canary.43bde144.0_1590604128212_0.060092704693487375"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.51067bbc.0":{"name":"@material/mwc-formfield","version":"0.16.0-canary.51067bbc.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/form-field":"=7.0.0-canary.d91794c7e.0","@material/mwc-base":"0.16.0-canary.51067bbc.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"5dc99bc495fa061e0960f717c69cf33620115937","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5dc99bc495fa061e0960f717c69cf33620115937/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5dc99bc495fa061e0960f717c69cf33620115937/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5dc99bc495fa061e0960f717c69cf33620115937/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5dc99bc495fa061e0960f717c69cf33620115937/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n*None*\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.16.0-canary.51067bbc.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-Laxw+oJ4Up4OMP0W0Hkd5EYvw5xVglO5HGLAB/nVOfFnM7nzluv9pBOOAhf2p/UYPUjDY1h8vax3/VPSfhXuHQ==","shasum":"ece7d411c0fb67ce5b1b143e1c561a43e260a034","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.16.0-canary.51067bbc.0.tgz","fileCount":16,"unpackedSize":48243,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJezsdmCRA9TVsSAnZWagAAs2gP/0NafSoyPV4WG4Ly9IBP\ngYXbK4UT7uhGi3WWeIc/X6fGRVgmiXHt7RzoAyLVqwq3XNDYEXjkl2PwQ8p9\nWcL8A0QLAAxKTMCsKHNEZ4N2CJHmJscSjL2FBqDvuyVyiBdP73dINzcQEmDg\nAds1SMBBtdLE3tQF8551o8O/KtMn5DFZnFWgfGauaDBcq7o1byg8VE96rZAS\np4C7AMfMjDj072PNuRPBK/O4sQ8ndnyJw1mz79U4BTFXqiznzILJR/JpuZvK\nxgj557jtCkpemsQkyFLGc079OIfPKpnZFKhel62pfZ2snT1onOvLwffUMB6N\nF/6QeOBJ5YnltRLWJwtEq9R1Cu0s3mFSxORsi+/0F3W84ctXybamhZTCzu/Q\nPjSWFGysxXI8eH4MrQHavJIM4XNNkUNpea6m12g3sseOD+qDpFoDkVgf3UjH\n5ca9gyKNckWWCklQhBSgfLoY5z2Wv4m9271h+1k7Ekzpo2Vf+W2SUCjyQvaI\niUrUzrfJB3hLOtlKh/CQCSIjD5VZR0oN1gfJLQaPoxWl5Jkk4QsDRgf32D18\nexABLXiM8ABVeSiWl4tU5UW6HJgUxebfSjjO4jEJPk7YWvHcH5mq5ywNqtwO\nd0gha3LuiOTEocQlE1xyNIqyS0Furyqy8aDvxV1Fm9353o5keDFQ/oPw2Wqm\ncR4g\r\n=xhx4\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCz/Df7RxqhmvTqYakSlNwnpNM1Ft5d447SK2dPlOZwAgIgA5/rSabBIf4TXLzzP9piruWJCqPmUburYykAN6SbAi8="}]},"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-formfield_0.16.0-canary.51067bbc.0_1590609766132_0.30637268139800544"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.92751ffa.0":{"name":"@material/mwc-formfield","version":"0.16.0-canary.92751ffa.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/form-field":"=7.0.0-canary.d91794c7e.0","@material/mwc-base":"0.16.0-canary.92751ffa.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"534233b7f60f5860c6a4bd35799b98a3c5d277b1","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/534233b7f60f5860c6a4bd35799b98a3c5d277b1/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/534233b7f60f5860c6a4bd35799b98a3c5d277b1/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/534233b7f60f5860c6a4bd35799b98a3c5d277b1/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/534233b7f60f5860c6a4bd35799b98a3c5d277b1/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n*None*\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.16.0-canary.92751ffa.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-SK3Zqi4UzjN9KnYhT9wAur9r46WzsZYo6ukmhtB/YwIqdSagGkZq8LVGsMq9gI1RHDd4crJqIaSamQRH+Zq5ow==","shasum":"9267f8d2ecef3e2b6bee94c9135f481d8cb92e30","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.16.0-canary.92751ffa.0.tgz","fileCount":16,"unpackedSize":48243,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJezt1GCRA9TVsSAnZWagAAF74P/0pniM0RjN5s95qI44ks\nTRiaqUBWj2TPUwchUovYbWBcdwn+hZ69K7xUY5fRItbcFblx0ihv8pVrBR4d\noo4bSPkh23RXL3uCtH7kl5C+TMiy/yv1FU7fwLQDzhuLA9KxxgPdeclMLyHL\nkYIrdEaOST+Jm1PUquacAI+shbYeTwzF+VePXBqCIkNa/J6BET5pyCqihHrv\n8q37TG+I+okdpqcPyCSPwJoiONb8MC3wdfQ3DjZnvdfG0z+f+G3rL1SgzAXj\nCpMG9XHGZwKV74DM6gGJWKZgmN3zWpUJqoxUc5mtRVsUvw0g+BLbvglzv5Si\njanOb88QaXhBbwvjA5++AHsy3RfO2oxKRfBYCbVneNjzuYPh4KU9+9UR8wR4\nZHcWNQelM+mqstG5nM+EEI7fEcDaygCJ6ZG5URgMEs+CEJigPgeEjAnaqHMk\nzKEcwu+/BycMLD0Ir9+kB6fXiXG4OOT9Uih26M/uk5fH3xOPnNEPdAalnbeF\nOiapwBoaDR+d2rKyo0vJ0Lu2KDi5JWKxcw3EnMSwQ82ZsjUrkmZLXTktyYyp\novGtAaYJVEQ5urS52dcVXVhFMShDvRCjlQ2RaLts+ecveiJ/aYc92BgGBHrR\nod0uD+N4Fn7PO7uXgY7/Bcbzql8Mv/odE/CE4Iur08Mw2HqnJJFGEoTxcEg2\nfuID\r\n=aH1m\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCID+ftfGc4H3MQ+y0SMNuFX4S5anHRpXpCMt0PjydvZSrAiEA4Rh2woPt7fn2BQNH+pAc2ykxyYJNyAvziOVdCERuA0Q="}]},"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-formfield_0.16.0-canary.92751ffa.0_1590615366267_0.5106408097869912"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.aa2b40bb.0":{"name":"@material/mwc-formfield","version":"0.16.0-canary.aa2b40bb.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/form-field":"=7.0.0-canary.d91794c7e.0","@material/mwc-base":"0.16.0-canary.aa2b40bb.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"2da9556d449ea1f3ddfce5e0978fba83f759a1e3","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2da9556d449ea1f3ddfce5e0978fba83f759a1e3/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2da9556d449ea1f3ddfce5e0978fba83f759a1e3/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2da9556d449ea1f3ddfce5e0978fba83f759a1e3/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2da9556d449ea1f3ddfce5e0978fba83f759a1e3/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n*None*\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.16.0-canary.aa2b40bb.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-teEPPEXG0hqqRYjJSF18mse/jGUU8nz5yc+m12Dh3cPGaDTem0eLATgF5gD0KdiaUC7rEdkHZch1IXd7Fk3Nsg==","shasum":"7505e88e7692940d2f6f0ee28411ab546b3813e7","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.16.0-canary.aa2b40bb.0.tgz","fileCount":16,"unpackedSize":48243,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe0A2RCRA9TVsSAnZWagAA+2QP+wbVnmlCCRd58UQdoTCy\nS9KmBMvIXbg4PUr2v9Z+L/sNlYcJ228SC/9GIQV1n92MwhA8o/fl3kypXjt9\ne8HNC6VzBSjoqd6LNaO0IR4ZhPD9PG4yclYpruNziO6R2dWCGU0WlTpJAhMv\nxtUKmTJfx2MSkHt9+q9w767Ge9DS1/J2Tvn8xmodfOf4Y/w6zaZTwPZz2sOe\naeDgk4m1oZoUn7myOztXOh9pO3d431HIwu63MGKY+u9ik6dA0pCV1zMGPdxd\nFIBpuVTPhMkPsKU8spVSHjhhfKzgfeqQjaG/HPNsrsb1ewIoaCF9WKpJYC7H\nUuDyT83A4MG8rCU0i+e0RL9i9+djxLATbovPAXmm/rYiwTPzPio5C9ukowDd\ng2FFSe7cc44718Nl8C/jar71rYufiyF3vjdOwpSbDseLwZHaDHXg3jsq7tjy\nN9EJbYrB23cMFqvIyBf8j8RTKdwHTlsHdlq44lqZIY2DseLzYsIZQsrnyp9g\n6f+HE6Ct83Zt4b9TshiZQct5nktgC+ud3OOvQtkvSMRFc3gim8NMNhSapGKw\nt0798fXYkheL306il815xgTY90LToyzGm56azd9Kbe4+f47RSnRVne1B+NPc\n84arumQGXniI6+2kWFI1oc+aVwRwyuhMkszA9lVbVp9aFOdvHUYclhx9VN0g\n1rnp\r\n=Tuom\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDIBfmS8GGCx1W1DDH2iKTNXE7x1mQG+F+f7ckGRYQeBQIhAPmXBdBejsoYfCu+zQAN5vuCxHkrG5qWO6/9vA4CEu8j"}]},"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-formfield_0.16.0-canary.aa2b40bb.0_1590693264586_0.6977308792372892"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.1a870a01.0":{"name":"@material/mwc-formfield","version":"0.16.0-canary.1a870a01.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/form-field":"=7.0.0-canary.d66d22bf9.0","@material/mwc-base":"0.16.0-canary.1a870a01.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"f9a61196d2e2f42c5bfffe7dbe30411a16b908a1","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f9a61196d2e2f42c5bfffe7dbe30411a16b908a1/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f9a61196d2e2f42c5bfffe7dbe30411a16b908a1/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f9a61196d2e2f42c5bfffe7dbe30411a16b908a1/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f9a61196d2e2f42c5bfffe7dbe30411a16b908a1/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n*None*\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.16.0-canary.1a870a01.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-2AnylE9iIiggrM/wX5RBjvI2Bc2J6R0v12wTWLss3xC3Gy6OlUFwnGXe/lF3ZGxXd1O4ujbbbFa9R+DVRjIeJA==","shasum":"b7859a22b0182d0f83c9d85db79f3aaae9c7f81f","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.16.0-canary.1a870a01.0.tgz","fileCount":16,"unpackedSize":48243,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe0CqUCRA9TVsSAnZWagAAn/kP/0JI3Y7EYIDb+yLDj9cN\n40mvrXQq4XBl5L4gRkRWiMp8FnZpHKyZkycBK0nFMojSFsBAFhSyFPQdtin5\nk4i4ehy5LCUufcw3pOomkWilpW71wKgYNiBuWUsakbRQiZdv7XcGF2Yt01l2\n7C7ieqHhdjOxWMBphUVP124HTl7lh+2UAcQhY6NTpuTJsszXl+YyYlci9CTN\n8E6Oetg9zyKV6gWztqE8wXwM1AiM24HJ2aXagstYs9abYPMMsvWfYZMrRFaK\n0FygMqgYicu40LpMmsFdealTv8HXVwo6xadyrdP/9Jz0L29t8KgY/wXhSH31\nk6vsgbOtKhzTDeJdRzfOhdZFwWMkHaWRS3MvE336par8RwthFF2bdMDwUEm/\noVxOMqJkN4Vc4KI+jJVbaAFavMnclBJn+p8OXo3wafHIaLFyCiswYZ9Bxnz1\nnGfxVGYzrKtrdkp9RvkEglMYd8G/ASy/bTjA6ItEdOeiBRHSidKxJxai9+HJ\ng+piRAGzQB1YCdTfQSxBSdURz09hFruaru6nP/GWYOI28vnP6aAPqd9zR8rv\n67N1rZfo6c0izaLbEuNCAHMN4GTbjjGG6yHHdkzKtuVLbjDLH9fLl5u1rtq7\njPYBtPlFADta2nVWND3ItSroALBy03YcnFVj/+58T6Eb5T2zH678Rxgvtsdl\n76mu\r\n=Y8XH\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCgIthE3GddtaTuy57SeBjveVJPrMrw+ykPHLPNvxIvaQIhAN3HejbnX8fHHxnyFedtMGVWx5y0ZK7Ppo2TNXabJUAt"}]},"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-formfield_0.16.0-canary.1a870a01.0_1590700691965_0.25107066249603727"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.ad57d086.0":{"name":"@material/mwc-formfield","version":"0.16.0-canary.ad57d086.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/form-field":"=7.0.0-canary.d66d22bf9.0","@material/mwc-base":"0.16.0-canary.ad57d086.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"718a29a398b0baad30119bd852a5e1bf4d8e8e3c","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/718a29a398b0baad30119bd852a5e1bf4d8e8e3c/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/718a29a398b0baad30119bd852a5e1bf4d8e8e3c/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/718a29a398b0baad30119bd852a5e1bf4d8e8e3c/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/718a29a398b0baad30119bd852a5e1bf4d8e8e3c/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n*None*\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.16.0-canary.ad57d086.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-Qd5Ac4FCKzU0Q26kVBFqVSy1GDiN/Pj7bGMWRw2yTHSdLMThFmfx5YRa5MtIXFljM8FPBQePyTw4pOgk/qIB+w==","shasum":"fc0aed55ac29395af24526ad4295089bd9cc8e2d","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.16.0-canary.ad57d086.0.tgz","fileCount":16,"unpackedSize":48243,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe0Z9hCRA9TVsSAnZWagAAl9QP/3pwI/R+pbQN5OkDFoXR\neFH/+yUXFnYntjEHPuyvAKiPDZrhp9pP8iNiC/qg4SSGTHR69BdeEOTKxudW\nnGHK72v/FoBI41T20qdG5hH3Divte+k/G4Xi6Ve3VZvs1b+8bBCHDPoo0j4K\n6rJx2WamfZ5BIXOZL/OkK+1D7jY2KRL8uc+CHWa71iaSj/OQpe/ToJrJeald\nb2yaJjP9JqGKesgnJcnVYjqk7rmFDXDi1rbEApKavom0IVpvrGE63WjPE95c\n1g3W/JmvL1ulKBOdfETHjU92xyuSSx+fYHC8krD3S9BYSxHMe78hTTSHxdbo\nKevac40k72QUsTl5xa87cykKkMls9oiAaXtvKRzQ55jmydIYkRcGIYlTvUjZ\npQ9NKq0/b37jHpDPmz6KwxmLTn6pzXx5ffsHvl09hAOGLdgdyuKEM7DnN410\n52VhfE7CebuLgvz8gR/oEMnjn+yCeih59so6bp+GVhMrULKPY5IXef8ypRoG\ntDPvSA8NKyziEa8Hh5jq+ZBxrgHbGYYzLVuBdcxu29nU9rF2X7bWSbbyqxZP\nBquH0cjqSnGUFJSMv5fZsxWeIqRa703Jh/IxsMaITNoT3GQ1A9/VwDRUKPGt\nbQPGY+QdXI4DIjfmk/34+5IdNzouTyeiOxFDcd75xbyrYJ4rL9n8T2f54mEx\nfIEc\r\n=4bmz\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEH/k6A9BOyMVFsKbxM38/WnaW+0Nm37TOLPFCL0BFj9AiA16dmQL6fuYSV5+a23+ukZGL5RIyzfFstaQE0LywkDrw=="}]},"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-formfield_0.16.0-canary.ad57d086.0_1590796128397_0.6612303072689767"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.3bf2b4d5.0":{"name":"@material/mwc-formfield","version":"0.16.0-canary.3bf2b4d5.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/form-field":"=7.0.0-canary.8073a20a9.0","@material/mwc-base":"0.16.0-canary.3bf2b4d5.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"796a0757a7808c623433691d3c52ef63cda47751","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/796a0757a7808c623433691d3c52ef63cda47751/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/796a0757a7808c623433691d3c52ef63cda47751/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/796a0757a7808c623433691d3c52ef63cda47751/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/796a0757a7808c623433691d3c52ef63cda47751/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n*None*\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.16.0-canary.3bf2b4d5.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-4NgL/o0VdBCqhxrel1HMOKss3TnbCV1jCYDoMIyRwvlHBRn+cE7dZJoC4GMtkWwFvg7YzbsPabizINDsYtNQaQ==","shasum":"dbcbe0bef7468888185ac8a7bc3dc08639e1440e","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.16.0-canary.3bf2b4d5.0.tgz","fileCount":16,"unpackedSize":48255,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe0ap9CRA9TVsSAnZWagAAUi4P/REv10E3lYv4g+UMIDgg\niLDcyVBpSq23KxmA7rrErhxbbutpKggP+g1Nxh8DOLNFieq6p1BlNFn4p2ll\nql/hPTvctfIst0LOzyfv/tysRk2CTuE4JlI1RANUdwx9MxsFrEOc3Ogj/UrE\nUEXCu0sCRTk4Y8kS8HGjS2/VehKbpyMl7XvNQBGJdToZK1mJILFNUlZEye6K\nV5pPbqnRxhCNg/KOnmrSw32cJ0r2sbzYkwo4MNRTXv3UUAU32XrdeJxGBjZk\nrQ18sct4XsI/0KUjW7AjX1sa+rPNqbzPlD541LiB+OnENFczg3m5ICbcZ9Wh\njrqyLZ/tA/MBoE6JDaQUVCoKXhr9fd2OIEKeDEeNkOu4x4o20LLB5hWU+waS\npAaysZPj26Lpsug9MvACi3HPuPr2LRAZPqGyL2r8DSd26+O+5CX/21Ovtyo4\nx4KwPVo3ycurmYeG6FlnSVcPDEt/CZYCZQfEGFPijlconXtAO7wGFEBslc1T\n8w9X9ufytdxfTrGrjIpntuUr0rBDUSn7dCcizL8VNz5O52Ty+RbEV+i1akbo\nbvKjjyLER6/fGw+D9fw+wMQ6S1wTln2HRdia6rd91ituf9055dCxQNBP87l9\nBwG6ArC2a1fQuJiHzwE8ku9EDFtN2nIJ0jgN/1vcMp6Q6fo08BNgJwFIqxpC\nfJf3\r\n=Hn54\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCnusXI+IA/4CsnyBDEH/xr32Zk+wEl7FLxZL3dr7osvQIgD1hgX/jdA7ed1oD6RT40FfZ2gRrjRGOH5OtPxw7VpZY="}]},"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-formfield_0.16.0-canary.3bf2b4d5.0_1590798973308_0.968667737919328"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.ac05f090.0":{"name":"@material/mwc-formfield","version":"0.16.0-canary.ac05f090.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/form-field":"=7.0.0-canary.8073a20a9.0","@material/mwc-base":"0.16.0-canary.ac05f090.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"dcf12105ac71a486ee350d7b7fafeee2e7fbba2a","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/dcf12105ac71a486ee350d7b7fafeee2e7fbba2a/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/dcf12105ac71a486ee350d7b7fafeee2e7fbba2a/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/dcf12105ac71a486ee350d7b7fafeee2e7fbba2a/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/dcf12105ac71a486ee350d7b7fafeee2e7fbba2a/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n*None*\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.16.0-canary.ac05f090.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-kBJYw5KxlsYPmPxVKvpRkpTmmQ+vGoTHOPQ/MNrshm+leTnP8RKle18oLTI7OrxHwB4zKyqlvO6WvflrrGZW+g==","shasum":"68160025f5a18ffea15a06afcd26e0b988fef6a9","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.16.0-canary.ac05f090.0.tgz","fileCount":16,"unpackedSize":48255,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe0cm2CRA9TVsSAnZWagAAmucQAJx68WexmnXDrSR1Xmb0\nOYoRIvv2XEoLIN2acyVeUxk1ME8aboJYhL8LVeQkAsNx1dY7xxFsA6VMkqOi\nxteXZx/CTP9f2WaQRYAprTKVNHNzJovHIYl97u0ZClEVM/QnbE23fszh19JE\nK4BYGpCqhpfS+aRcqIrdnhdnHSK+SJDBh/A7g/XoZUif/DEa633b6NE82SLo\n3415Yr+lb8MexHJ9Gzqqp8Vz02sTDl/VMZPOYTdDn6Cdh72RIkiiLJOZQQAY\nCy7PFiUWMXtoAAHOMvmhU57Ka4XC6I8mh33nTCwttgpUkTt2Pl/4x1/aq3Te\nYEZcuL0h062ccbjS52A/UHnXlUASktVnKO0SEcNRl/wjA4H4aErC1MvPO364\nn89/KlAjGO0m+jqsJutQmhLDlCEdduKs78aZSeukfSesielqYC5ikYJJeFUk\nMOMBVGwc2Rri56gOVIA5vrmh/jj0Pv5Eqas1ID41v6Qaht6WPLusCIlTds2F\nmigEoxVHZ/S6t5fo/ynwpYCW86EhGx7js9TXefB3NVc1yYlekewUekWp/QNy\nX9XWtLYPtUVmzlXxCSufDgLmi8iXXYz24EPwqCadc72HwI1Q/VAiow8h6/kY\naSosD0uzGcTuYTGMqgiiLeBvuZ0H7fddXR/jt8I9VR47ED+a1xVIQ2sNO6dt\nGWZa\r\n=XvP7\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCogz/jua4XLnZpc3UME/mv+nOdnOnmJgAb3srEz+d5IAIgMFCnQadQQ30lL+QeluJCljv5Sl0aFzDqSMNTOMFgKjE="}]},"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-formfield_0.16.0-canary.ac05f090.0_1590806965853_0.18199601437565605"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.0ba7b095.0":{"name":"@material/mwc-formfield","version":"0.16.0-canary.0ba7b095.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/form-field":"=7.0.0-canary.8073a20a9.0","@material/mwc-base":"0.16.0-canary.0ba7b095.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"ea87617c8c9beaed33b593554f344296ff2b1702","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ea87617c8c9beaed33b593554f344296ff2b1702/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ea87617c8c9beaed33b593554f344296ff2b1702/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ea87617c8c9beaed33b593554f344296ff2b1702/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ea87617c8c9beaed33b593554f344296ff2b1702/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n*None*\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.16.0-canary.0ba7b095.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-5Djyiud7Eb32ut5z7ONA9lyZLveNW86DqOnGsZ6JqBQbSM0+hhTp6W9unRfq41y6OVmnpY8Cg7yOqsupWX2Lwg==","shasum":"e60ff8c8b701450a249e76037534a3ddc3fba248","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.16.0-canary.0ba7b095.0.tgz","fileCount":16,"unpackedSize":48255,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe0ctHCRA9TVsSAnZWagAAtcgP/RLQU8JBBH7A1msa+y9h\ndsvQdheMRDMz6klW/3fJpFPx+FIk8UGLWyEHjS149fuQEKrBVALREMutBDo8\ngqTets9qcvrxAfrsP0ZHJ9NeVrTd9dzuex4P++23vY/BsMF1uxB/dF16azcl\n2ly+2HXevwNsYM0U9LmAf21YsNRFAuM622MXgkh6G37Z7W7GRkOVuMk3eAnj\nd8/3ijzZszpzGSEYikvB84cdPBKSKXYDT38r0c4qw8r65AUrxHoXi2BFDVPx\nw0OnXN3o8RshqJP8uJ37xeixDT2PwvGmDeZ900762Fk6xI7p6EwLOxVzjxxZ\n4tirN1OMHuPj1lep3ScZJ69wjmLI7LSO1bQd4qMB3+RolLJQoBAwyGuKrDyV\nffHaRzFHxHslJqbOypTmgoY3nbODgjcqMhr9qfxgDvZZ2P8iFwktc1ivIb7X\nELsxv/9ONr8VURif1yzipqZAdC89FCV+75fm6rP/m/YteVdPbkHbOXAdmKj1\nXKNUFpG6QvLHqiySfWY+UyBnkcS1AqPkvW7N86PgZCC1N8V9pCdh+UoOS6Mt\nHDfy9dl2VtU4GMsaMiNLJquDfCYqdS4YZlWIDvapupAVD/oToNy9/LUcmzJj\nE9XkvpER3cjTeQI0xUfqUsxGRIxaF7+ZvOsMrA4IOZGhYEP1mVmlScRCmdBE\nupj+\r\n=ElBi\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAexQwqokNQjf2+YmkvkLvQTdo4Hc27GjgT+wbCsEtHVAiEAu+caOynep9fbmJ5GTcmI7lEi4oTbifY04+Ha14uY1rs="}]},"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-formfield_0.16.0-canary.0ba7b095.0_1590807366948_0.15906722333886658"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.5eaa9bac.0":{"name":"@material/mwc-formfield","version":"0.16.0-canary.5eaa9bac.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/form-field":"=7.0.0-canary.b9776b1d0.0","@material/mwc-base":"0.16.0-canary.5eaa9bac.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"971c5d20ea684615fa18f3c991d77704a2435384","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/971c5d20ea684615fa18f3c991d77704a2435384/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/971c5d20ea684615fa18f3c991d77704a2435384/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/971c5d20ea684615fa18f3c991d77704a2435384/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/971c5d20ea684615fa18f3c991d77704a2435384/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n*None*\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.16.0-canary.5eaa9bac.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-/0nK6Fewurr2gXkp2D8ZgkCuCRtZlQS+gQkYIi6uuq1gXzbI2F41buUc/zqfn2DYWM0t3cIJ5CAwG2xuAsGNVg==","shasum":"273360de4510511a5fde7aad398b5b914db9e5cd","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.16.0-canary.5eaa9bac.0.tgz","fileCount":16,"unpackedSize":48255,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe1Y8WCRA9TVsSAnZWagAA2j0P/A6RzE7fB2vcCdLmUlV0\n7Shg0pK4Yplj+9oVlunD2gEohfLTf8V8Kybvc53i4BjqRqPX8WosaKQJVPcX\nmnTOo8TNnwSHUK6gByfQKXbCe6R4SfO2m+hvJcJZkKI5ono5cKQZbNfJCGa2\nV4ctg6LP0QgnVswjCpTdfuavsHpPA9w8MqA5THaZbyT5SLrakWTyyWSPVyJY\nO3qAraihzAGWG+6R8g7DFA3Zkbk57DQrvIuYBmYEcWLjqC3dyySv4NhB8Wh7\nd8XUAGVgF5qZx3hH9nUepKRoPibsrsg92PoIkGo05wHVdCZW7I5NEFAkVme5\nL09+lj2NroclTg7FlN6IrZZ+rXlJ2xzZNhou9sQCrL+EW/bhrjKV3OBqHjj9\nqzoEqldivmVWG4SePgw3rJraCyjh9ByDPN80TjGgs2hGCBIiFqGtbpahbrmL\nYdKvOhhUGkUVfnImacy1uewqVP0O8ynDADW5Af4v6F0qaxzU3u4Pa2483GR2\n3VctRxsh6T4LcjquGVAZIwTBcc3fMsMqGdCto1hvz84m5tzxlni5bgA+0BrJ\nYeqO2toxhfnUwHwRxkoIPo0L4LoHinFTWLqlq+cMIb7D3Beh6vaSxY1A13l7\n55snI9j0JJG8BJVAAOVswYoz1HyUUaTDqN/s9wD9vmf2Fet5AS4CyKOCTqmv\nx1MA\r\n=6BX1\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQChwYv8Jvqh3P0Lwuvefo9A1e6pK9A0aYrqN528FvDCsgIhAMfDLaB968tfY7heD4IHbWOwuSReXX/6kL1lfu85WMRL"}]},"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-formfield_0.16.0-canary.5eaa9bac.0_1591054102365_0.5955450534257816"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.5677ac20.0":{"name":"@material/mwc-formfield","version":"0.16.0-canary.5677ac20.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=7.0.0-canary.b9776b1d0.0","@material/mwc-base":"0.16.0-canary.5677ac20.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/rtl":"=7.0.0-canary.b9776b1d0.0","@material/theme":"=7.0.0-canary.b9776b1d0.0","@material/typography":"=7.0.0-canary.b9776b1d0.0"},"publishConfig":{"access":"public"},"gitHead":"371e5022a95234955de71585477022efd63b4645","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/371e5022a95234955de71585477022efd63b4645/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/371e5022a95234955de71585477022efd63b4645/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/371e5022a95234955de71585477022efd63b4645/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/371e5022a95234955de71585477022efd63b4645/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n*None*\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.16.0-canary.5677ac20.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-YuImu6krPf8CI8m0ISgW+UfpcaGj0/L+sSZwEhHhSbeSsM5hEc/lnoj8n4Hd/9eYBiuqEaZuiKBHhH+yqUVa7g==","shasum":"ef1c9fc4545fb6632d25d64afe2ff5f5c84fcb24","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.16.0-canary.5677ac20.0.tgz","fileCount":16,"unpackedSize":48468,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe1ZW6CRA9TVsSAnZWagAAUdMP/2/19F0TUEXjDKvl3hWf\nysDglnlN3jSg71eOmLTh61dYtAJWcALDGA5mgSDWeyER99JlcZwyB83az5kR\nzmxrgVXuTfcd35Imzka/TpG/5CedkGNKp0vH4g4s1sqzOI8ij3/87Lo1Ssy5\nCj6ZlwAJU0RZyDADiFbb6PzJi208Rfu8nJwWclCvcwDfl5ZQMhR6B4nNElzP\nKpLYRtCdFYTCHNx9Pas5fARF3k85CWXjgs0L7Du3ejT8c1JAORKeGkvgUc1g\nstnrvMzl2g+mk7bVyd52LugmsWYa15EjrLtOXe0WpdEi7LW+BBhoM2Y+tM1T\nrBbAdLifmmZ0snvRs6p2PnyReJAKL/FWMfTfiaPjjq9FT//GyPmB3D/OSiD1\nF5Gcm0/KmvdjKr6p8a9K3DoVobXLSOO0UVUebD0dGZNgVp18RRUG3+5EEpa5\nVOeBFzlu4gEpP+OpM1xNXROO77BLsub0Sv4KC8ZsrhyyNS8YcJRktBeEswrp\nkKpr5MHRvmwK3OQGLOuSFt2Hv6lPqYPr8DD8D1QNH3LUd7osg0V5EpvGaa/k\nuuuMOXx6ogFx2SfuyC6d9T2ajZXN8wtxS/wzpjqHF5OX1N+45Vhqh8K0uOdx\ncMPJODAv0vBBVaiH+9eBJzvLcc9Kljlsbf2QD1IRWjrBhMajlQwLtIwaCtpW\n+oF5\r\n=xerP\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC0tjJijR2d7bQWOcKIeLxOnNVGKYmY9YpB6fYlJi69uQIhALX4FTlRO6mlGkKxKKow09oi7UTT7KdMR2LDwi/vsYzc"}]},"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-formfield_0.16.0-canary.5677ac20.0_1591055802223_0.9801513303778231"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.7ac6bff4.0":{"name":"@material/mwc-formfield","version":"0.16.0-canary.7ac6bff4.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=7.0.0-canary.b9776b1d0.0","@material/mwc-base":"0.16.0-canary.7ac6bff4.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/rtl":"=7.0.0-canary.b9776b1d0.0","@material/theme":"=7.0.0-canary.b9776b1d0.0","@material/typography":"=7.0.0-canary.b9776b1d0.0"},"publishConfig":{"access":"public"},"gitHead":"393ff5005fafa04ca276d60639975d8bbe851f70","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/393ff5005fafa04ca276d60639975d8bbe851f70/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/393ff5005fafa04ca276d60639975d8bbe851f70/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/393ff5005fafa04ca276d60639975d8bbe851f70/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/393ff5005fafa04ca276d60639975d8bbe851f70/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n*None*\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.16.0-canary.7ac6bff4.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-z+PH2qwpyUkuGkHm6y2sEGOu8RzX4dTdAn4cmRE+NTcQJcTZvKJ70Ru/BkY9ZMaDwHW8ToRyWWRPAQJvMOxPLQ==","shasum":"f8fb2ba58fc2ba3de3e4fdeaa55305b173388ec5","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.16.0-canary.7ac6bff4.0.tgz","fileCount":16,"unpackedSize":48468,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe1ZoTCRA9TVsSAnZWagAAjXIP/3Wi5ZeA160xx/mC2CCi\nmhCLRZq924xceSXZ68caKM+18BSZ/izyW+Rv6sajv8tbD2na8HaBgLdzn0tS\ndieFC8UFidY5LUiHrMMRlTiUYk1SaYEgPM53McQiYdityga1nmAdCsa5YWpK\nDjVWbKE+kJh/dGk45FbVfpYbQnG64mD3zWIuJTHDOuXX326ClVzEdLVO+Hv4\nujRoJfARCIyAUGUwsKJmrMlRC5Otkdv6voaq85avNhJWUQUeP05lYEfkds93\nuVPTkDJpIrIb4T8IXX+W1TSpZ/mx8Bbp2cZcQWiPqM+IgLVpYhKpcO1pKa/j\nT6i+XqXDPdO7TsAo/bTM4LVjPq6UOLpLQNus9hGlIKPxzCyV8/ZRfsOl78g9\nIP4/owismUD+97LNC1LttzBx5fp6Ud/emPMgsR7vJ4uLNa7p5SclaFcroqKb\nJskHnfdVu0zyS1cAIvicf+FcxMdNJlnuDMkfmqdjYJMbTqaSXNdqf0m5AM2K\n0b53IQ9YGaoCp+rAQE3vRHyxvwr4d/CPiGmjQN/Lk2snYRhbXWfQcAMEacVS\nxWRP7U8TbH+q0fqgpvjK1q6qyp9MTQhjbeiCR9/GO5RBgMbeRyCC+/9Rpk33\ncZWy3E3fu79PZ3N90wx9GneWUp2+aUgSxromXAMF6wqJH5LHZX60YVMmKQx/\n7Ly6\r\n=OAyU\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIB16wMrV2+0U1O325E2SygKYhXOVHyQVTJ/DxgqeJ3ZwAiEA+cVtd9K01J9xrLdFPW9t31ojz/UE8+BrNZbyNAkQyLA="}]},"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-formfield_0.16.0-canary.7ac6bff4.0_1591056914613_0.824795368088681"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.d45622aa.0":{"name":"@material/mwc-formfield","version":"0.16.0-canary.d45622aa.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=7.0.0-canary.b9776b1d0.0","@material/mwc-base":"0.16.0-canary.d45622aa.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/rtl":"=7.0.0-canary.b9776b1d0.0","@material/theme":"=7.0.0-canary.b9776b1d0.0","@material/typography":"=7.0.0-canary.b9776b1d0.0"},"publishConfig":{"access":"public"},"gitHead":"ec53ab9a7c87df6783ef1e555aba6d7de86c46eb","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ec53ab9a7c87df6783ef1e555aba6d7de86c46eb/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ec53ab9a7c87df6783ef1e555aba6d7de86c46eb/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ec53ab9a7c87df6783ef1e555aba6d7de86c46eb/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ec53ab9a7c87df6783ef1e555aba6d7de86c46eb/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n*None*\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.16.0-canary.d45622aa.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-qk8n3+gfVquXtUb/6kJcpQDymsgoL7HvGGxuVkPNdMFElbrUEARdBiIsKYZKscr3XxlYkbarYm7CgaYNaEe4TQ==","shasum":"9ee34c42907aac39da6d6679e060d857294fa2e7","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.16.0-canary.d45622aa.0.tgz","fileCount":16,"unpackedSize":48468,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe1uSXCRA9TVsSAnZWagAARtsP/0h4rjNGz9mDklQDcevE\nHc4ZUF4/d7STJsqOeS1xTM7UmQg9jgHPSDBkPgUB/YZ9NhxVfzww+GwWvY8s\nZ5ZW505MHLGy/R5vQuLLcWBZrhl/tMC6He+zJHlR8zvWKb/Rjo55T+I4CBkG\njh2hMZ85xQiYoiQVm86hHz+x/2uCwiLTMDZq26q1V3WZNCb+Z8VgGAx0aRQX\n8s5KoTA4waTTJwkbxpsPnJZ8DQBQ1iQfs7l6nCe8IVvdOsj1CBIHD1yECwUK\nPJmwIcx/tFeeAztyeOMjcv521RGMULh6YebVsMlk0N5tp1rYezRs8PsHx9oB\nPlbwJFdAlAkTKu46SOXqAavt45v543sSxwJ3UErVd9v1Fd9RcL1PPXytjJ30\nEBcN90Cce3ynkxh143rB4OIOJ3RUBIQCoac0qQewlmWmFwrvNipdr1vrJUTf\nQvM83NJO1zKsbX9y2gwtBt1EXAX/l/62ax2sXHjaLAUa9OCofN35/SFfPGar\nLdAvW7TQ2J3713bJ4I25ZtiIJnByvLApW5Hgx8ZgaEFK5cxGdAA6Ge1EYlz2\nJnffgWISsKntwdc4ebnuWJxsgJGvJmXDF1xRMJzwS0mine9SILM5Q4cSg7PC\ngj4Pg6SpbHXyT9sLcJHjGcN12NBanUr5CbecXWkvU3BVJeUASN5MzxPx5wnc\nkhO2\r\n=1g7P\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCY1EP+qUwD2vl/z4SreqrVqA7+taNSdsE7bZQOY0/iwwIhAMElVSLcM/xWjElm9lmKnUOy3yu5pwZihLahqz3k+toL"}]},"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-formfield_0.16.0-canary.d45622aa.0_1591141527495_0.7107868573247744"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.dc26c709.0":{"name":"@material/mwc-formfield","version":"0.16.0-canary.dc26c709.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=7.0.0-canary.a0dc2b5c4.0","@material/mwc-base":"0.16.0-canary.dc26c709.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/rtl":"=7.0.0-canary.a0dc2b5c4.0","@material/theme":"=7.0.0-canary.a0dc2b5c4.0","@material/typography":"=7.0.0-canary.a0dc2b5c4.0"},"publishConfig":{"access":"public"},"gitHead":"58a25b562ae31e6c32c67599f842dc6bd1f86398","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/58a25b562ae31e6c32c67599f842dc6bd1f86398/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/58a25b562ae31e6c32c67599f842dc6bd1f86398/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/58a25b562ae31e6c32c67599f842dc6bd1f86398/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/58a25b562ae31e6c32c67599f842dc6bd1f86398/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n*None*\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.16.0-canary.dc26c709.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-TW5Y14FsmzJMGeqlL80tLYDMfNx9/4L7xpu2dSQZ+3Xq+kZ73mbsD3q12lJyy1Zk7onz1MdIPkGU1+gHxULkTg==","shasum":"199cf88b393b04a6304947af0f02ae46b68e73e6","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.16.0-canary.dc26c709.0.tgz","fileCount":16,"unpackedSize":48468,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe2qkRCRA9TVsSAnZWagAAfEoQAIFfGg4Ch1zDSQ+DALzW\n1E+dsR2HgXc6OnNtPxHWHbQtAwr688xPYbmgZrpDJhmQyZI8umqQkgONDdwG\nFRe6DgJ+KHCINocf+qtIKNOhQWbROIbndxE3VheNVvvlvJtaIqei34vQf37l\n9XfLmxXSex2DIcUKc2ZgdkJdshr29S0YExmvJLon2NXqTnXu4S2ALarfM7uw\nqaOR0UmGym3+QO5y0QLxCEkKFFN3l+fxoxbGxq80mjqiTbwu8dNLXzZzo2g6\nPjS6tpTwMYjF7w+/nvdW7bmsXpcGqiAW/2iJS8uzRAlGP3YHS8Or33hUStoU\n0mkwLEyD2D5l7Cp7CmmA7YI8rzwV52w23OKEOiIlhA/sADCQhA/j6b9qwqp5\npQrcL253BB+04GDsXs9nsCh2rTVuaKRZHhmGPlm4jFwJLI6VcnyDBYVWMLft\n1APvToVi6Kz8AlBCGayVDC8lxKRF5vuvi+8kexV0VS8OhY9NVWs4EzwcUlVN\ntDfdIyNOaq2gLXq9AJO6RrImkNjVUCVTksgdNF9S1yXBHOFk4mULVGsJVXFi\n+GapOkocuc8yjBy81vGFJwUr4ERKFlCbpTmLmDqj+TVn8cCNoOF/xa1FKwrK\nVh3qrtbzROoUWeDbHhVon6pA0exZwlBHDsVcDtuuS1KIIRvn9dX+QSw5Lx20\nxTlb\r\n=VL7Z\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBw3QNul9DiZcETvyT4O47i8ECU6q4oOh/8fMBoB9BFeAiAceTFrbCr8v1BBzDtD/Mk+f5sfKJZ0hsZniwdT6IWSjA=="}]},"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-formfield_0.16.0-canary.dc26c709.0_1591388432574_0.6176025917562824"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.b9baf6db.0":{"name":"@material/mwc-formfield","version":"0.16.0-canary.b9baf6db.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=7.0.0-canary.a0dc2b5c4.0","@material/mwc-base":"0.16.0-canary.b9baf6db.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/rtl":"=7.0.0-canary.a0dc2b5c4.0","@material/theme":"=7.0.0-canary.a0dc2b5c4.0","@material/typography":"=7.0.0-canary.a0dc2b5c4.0"},"publishConfig":{"access":"public"},"gitHead":"911d44443a75be4f249c595f2fb8a90e42365c6b","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/911d44443a75be4f249c595f2fb8a90e42365c6b/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/911d44443a75be4f249c595f2fb8a90e42365c6b/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/911d44443a75be4f249c595f2fb8a90e42365c6b/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/911d44443a75be4f249c595f2fb8a90e42365c6b/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n*None*\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.16.0-canary.b9baf6db.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-qDsZh+Zr8111EnS3QOmLT3ZgI9EKnHqIiGaohfIw6Us2IoBXsfmukboeTPYtV6gPkeF8LKmD2r75N4OI4QEXFA==","shasum":"fc37a9af737e547f707e137f70f03245616033ea","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.16.0-canary.b9baf6db.0.tgz","fileCount":16,"unpackedSize":48468,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe2qlsCRA9TVsSAnZWagAAPq4P/2753aAY3pFk6raelq5r\nTARRlpT8QAKLKMis/lMXjtcxI33tBy27HOhPsu3dKFxN7wbFEWTIjWz4QikG\nFFNEU1ZelIbI1jiV6othxyIiRSnSLJOJVi4rSv3fitzesGmgCkaFWP+qQMdn\nbkukzGXGsNS/hdu73v8E5iKasAyL3J7RRQbUZF7K2mZdK0XbOGXGY2nN3PU3\nZBdIquLaUFTgKsSePDB5wHAH444v7TPtFMdJIYYxAc9LOZ4MUOyHkwZ3IofC\nVERzS3JMq9c++GF9a7+r3LdbY2SXqWb7vENzE80SnerUHH6c9RrrZ4F4GmOJ\nSMHwlE5ER73Hn36GMTZ7BDuZPYbskntvUqNhgM8v6RJ5AvpYfOvZcwD1cKGJ\nfW+ZgxLrS/xAEdh6piseS3s9NuLmkCBCtuLSJ1thKBR/JJCTO+LugeRo6Dfx\n9BTboja4kxiINw9v8LeD+a7o0qnW27VV2u+hWLZl71Z5V1UO+QusAYZ0ofN3\n891SmD3IV58sZoYEp8a6qaAHGZwGd5cnv5QMiO1HnBbPr1/Ng7qyIL+osfpI\nni7SsGe1vjRGJm8oVLMUTaQIXD3AjVcT8PwnIKnvdBhOPq55A+eQwVrWSrHk\nDs+qPlYvRLzMgKrORPong5+TOB/Ernb1Tsi8Anr7dfYvJJDtWWqZiU+ScRGd\nsI6w\r\n=i/Wu\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDy5g9iQKjG1Gsz2KReD5N1qnO8nbjOIPkfhPkOqQdCEgIgFbpZAEpSgiPoD/AuoNbvT+CRnuMOVA5Z2xH3AS36298="}]},"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-formfield_0.16.0-canary.b9baf6db.0_1591388524374_0.44548496909052115"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.e0b8c9d0.0":{"name":"@material/mwc-formfield","version":"0.16.0-canary.e0b8c9d0.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=7.0.0-canary.a0dc2b5c4.0","@material/mwc-base":"0.16.0-canary.e0b8c9d0.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/rtl":"=7.0.0-canary.a0dc2b5c4.0","@material/theme":"=7.0.0-canary.a0dc2b5c4.0","@material/typography":"=7.0.0-canary.a0dc2b5c4.0"},"publishConfig":{"access":"public"},"gitHead":"8067f7c0024a048e98d327efa458b70ed21da6e5","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8067f7c0024a048e98d327efa458b70ed21da6e5/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8067f7c0024a048e98d327efa458b70ed21da6e5/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8067f7c0024a048e98d327efa458b70ed21da6e5/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8067f7c0024a048e98d327efa458b70ed21da6e5/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n*None*\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.16.0-canary.e0b8c9d0.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-GwL/0AikjlhhjojX6aug8PzASL+7kzw5f2dqmIuxjKsyfsHF9t+U+ASH0oGQ65E/8dZy5QQb2yFCgTSD+4Zqgw==","shasum":"63933b2a24396de2cd70fb522558e8d599269dcc","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.16.0-canary.e0b8c9d0.0.tgz","fileCount":16,"unpackedSize":48468,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe2s9xCRA9TVsSAnZWagAAaNoP/j/7H9Cxr6v4xwTXNKEZ\n4zA/v6DMc/PXmq826DnGboDNjMGRTiKTyL7qWfCz5He/fECxShffg60nw4sm\nUvnGcgv/OhxCpDyCtx8oRG4yDz7TU73Hkc61B6W1zprYJhlqAtNuos1zhTXI\nbRoVwBstqzjyOY2fHIABXP6/ouFqudQD75nPLbZV+2N4cMcp7vCf9XX6HAOv\nexQ9zW9iQrryyYx/YDTEnWeI/amTT1cMRjKnKeD+e9+I4sShF7EwxeYHIKQF\n17aSKA+JKHUQcMPY1NnYMhZVbI9z9ROovcd3wDD6Z7d4QGw2LWS5t+JIV9za\nQHR6DQbczM52Jz/8u6rFfIz33ALFkfuZ20miOeWNdRfJXNsZfGMW0Ml/LvgZ\nbeNJav+y/OPDE/X4zZpma4h0ieqoO74aj4TI9hqlCoS+faz0/wHf5gnfCVU9\nCWwVA6tvPYQx2yIHGmbs9/1PhQcPTOmFhBPEhJW/i/3KFwYGkNVKrWZ5XtS7\npY31Sma1lN1jWiK60tZ8OEUABtvpLtg1b7S+Tvhd17RkhkMQA2dlHfnNa6c/\ndaVZp8QQsWbdR7MRPjtcfGlmftwvDA8XaT3xgC6bz6w2okpDntE+Gu2axVny\nr4L0ypZUUjmsyH4zkrM4Mgt/LR5AeZ04kq8IUi3l6EP+RLOY/rYe9df0wWG2\nTKB5\r\n=ovs7\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEso9PwOqoYQv2b+flCl/SBwr/StB0YINC0LKxuPRhgiAiEAzHBZ29d94lAimP7OnxzVEE2gE+unJvSC9ifo4KLt7+k="}]},"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-formfield_0.16.0-canary.e0b8c9d0.0_1591398256390_0.6767465506414732"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.51552859.0":{"name":"@material/mwc-formfield","version":"0.16.0-canary.51552859.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=7.0.0-canary.39e6f71e2.0","@material/mwc-base":"0.16.0-canary.51552859.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/rtl":"=7.0.0-canary.39e6f71e2.0","@material/theme":"=7.0.0-canary.39e6f71e2.0","@material/typography":"=7.0.0-canary.39e6f71e2.0"},"publishConfig":{"access":"public"},"gitHead":"be62282108625892e385a5b64edabb5c9949ca75","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/be62282108625892e385a5b64edabb5c9949ca75/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/be62282108625892e385a5b64edabb5c9949ca75/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/be62282108625892e385a5b64edabb5c9949ca75/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/be62282108625892e385a5b64edabb5c9949ca75/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n*None*\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.16.0-canary.51552859.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-5DHcwUf8iNGpCcc5Ydlh2r7qlPa7JWd4a/J39Oi7J89eiHXEtjGCyzjOIFhBZ1OCp+/TINU8Hi+gNUNR7NNvGg==","shasum":"dc37d8ee906f34c41ff1114ecfd4b6245f797bfa","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.16.0-canary.51552859.0.tgz","fileCount":16,"unpackedSize":48468,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe4CRKCRA9TVsSAnZWagAAklkP/RIpmZKWtqLP9hqMifxT\nFtJd7VxrF5NntAKkYnviQMimcEuC4DdWR16CIOThxkSvoRkcqI8VViOxGJDw\nv/25DJnk9M1JYB/BQRrhrhxdX5O3BlbRwn5ljOS+7SuXKu7Q8GXXfitBhJRd\nW+jEN+LjVtBejH7kyn3NUJ8+OYrtyloeh52RH180UCTUjj2Cg4aqjiRSJ0yl\ng4rg9fF+2UYX1U8EjQIu/4vIjMf3SHHvkrJ650ZvD69ToGEcNgHRlkpbLN3I\nDhzQb1SBwp4rFIIKHU80Jkr4HWaw9Bn40U5e5wgqd35FrP3YXw2sdkgwDjPr\nt8SdvTiJ9l0m5wliA9S5IOkxZBXQoeQU9fGuU+bts2uKNdjndwP7MKryGw9W\npP0Iap3L2U62XXyuhEuO5fbEFebwoCKctnX/2KZAfUMfRZgpSlLI+bqcK+sf\nhMmhMuMIvBzes/luaBMi6wxpQbhtGTeV6lQltG2qcPHGB/BCylg984ueRrgT\n2bikiDgkT6kuMfOzdKA5rgsEo5pEQPuj3t0XQIx759uSZRDG4Qb5JVcypAQi\n35QwgWZGl0+9XnNs6mScwq4CJEVVZelD2+og8BJxL5tlyrXu2tFj7in7iJcN\nIQYju6RlaYDTCsgFWCVB9j45BRvgtTA/oZc6bvO5Pi0PfExMzYg4suUFFFFp\nEKdm\r\n=l3T3\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDxrw26nMCzKK5XR0dmQ1kDlah/YM8f0H6ei8ghkEpvsAiB68TWCChphS/yglIa8kGQPV9ntuQh/VlH2gedohjlQUA=="}]},"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-formfield_0.16.0-canary.51552859.0_1591747657117_0.698355587620779"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.2e269285.0":{"name":"@material/mwc-formfield","version":"0.16.0-canary.2e269285.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=7.0.0-canary.39e6f71e2.0","@material/mwc-base":"0.16.0-canary.2e269285.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/rtl":"=7.0.0-canary.39e6f71e2.0","@material/theme":"=7.0.0-canary.39e6f71e2.0","@material/typography":"=7.0.0-canary.39e6f71e2.0"},"publishConfig":{"access":"public"},"gitHead":"de64737d606dbb8ab6368d8fa30690e62fa24cb0","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/de64737d606dbb8ab6368d8fa30690e62fa24cb0/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/de64737d606dbb8ab6368d8fa30690e62fa24cb0/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/de64737d606dbb8ab6368d8fa30690e62fa24cb0/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/de64737d606dbb8ab6368d8fa30690e62fa24cb0/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n*None*\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.16.0-canary.2e269285.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-5FMqcu/ULapKWJGQgzvbufRoCKBYydNUJWjmyVho98anRnOlT7YoYGi2e+6iPj9N2ibexmjOKP4/K0qRIP5HvQ==","shasum":"89a36c13edf4791c00a3a7da04f9dbd0d6de44a2","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.16.0-canary.2e269285.0.tgz","fileCount":16,"unpackedSize":48468,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe4DjWCRA9TVsSAnZWagAAQNoP/37G3Yr1kPCgjHNgQyVC\n4PMpOTWR15gO53f65M59ArxOE/qHSO2US1CThu41pFxTAFm/n6G1dsGEo1n1\nGPpNXkib1+VEr/xuLCyDlYbrf4pPW2X4yIDYhqVZvYij2rUpn8PNK72KnOPv\n5VO8Myeo7jQdqwfrCAvNkhjjJj/1KITLUlb+AXi9ZAzutHVqz9b13CfD/E9t\nkPcuDqAi1iWDdvekg575eVZyNjF3sgVK+c6UAhllp6g/xmV0RFdIdNchFqiO\nDcVet14NTlJzx+3WABdRZHsAFtvd6a2dD8+EYQmtAIYu07EYYLCrKlMr77UL\nOeWdnYK9cIzB51gb5DQZNKYTwlfjE90ZHabjwuWiexsBfPMRw29ipwwOy67g\nHpUg/OvaO5mbD6TEq1Z/SFcXYwuwdEmahQX9VSYE4tkfSll5UFXeqTnB5YtN\njNTInrXTv6CK9ZELUAATwSRH/ih8A56LWMz8iUp8f8FQk8JIaTZo3Z8DDT4o\ncD71xGPMDtIYxs5BJhZZTQLxeRpigXVLwnTTYbC7IzspiWEJOxRWr5QR3FLJ\nOyAaOpR07v9O9AiapYEAjRyjEz3GgLTJJd1ka4BHPzqeUXwvYP+2mrTnzA8p\nA2YuyhAvSmhcuKNFGS3/o2zMngg+zmHKJaGp1JhcXC5TZzpI05L5iUrzpNRK\nbhnw\r\n=vHe4\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCznGsK17SXnihu6e6EG6jjrnf/TYGnWThXD8xDz7SzzwIgBlLDObOCjLhyxm0oWzXuhz9o1/hHSR8FzpUV2IGtbe8="}]},"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-formfield_0.16.0-canary.2e269285.0_1591752917630_0.7542662389089327"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.be138b01.0":{"name":"@material/mwc-formfield","version":"0.16.0-canary.be138b01.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=7.0.0-canary.39e6f71e2.0","@material/mwc-base":"0.16.0-canary.be138b01.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/rtl":"=7.0.0-canary.39e6f71e2.0","@material/theme":"=7.0.0-canary.39e6f71e2.0","@material/typography":"=7.0.0-canary.39e6f71e2.0"},"publishConfig":{"access":"public"},"gitHead":"cd3bec5fb787616d9ec3c5e011ed8224add04ad2","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/cd3bec5fb787616d9ec3c5e011ed8224add04ad2/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/cd3bec5fb787616d9ec3c5e011ed8224add04ad2/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/cd3bec5fb787616d9ec3c5e011ed8224add04ad2/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/cd3bec5fb787616d9ec3c5e011ed8224add04ad2/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n*None*\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.16.0-canary.be138b01.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-4zXLy+OGQolrALF3ZncwFjZZLWOuZ3RJ9HWkpGM2BOGKXn4ObNdPaUR9nRI5CEKuF+p6Y0WngywH+AWbHCmKsg==","shasum":"99e51c5626bd255b4c7bf4057b92b3de2599a835","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.16.0-canary.be138b01.0.tgz","fileCount":16,"unpackedSize":48468,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe4UctCRA9TVsSAnZWagAAxX0P/ji3aDV32p5YOp6+pX1p\nNm33X3ZL0seOh+tetw4u3Jcq1taaVfouX+i6bAcQbgs9Ld9BXmWxFeU0C7FR\n0jFgK4WqEPYSyu+lwCtRgKuI4MQY2jfPpNFsccQfPYy3EBNL3o4+glAJaojb\nGPOK6ef1dJsYphVHvsdPZFwVN1/Hk08Ma1kWGLLohINiwJBbNDFBJJaN1yHg\nd6ktw2X61ziaCtnDq/DNPa6QjzDWYhinNwpnzgSCAhWjZZwlXSPNt33Uc99D\nCACHWyDiNXzEn7KqDBDaSOACp4p7VMOFjJP+hldMVPUpZajsXDAi8DjkwyBp\nuAneAVh/F/X61iK8hoXozzblm1JyQpUKhjN4il/tDAdaNAKPbQvVTEaJfrbi\nOxSKzOMilGBKPzNEiGQCbBktwbBMqnuGGG4pW94z+Euc7qIgAGfqjdnN4TuF\ng8dZgSksIY3yhCK1sgLAwlunANrMnJU28mbR99gvqVNZ9xenq7fvMOsrQYuy\nQaaSSnOOMX3FaYIO/wUpjjbnRSZBMMU/KygB5DSBlPLIXH0WJYChlztN4TqM\nGccxsaFLC8LAwZ/g+RwBhbfbd5o0Sj2XFUVQJSfGR4TkzkLPA33jyfusfFSR\nAPOUo+OIu4tYDcBARkbPFuF5b3FQsqBlZjJqGao7T+Iu8ClAg1nh+Wa8NWiF\n3CiF\r\n=a/Ka\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIE0nbuxm2JnMtgUT/ROGvmUBYUrVJJ5qe1+wAtpNNcm8AiBT+/hEg9PcvBkHpUI5IDYmoM9C8GbmPkEUh9rq1L6fnQ=="}]},"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-formfield_0.16.0-canary.be138b01.0_1591822124658_0.04434072028364877"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.04bccf5a.0":{"name":"@material/mwc-formfield","version":"0.16.0-canary.04bccf5a.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=7.0.0-canary.a6ac8f629.0","@material/mwc-base":"0.16.0-canary.04bccf5a.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/rtl":"=7.0.0-canary.a6ac8f629.0","@material/theme":"=7.0.0-canary.a6ac8f629.0","@material/typography":"=7.0.0-canary.a6ac8f629.0"},"publishConfig":{"access":"public"},"gitHead":"c077c9c7d3e6ab509f750f7ecab7ee8a858e7d22","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c077c9c7d3e6ab509f750f7ecab7ee8a858e7d22/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c077c9c7d3e6ab509f750f7ecab7ee8a858e7d22/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c077c9c7d3e6ab509f750f7ecab7ee8a858e7d22/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c077c9c7d3e6ab509f750f7ecab7ee8a858e7d22/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n*None*\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.16.0-canary.04bccf5a.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-G+kpa1rl/tSNFCQl8C/EyT5cDtn6+DAQQUstHZhYi9685OYOlTnob9XiXBH9khdFQaBkF/IQdno+SyVBbxbCZw==","shasum":"8b2902fc7477db785560f09f560ac6274411e74f","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.16.0-canary.04bccf5a.0.tgz","fileCount":16,"unpackedSize":48468,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe6Bj9CRA9TVsSAnZWagAAJUgQAKAFdxsUW5flJecn4Ux4\nDaenzeNG+97qbzXaoGy9vip23l9gNsO2wsV/OnfT7A7st/WbF46kvc5yMwdX\nY4V5OwKIvrxRoGzfV5WpfMq6lQZ1GG9m/A0mEWkuA/ajkoOT7Xrk98P2vyZG\nNSjfd/gH2I71cIytFpVJuCITUxvbEImjA3Bevh+MlrCa9dqkKevu+ZhKK8JM\nCyt73Kw1VINGCn3f0/s+KfgLHQcHV+ijiNysWPfgllRkVaxBNraTfaTl3X3+\nNRRDwnsxZBsGzNsR8eD1O1e/rO03DkWPeF/pjNZK3g3SO91ixei3CAEdy81V\nU1sy43mAtApFz0n1v+7NBciYkUDh/8bg04iLxdxTh5Talb87GOR43E7fqFSh\nog5g/j82UO6IHu2Sjro9+OuZZe/2P7YvVnjnN+PsBnvovsr+eczWLYK3l0RD\nXoTAX0UYJdWy3BPvaYMaIalnRCDP0bbxWiMf32v05ZTsSBP51UfBjVpvMjfj\nQ1MCsrLSniBUAV+YAoeLa5SEpUoswTp/9CXIIITgtTrDuzrqIs3VSZCCUo7v\na7oBlHrLZxyU0Pv1upLrQ7LOCN6ILq3ryyIrlf54+uYtYBPNBh0/YXggoMbJ\naPR294ttJ4k/ayfhs4Aaw+Bcb8reli7Ntc4AvzUiBh9Z41cQzDaf72vN1NYa\n2CuF\r\n=v+q+\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEujYkRrHTdHo1qRto0JPGUThPqYqAQwWyJbrFGD/ekrAiEAiUcFpU7v0B6Uxl2RQqwRwh9i1vvZH1ShtuiX26UYDPo="}]},"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-formfield_0.16.0-canary.04bccf5a.0_1592269053244_0.10231423404915452"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.b44dea36.0":{"name":"@material/mwc-formfield","version":"0.16.0-canary.b44dea36.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=7.0.0-canary.a6ac8f629.0","@material/mwc-base":"0.16.0-canary.b44dea36.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/rtl":"=7.0.0-canary.a6ac8f629.0","@material/theme":"=7.0.0-canary.a6ac8f629.0","@material/typography":"=7.0.0-canary.a6ac8f629.0"},"publishConfig":{"access":"public"},"gitHead":"c3acae783f88caaa2b0db088b82e7b98ef4ecd95","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c3acae783f88caaa2b0db088b82e7b98ef4ecd95/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c3acae783f88caaa2b0db088b82e7b98ef4ecd95/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c3acae783f88caaa2b0db088b82e7b98ef4ecd95/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c3acae783f88caaa2b0db088b82e7b98ef4ecd95/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n*None*\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.16.0-canary.b44dea36.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-Jtgs/uPRyW0/62BntM9U3C60ueEaTHcU81oHunHmLOA0TTf6f79B74jpwlV2Zi07FWnLZ9PXtXORykGoOD8Hig==","shasum":"202d6ce7ccd184c6522ddc00b116f83ed991a27d","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.16.0-canary.b44dea36.0.tgz","fileCount":16,"unpackedSize":48468,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe6TIvCRA9TVsSAnZWagAAaWAP/24mGjJhMJk820d3y+wt\n58Lx/9B94dYj9KUj5jE86wiv0/ujjtsK3wsoYUkhqyVmoJ7XB0yKMfIp6Fbo\nfjU744TxXEMd8sl+B9/mD+Jf1VPeBrunwhSjlbyKR6Ya7J4oFOf50HDFRnlz\n+Hkd61Z5EnXAV6Z86KmfxXslEOZQA0e7SXZPo5ZzhBBznNb5vY7DMhPeWKNF\nY9NA3kZD7ITKq+i0TLKXF6oJjiuSpnRb/jauozcClXUkvNmhCxPtiZeQB/6o\nBsevXiUjzhM93rzz3u3lfgTpa09PKckPBifYKeP5SkExNEFMW3Kspav/aHqO\nsxbRQSjZhEqFNdZgmO02Po73RdqPDsrsPuFFSs5o0pKGy9wfBZPH4h15Im1R\nqC2wGbGfluMo+rYys66d3kDKmDvbnd6q5XnrSrGBhXM17Voh43CJi1iIYmzo\niLx5IkZ+J3xZ5b7qwvkKx0WULAvHv2kd5U7sWhYzxxl16f7xThmmsTLs6ESY\nusuM2CNX9Mt/pmmR1EtZWd/wjSBfkp43pmn90OdeE9XDR/lHJPXHHaKdkU6b\nvL8aDs+0fPp4FKykN9EU7+jvOs0Rculd7hH7xXBF3n4iWtylwlNLRxh92seA\nQTljV/U9sVgWq0RSU6kQ19i85RE5dH6OMlJcmf1O+xqmEveJH4oi+5fe4m9+\n0+lJ\r\n=hYYl\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFlXauwLe6ci3V/Bab/Ta040HlWOBDeexWGhvMU4VvPpAiB1+dYPUBKmVa1JzsnLndxDT/jhLPAX3/xqosrujuwhjA=="}]},"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-formfield_0.16.0-canary.b44dea36.0_1592341039031_0.4210073658331004"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.e2577e87.0":{"name":"@material/mwc-formfield","version":"0.16.0-canary.e2577e87.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=7.0.0-canary.a6ac8f629.0","@material/mwc-base":"0.16.0-canary.e2577e87.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/rtl":"=7.0.0-canary.a6ac8f629.0","@material/theme":"=7.0.0-canary.a6ac8f629.0","@material/typography":"=7.0.0-canary.a6ac8f629.0"},"publishConfig":{"access":"public"},"gitHead":"4cddb26ad140f9a5ae7e41d4f66258da9ffadc5f","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4cddb26ad140f9a5ae7e41d4f66258da9ffadc5f/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4cddb26ad140f9a5ae7e41d4f66258da9ffadc5f/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4cddb26ad140f9a5ae7e41d4f66258da9ffadc5f/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4cddb26ad140f9a5ae7e41d4f66258da9ffadc5f/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n*None*\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.16.0-canary.e2577e87.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-75h3WoYgmHR1dbK0LqPwislzl11TxXjWVGYwndYb0p7PDqqWDaXlvHoLgEjU2CqaESFAsdi+t3QYVv8aKjtFrA==","shasum":"0874d572f7ba63e1396e56ec58d57db1cb04665f","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.16.0-canary.e2577e87.0.tgz","fileCount":16,"unpackedSize":48468,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe6TTDCRA9TVsSAnZWagAAAvMP/iQ9EQGtr1MZj1R0iL6M\nopEnexeaMX8oLEVJQfLpoOEtJkSk/4EZ1pFGolAC3U88wo81PvyCAw/LUkVG\nrmEeKQnRFBgWrz1dpiJY5ZRKABt57Hbencf7SWnWl9YqhUi9FWzJZVwj5r1W\n4L/m4GALZFlObeJliNin5lp8hszyTwY8SumazVBDrgjv/27tg9VLvXdNAavk\nfnnRdKiDeaq0aZaeFSDCi38PVHBrnpx6cNZlb0FdRujiOr5pY3tlaMn+yxTt\nq+98Ae5CZGwPbxHICJwjqIvsoRDPRdHB+qDfwYeiSWUL23XxEWoKT++vs8Bh\ncgxwW5RtQITsfzYdh6j8HWmtAqTuxM6BGJlULWCLlYaGT2J6yiFRVWJUVFK3\nx22FLMa2n5opPS8DIYH76vs/GRbf/iHD05kx9Naly4VU+SH2d+UwmyqNZuqN\nOJXratNwABb8F/hzGIubRSyn/OMC2jWvoUkTMOFR9hf6eH1+FqQiuG84zJ4v\nuKMoQcA6avb9WRKpTtDZRyFyQyOeBQdyw23Pg+712vfJdR9+k1/dHQb9ifPY\nKXsRbfFLBeUPjmhFursTsd2hQqg6KpddAg0w0WVVHZ02B0coXChISZRyk2Di\nmuhfOfJsN/FZxoTmitzNkYRXNwsmAXPIHp7kUWRBiUjL5/VBcCsmxfZf0ToI\nW23H\r\n=jeCn\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCWOmhlZViKl6ZrhaxehPeyDIOHSD6+4zIKlIxt8GSrjwIgGVHPQ2mUuVZSt3zmqbDors22SaomJ9+rG0lwdzCV7aQ="}]},"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-formfield_0.16.0-canary.e2577e87.0_1592341698944_0.8265085603741005"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.58b73343.0":{"name":"@material/mwc-formfield","version":"0.16.0-canary.58b73343.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=7.0.0-canary.3aa33998e.0","@material/mwc-base":"0.16.0-canary.58b73343.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/rtl":"=7.0.0-canary.3aa33998e.0","@material/theme":"=7.0.0-canary.3aa33998e.0","@material/typography":"=7.0.0-canary.3aa33998e.0"},"publishConfig":{"access":"public"},"gitHead":"ba9eb85b43f514dcacb8e7517e4b8728a3629bef","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ba9eb85b43f514dcacb8e7517e4b8728a3629bef/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ba9eb85b43f514dcacb8e7517e4b8728a3629bef/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ba9eb85b43f514dcacb8e7517e4b8728a3629bef/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ba9eb85b43f514dcacb8e7517e4b8728a3629bef/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n*None*\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.16.0-canary.58b73343.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-d9QLTUlNAWLzSES6aX3JHUJoXmoWxLQGs/yo0oVMgWKuRGw5k4nrYuPiiS09z0PLqcPMTKoIuxm6nTmx0sjaNQ==","shasum":"898453de8fc53d20c765d2b442dab7eb730fb53c","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.16.0-canary.58b73343.0.tgz","fileCount":16,"unpackedSize":48468,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe6ThICRA9TVsSAnZWagAAdjYP+gJGjhvt190awXfiAnJI\ngsHFYNnGRxSvYZsH9kTLSuxPGGAeN8Ydhy/KaAN3BGG/lnw2xKJ8FOOzlFxW\nC8ZyL617+nFbkf6iQLJQZGRgmXlqV27NhTVoz2F2Ar49zKxmVLrpDqjOacLW\nJrkrHcRnd/vIgvO9ITdyxhbnbgS/mrY+EctOp+1O4VvL8JfbjTFgv320EmGQ\niKbl1dBiVvgFiPnhQEi9zIaK1QFk4WqaojIPEELQeZ/2eU6seMwza0xa9PU7\n7X7hq0xLxpsm9QwEKDfwTYdGzfNBihUK14QZW9lh//Vdrveg75Z0cKlfctpO\nsXe8zztDQi41ueKGwCrK3viM2siwdP00ZUFL7HiHyvKz3sT7sOZjPC2V2oHH\n5eKaybx24UkHyRCfMCMT4D9tGpLEBQ8hIlo3DEHYngePqSVm3GuRIUxaGnff\neLFcSjEXgF/g9ntJ/UEdv0Xfk851fSfppFc1iysEQRkXFIelvP4/Et03nXH8\n9+Ib/0kmqnCypPiv8bQmXCZXRSoey7g+rXJYZRiPVpBmMoHGJ2ZJz5wMDQF0\nPTsCAiLB+Jn8hFRaPVgl4oJzLq4pRbodCKv4DG3hUcY/qWPTsSCwXhoQttGp\nCuS29pytPg4yhMtMl6vYd5ynC+oog6jGzTuycygm4LnfTzF1qyBoil9v2hZC\nyqhx\r\n=cgc2\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCwYWA+Z1PHl9IR3gfVhoMb/UwqvfS4D2iKl1EVe1qlOwIgTLMwZCiuIJORuZ/v9Pv3WYAL491L7V1VZLFZzQDiLk8="}]},"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-formfield_0.16.0-canary.58b73343.0_1592342600355_0.6406186012531112"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.f155c058.0":{"name":"@material/mwc-formfield","version":"0.16.0-canary.f155c058.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=7.0.0-canary.f2a488e95.0","@material/mwc-base":"0.16.0-canary.f155c058.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/rtl":"=7.0.0-canary.f2a488e95.0","@material/theme":"=7.0.0-canary.f2a488e95.0","@material/typography":"=7.0.0-canary.f2a488e95.0"},"publishConfig":{"access":"public"},"gitHead":"bfa2e71d76745185343aad4d0a9a2b6c3b134563","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/bfa2e71d76745185343aad4d0a9a2b6c3b134563/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/bfa2e71d76745185343aad4d0a9a2b6c3b134563/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/bfa2e71d76745185343aad4d0a9a2b6c3b134563/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/bfa2e71d76745185343aad4d0a9a2b6c3b134563/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n*None*\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.16.0-canary.f155c058.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-m2hDyWO/xqlY41rQ4P+2dle+TUg/ykuOUCfNtQ7dvaqj+ScX46xuvB5PtTA9En0BO38YIeLyINUD2z1U+0kAOA==","shasum":"36e30af0af0a6d31cc2200cc0e559405c2c41951","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.16.0-canary.f155c058.0.tgz","fileCount":16,"unpackedSize":48468,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe661hCRA9TVsSAnZWagAAheMQAI59VqHs4+VZFN5+URvu\nmjcnfkliL2G8aX17qTbkGo8fHzo39eAn0Z6wmpXlYQ5xrHXluLCxNWHoJVib\nRjvThTFaBY1ULlJk2xHOHpiYkN9kILxpvuITKs4zoKn2o40eHx7yJpa809pN\n7pGKZQ39keZrKw9Z00kea8aiJ5Dfh9Dwx5jNm4xFnUlvUkw11GmNkWeD6VMo\n/ht3otkifrus071L6WptSCakypFQD9eqTI36adkSYxKDGsaBhDpp9pVhu6jg\ndtSBcKpixJMIcGTqkY56i/Ym8MdQa6ruTx7oi+tmm2tEVKZ2bbQD+C6mgIzz\nQUTt00MKRSB7D/jmALNC9J6FzFb3yurrDTVJ8sHlVUYLNAQ3XVb3X3U6Wy5s\nFq+qsRK19uaYIWk0mFHz+KVGdRyeqZgQ4vDgyhhjnmq5pX5yiEvOiAZMYNIe\nSTB1GAqLzGbDr8GzNZfZ+fAB+ny2Aa2qap8mhsEcItMNF7VEYTadih/10xt+\nHETGaGQ++yWF+5oECGgjZsXTi6ifQwxmacBOZ58IEmaaAxkZjDRb8ZZdcNhz\nIss5BsEpXY7KGWpWWzTDphsrqpXtF7INh/oxoprHfqipmgHn74Qm9Gyn0EMp\nZ576ozgtv2bNZq+ZiMZ++oPiBXAd7wvSALbPHr9uSGw1Pr/rjciBaxCwSf4N\nv8g/\r\n=WSCr\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC7n+/tdgScRlTj0Fwk0MV+LsLw3nn5TP0ViLiQ8t2CiwIhANOJARm903Lz4sJ/T/p4oMTECcX1L1q/JMA2rN/rIAXx"}]},"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-formfield_0.16.0-canary.f155c058.0_1592503649197_0.01525261455506799"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.309779d2.0":{"name":"@material/mwc-formfield","version":"0.16.0-canary.309779d2.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=7.0.0-canary.f2a488e95.0","@material/mwc-base":"0.16.0-canary.309779d2.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/rtl":"=7.0.0-canary.f2a488e95.0","@material/theme":"=7.0.0-canary.f2a488e95.0","@material/typography":"=7.0.0-canary.f2a488e95.0"},"publishConfig":{"access":"public"},"gitHead":"5227f0923971be3709c93d0a8ec0d85564fb31fb","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5227f0923971be3709c93d0a8ec0d85564fb31fb/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5227f0923971be3709c93d0a8ec0d85564fb31fb/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5227f0923971be3709c93d0a8ec0d85564fb31fb/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5227f0923971be3709c93d0a8ec0d85564fb31fb/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n*None*\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.16.0-canary.309779d2.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-NJj1oRR8N4+lStMcxN8I9Crdz1gZs//pQi4bV6livB4XU5Ke8vIXKwPmTwE69XiMisJvKhawYhk+xm3zdRS8CA==","shasum":"86375cace9c272f68d4af5971f42fcd8555cec6d","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.16.0-canary.309779d2.0.tgz","fileCount":16,"unpackedSize":48468,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe6/+UCRA9TVsSAnZWagAAcB4P/29qzjeTWcpIQga5UPhK\nzIXJoDmD6suVFvJHaiKlsYZ5ZSQmj7pzuVQXa9SMRZoKwJzVu7tgr7Axvz3r\nNOUjSvmUQQjRjK28KJ1icsWUDj2nwynO4ZR2Kh2hEPP7ZFxBOWv6Jo3y7Xsn\nwqvU2BHQQE9VWclvXHRxGU1FR02VFuGvdgFizkUtbOG4/HhaCO8i7QTzsGsG\n1yA0SGqx5XZVxjxydAVbTRcgzNsqfRpWO/tPKGSI810xV3tJOQHxasquRbFr\nhBXAjyUzcNCZl9X5PQKi3kSiexsh00t5+KMTLKTzkCefxhLiIqLysqq3RSuC\nm3q2cKbptJCvwQuIGhNDZbpRAf33ybwX+NzqM6OX2eOF8iFHCLlMzitQdapY\nAXoY0DkkdaFxYPxJ0GXbvIr9AsIsgJKzya2ObyqwxeKLHveSTwN9joRCIRdP\nZhRZDSGjf8cA9G5EK9ceawO89j59SvxhbFw3BJrVYx72HSkYwvxQnwSFWeHo\n/f+VsbEfGoE083OyUqtNWw7SUOrvBDnqnXbRPsmej+31BLPCLbaTvzIEUm1x\n0hrkMZ2CYYwAY31bwdjx0SPC00AoAzBvSpCxwJUHowb9M56Sm+MV2zNZSmkq\nqSkc6A1s8i/J5SJ91vaxAGgUPsyo53MYwBJfdQPPSl7WumLeFHTALCYdgLjX\neI9C\r\n=zxfa\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDN3VJ8N1PkzTOY5ylN7w1fProuuUTmf0tXPWWQYGeajQIhAMOL3OR20rR85MiQDt3nHayXNJyHGOt6K7XTyPcjJqet"}]},"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-formfield_0.16.0-canary.309779d2.0_1592524691739_0.35612033793628717"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.e7649968.0":{"name":"@material/mwc-formfield","version":"0.16.0-canary.e7649968.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=7.0.0-canary.f2a488e95.0","@material/mwc-base":"0.16.0-canary.e7649968.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/rtl":"=7.0.0-canary.f2a488e95.0","@material/theme":"=7.0.0-canary.f2a488e95.0","@material/typography":"=7.0.0-canary.f2a488e95.0"},"publishConfig":{"access":"public"},"gitHead":"33e44f7015ad267b659c9bf1d34799ab8d508993","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/33e44f7015ad267b659c9bf1d34799ab8d508993/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/33e44f7015ad267b659c9bf1d34799ab8d508993/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/33e44f7015ad267b659c9bf1d34799ab8d508993/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/33e44f7015ad267b659c9bf1d34799ab8d508993/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n*None*\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.16.0-canary.e7649968.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-u+tWZpZBHCciZHuv+zluyqyGXmEnMnhOXHWXogoFgZEuMe1dRvt/HWL1iyZlL/YuJrYBDyX1VGG2xEPkxyAXtQ==","shasum":"2eddb2540b710d8979d2d8a3b93beaaf306b258f","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.16.0-canary.e7649968.0.tgz","fileCount":16,"unpackedSize":48468,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe7TDICRA9TVsSAnZWagAARkYP/jrBTWGySzdV6lHtrbOd\nzxosjsPiiN8tNHKkax8YNSEHjt5WZncrQxXupu0wENwqw5uenSic8FeCIvIa\n0QG4YmLhNFknbXXML6FjDTEqrHxKgABVW1lcTexrOqdItDkjSTyOYakGfmUT\n5xES7axpmoYIPE++ZZf/iub0cdJ9acHAM1g1ac/1qUwzcn3X8PF8wF2LDeJo\nG2u7HmFGuPCnZTdHC3D2Yq3q56oDJcbGSAtKRE+uMsTA+HSKuNPVv5BM+Lr9\nKmCI/qDe8z4zi/ZF7GcncuGOjrM92dZ1GI+2dmm4bioiwgZbuiieOjIfiLcE\nLtAuK+KtRqB4ws0+gFvcBICIEMREu/GD58eVlVEZ5bd+slJ/lEO05hiPABHS\no8/il3tpPixuVC7X3QIW8Ip3OI/NLT2RALf+3sudDfoVHZJtOkVTkKe2FnxT\nKQbsocJNFl8AIs2hNf7LFu7hC2iEfPPC1unhoniGmjgppEYDQxy9BA4Jfbvo\nrg1B+oHlQ7+w+5TCAr2yZxpnibhzwFQJHtf1Ic3WWXgUcUJCfqcss3JaUZia\nP/hx0RNSVVL+SnaiO/dYJSyh2XxZW4kvOqBtWTvDxJ37UbdHCVAbrX7i/+zp\nHlLA41t0KX1TxNUXCXLBgcxmA7Tb3DySht2b1FmSWg2ybQdY5iNBShdzQ1fA\n3Ut6\r\n=Qn6J\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBTwrqBZgPEglS+u58rajY8OHNr97ryZCzH80Cim8E0aAiEAoNSQeRB6plAtC2A0hj2Z0T5HKS6y/FE5vHKuKIaVjYA="}]},"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-formfield_0.16.0-canary.e7649968.0_1592602823780_0.43131463642191403"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.8e21c78b.0":{"name":"@material/mwc-formfield","version":"0.16.0-canary.8e21c78b.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=7.0.0-canary.f2a488e95.0","@material/mwc-base":"0.16.0-canary.8e21c78b.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/rtl":"=7.0.0-canary.f2a488e95.0","@material/theme":"=7.0.0-canary.f2a488e95.0","@material/typography":"=7.0.0-canary.f2a488e95.0"},"publishConfig":{"access":"public"},"gitHead":"87567a000d0fe9c1fe6f2b37030908bdda7f3290","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/87567a000d0fe9c1fe6f2b37030908bdda7f3290/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/87567a000d0fe9c1fe6f2b37030908bdda7f3290/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/87567a000d0fe9c1fe6f2b37030908bdda7f3290/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/87567a000d0fe9c1fe6f2b37030908bdda7f3290/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n*None*\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.16.0-canary.8e21c78b.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-Bg7n7Mct68bz4jI/UGUY87jlM9rcicBBUTaDOg8a6NxQDWWoac2Y/HxDJjOGv7U3hJw9imHy4vrfyA1nsACdpw==","shasum":"4bc4564e0bf6ece5ad4022435d9f0ab8233dc458","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.16.0-canary.8e21c78b.0.tgz","fileCount":16,"unpackedSize":48468,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8InjCRA9TVsSAnZWagAAsh4P/AzRl8E+ene9FY8w5Ym2\nDtBE6CkIY9VSYLT281WfTCifLSz9xp+bgYnfO+XnqNAWrACAd4MjjisKlIzx\niRPnx8M7wEN0Q/mOGiNVQ6RyWLCMvvQ8oLt0xxksUMjbj1Et5JFX53/XiqjK\nydFxh878uV6vdjdqIykVq18dO1fCGx/cerCW7hChlcdMhULqKcvIZesLLHb7\nEXMXwbatsexR1d6hSN3hxHyKXqqPW1acYFWgcswkK33XusdLtGa7xdjryxJT\nQ+2mL2B16bqfsT0JTBvVL+lYs1R36SWwQG2ptY+A2itYuLyEd4er7ry3yWuY\n07E1ViFRYfWXHrqSXmge308amB/si5JmVtThiA21GTcR74Iap9pIfMnR24aS\nyGK+khqhdJIhNjuBhMBv7rqqQ5bkVpDP4cFBHnh9s8fZbYjfPww9vMmhCBRC\nV0ADn0u3MgEXrk3rPnnWY3JIBn+BFdg8IR/JEHbRy9RoEYaaCljNOKBobQ1x\nUD+grfoif/66GLJ7UZZLqN/p4hvpcWuloDtN3O/xLvXdAZ7iikucipWdO6xQ\nSWinQHKH2dN/gn9vaQAKGUap4Fy32pcMYS/NogJfMoA/62fOGBNxws4CBjxV\nyiFlOmhGkEEzRBdDPVMhmfEFw4V6MLKAhFJBiqRviI1kFIZUYOQ0RlpbT9JH\nDRKv\r\n=ogjC\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCYj/2s2N9idRJdSN/Ks7aGNaUjwiYMYXYx+Ap9/V7e6gIgKgrNfIirNb27spCbvXAFd+3zx2wtWWD3S6ouuYphc7o="}]},"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-formfield_0.16.0-canary.8e21c78b.0_1592822243211_0.39074986021003855"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.6db76faf.0":{"name":"@material/mwc-formfield","version":"0.16.0-canary.6db76faf.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=7.0.0-canary.f2a488e95.0","@material/mwc-base":"0.16.0-canary.6db76faf.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/rtl":"=7.0.0-canary.f2a488e95.0","@material/theme":"=7.0.0-canary.f2a488e95.0","@material/typography":"=7.0.0-canary.f2a488e95.0"},"publishConfig":{"access":"public"},"gitHead":"6e23f797a12e3585f2e2fc7bf0311266b8908e40","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6e23f797a12e3585f2e2fc7bf0311266b8908e40/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6e23f797a12e3585f2e2fc7bf0311266b8908e40/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6e23f797a12e3585f2e2fc7bf0311266b8908e40/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6e23f797a12e3585f2e2fc7bf0311266b8908e40/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n*None*\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.16.0-canary.6db76faf.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-uZdUkFGMiZBfEGFpu8hlYZOc+OQxzW28ySsgjlddT1dwAKRTOvYfPOyTj2rKzvKLhuswQaUqFguuqaMUp97lrw==","shasum":"f213aad6216361f2e0d059176c207dccbfbb2206","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.16.0-canary.6db76faf.0.tgz","fileCount":16,"unpackedSize":48468,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8R61CRA9TVsSAnZWagAAXBwP+wR1oQtlNJiJkAgBBE4W\nslwwu5A4Gy5YbDWfQf4V48kt6jaXyc+IG1Jnw0DV88o9phHc9I8D18lnhz3D\n3tj0jUDakifl3J0l7yKCN+GQ+w49ubADEjqW/ksWPAA5PlU9Qx5MK2w9dglI\nxY5LO2w8UbvOseAAOM67Rt99OWzlCgXCRq68bLVOIT+ITFVXs2vAxDSXvhnP\n266798w0AiOB1MnmenvMN4+NE5dOvcT1bpjOLKPFykXEpa4N8b8N3qtrP/KA\njrTDvYJwAQryGQ4Mj6htPKFtzumhd82uspBRrPGxom7wIMP2rgAGi0UrH0kZ\nqewEPMWb86KL1p7SYnpqvmWVbS3Yc3+DQAjMyBukDXN9+2xev6xq7uYwf5iv\nom/rEPVhfkwoh9vWojSSPj+JuxveYL63n+QzhC3Kjv8k5EC8to1fW0ZR/S8J\ndDhVrxn/TZoEkqxU6xf3wkozwffJRdbkfgVa5mCGukUw9ABW6dcaVo+BAm0y\nEitUU7bB+7IWr45tukfKKdyiXHXVsouOxfFyIVSHLDKoEQLInAmyiWdZ1TXL\n4MzSZ1Lc7TAeL+62mA9cXfue5VxJIO4hU+KDW6RVvrnbVQqeDFakYN5XqTGU\ntgZF4xt7eJKwH6HpMd3ac56Lkrotsv+EyiEhyMKEno1AUyinrGZ02YWwdDRS\nHRt2\r\n=VjGh\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHmmXLkaBFNeCzSRXm7MxpVUZFLYVZ6TC23nNbp9v6cPAiEAs7l9kP7gOdlV1QN5CyaG6KzR26HCWAJyFUhfrjBmO0k="}]},"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-formfield_0.16.0-canary.6db76faf.0_1592860340638_0.6896816913474095"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.c4dd9684.0":{"name":"@material/mwc-formfield","version":"0.16.0-canary.c4dd9684.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=7.0.0-canary.f2a488e95.0","@material/mwc-base":"0.16.0-canary.c4dd9684.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/rtl":"=7.0.0-canary.f2a488e95.0","@material/theme":"=7.0.0-canary.f2a488e95.0","@material/typography":"=7.0.0-canary.f2a488e95.0"},"publishConfig":{"access":"public"},"gitHead":"4cd7dd845f6929aeb590a441e62cfb720106f05f","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4cd7dd845f6929aeb590a441e62cfb720106f05f/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4cd7dd845f6929aeb590a441e62cfb720106f05f/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4cd7dd845f6929aeb590a441e62cfb720106f05f/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4cd7dd845f6929aeb590a441e62cfb720106f05f/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n*None*\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.16.0-canary.c4dd9684.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-282pH29NuFtYySaTLnrdLB69ytYFssIvWs4KOO+zBNSyM/90tjDara2KW5xlRS6AOLoselUg0foMkS8zYg6nlA==","shasum":"3096196b9422e3f78c58cf7f0a87116e5d0e439c","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.16.0-canary.c4dd9684.0.tgz","fileCount":16,"unpackedSize":48468,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8hxVCRA9TVsSAnZWagAAkuEP/1bPYjbjaRD9iH2dUiYe\n1bQJcEgvBXMEUG1ALwNmBB01C1VsVgiNvsEg0rqb4EEWH0CFupQnNugJeNIm\nQFRmAuPzI3E7j0uMzKFwc0vu4IwGXe964gs0HQdiiUThsKaC1opORsq65BFj\nL2WVptkDO8x5/zGce0nLxD+my09ovYmxqQYi3GhUVdGuqeQ7mc15tB+yGrg/\nyLZFMcjMu2M4L6vXIWI+8pgr0Lu6V4ebQU5cp0hV1apNAVGTOFyW+OxfVUPB\nu9ZVOk8rVv5qeS9L8x4QAg+ipXJGFC1kLRXyLnUhIIX4VIM5SxKDyTU7lnO5\npY1OTULT86WAGLCPjXpmQ9ZivGMfx7D+8vOcfyed7ALrTMhbYpicNpKcZZ6T\nYlytuXlAn3Lu916wSYYJoCedfOWG5KKNjiQXzbhPmQJ3R2jisQEcyDM9iu7i\nXiTBcuZflqTqM+nPONd5zj0pHNVPDJPkr9c0ckqsM3F7rAjXMbJtaLsV5Yva\nci53EJif+MuWBV/a4BuOkGc57V7Pz7TruDYDwuBu8phzdgMbtBeiRmdFbO0r\nNe1bFRE5Vj1jbWZpVSx1exPtMxfhC9d+3e+/WXy92e59UekpQqTPmWFQ+6g7\n/xSLNYyUSXfc5wpwB0vz9ZCFW0uouBrC/Zlhi4p0e7FtDmQBCZkeOZqrgpoF\nuFOY\r\n=5krK\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD5+KfzkHO0rc9E1eC07OfaY2FlFA7XZJqfFlfEQ8N9gwIhAOa7EuWfJ+hx33ch2JJRxtquLxoLmw59QfjymqLDR3zG"}]},"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-formfield_0.16.0-canary.c4dd9684.0_1592925268673_0.14377715522640666"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.b3e53981.0":{"name":"@material/mwc-formfield","version":"0.16.0-canary.b3e53981.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=8.0.0-canary.15e81fe98.0","@material/mwc-base":"0.16.0-canary.b3e53981.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/rtl":"=8.0.0-canary.15e81fe98.0","@material/theme":"=8.0.0-canary.15e81fe98.0","@material/typography":"=8.0.0-canary.15e81fe98.0"},"publishConfig":{"access":"public"},"gitHead":"8d83f2faa9e72fded29e88f843dec080efd318b5","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8d83f2faa9e72fded29e88f843dec080efd318b5/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8d83f2faa9e72fded29e88f843dec080efd318b5/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8d83f2faa9e72fded29e88f843dec080efd318b5/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8d83f2faa9e72fded29e88f843dec080efd318b5/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n*None*\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.16.0-canary.b3e53981.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-Wy7N23jAMBNnMc0oaFIFtiulxS6+EJz9R09H/ZJsmxaYrQ1MVhpOXYXCH95rhouda2K/2Hzm0iKBRabfseKCDQ==","shasum":"fd84f2a719d60ceb3c2640483be9efabd3c9e71b","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.16.0-canary.b3e53981.0.tgz","fileCount":16,"unpackedSize":48468,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8qCQCRA9TVsSAnZWagAAhDsP/ju7/EVkUBCxSkWaOkYa\nbDH79BSZPdS581QpdGkk7D1nKyZZx0d95lDHpe0EzJ68Q+jNHB6F8YTAeN6C\nEXbkySz+aKTBzZZuIIKRnGSBWrHehnCgnKzziE3LhSIJ1HPx++gIZP6WuWkF\nVP5tsSRIV2sxzVvVBi1CETB+y2fovqK+WVr0ThDZh2QRGers+KOpd6iW4TKm\nVR3uyh/5xgx3SzRcdvESRmOUWgCEfjE5RJpHeUlQ5FjM/yCqH/jqZtrJmgdh\nwwbNZHgAniKrfP1YwYpgXpQ5GsfXENMfNCgcfzlPmGRzgwrLIY1EwQ/6M3Bk\nauxd067KzZtGoGeCgOoEJJRGlYR0ze09Dp48jv4zKSerc3wgm9mkfTIx3GtM\nsHdhSbJqOeyX6iDajhFLZGTxh8JSVjWpI/y7/GxCW5SO7Rrd2CMICCiShnfI\nhYM5eKt0KrsNEDuRymPV2g7MEnLQdYQPNkwStsDLv4IoHKJWFE39vfq3SHDv\nYl4vJzLBBXKCCnx3Hb28sNCMRcOWa0vjPdvPoZfZdIFvksBhtKGWx+SAOb6S\nvRKqcq8zmbDCIjuGwL22sudkv+uOKWM1aAsh0Vxos6KvCu5iKFrUwXBvA3xg\noEMv9llKLC37wCT+5QoAALre/LJf+SFQXo44GOgeS1IXwaDRzfTrzLB1kQj9\njgZD\r\n=EvSU\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCaAe9yHgvU8BZfjZKwYizYxkvkOoLfQ3yOQ3R59agNdwIhANjIY0PbBe+5/tLLTUuCW95zMqGiRamUC5NEVbB29itk"}]},"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-formfield_0.16.0-canary.b3e53981.0_1592959119452_0.3760019175147207"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.b9468f77.0":{"name":"@material/mwc-formfield","version":"0.16.0-canary.b9468f77.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=8.0.0-canary.599b8c319.0","@material/mwc-base":"0.16.0-canary.b9468f77.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/rtl":"=8.0.0-canary.599b8c319.0","@material/theme":"=8.0.0-canary.599b8c319.0","@material/typography":"=8.0.0-canary.599b8c319.0"},"publishConfig":{"access":"public"},"gitHead":"89bea892912be98e07d72fec0e142b11d1874487","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/89bea892912be98e07d72fec0e142b11d1874487/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/89bea892912be98e07d72fec0e142b11d1874487/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/89bea892912be98e07d72fec0e142b11d1874487/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/89bea892912be98e07d72fec0e142b11d1874487/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n*None*\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.16.0-canary.b9468f77.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-OwN+4nFpvqyX307cuTr0LsDVR2LpQ9IVZ+2D4L530MWYFy9tNE6ZQn0W3h90UNaEJc4+u4cE6Af+oiCWIP4gMQ==","shasum":"f5436c39090ca18d33d5d364627b108faaf85f0d","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.16.0-canary.b9468f77.0.tgz","fileCount":16,"unpackedSize":48468,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe88t4CRA9TVsSAnZWagAAWbgP+wRLPs54ccXgXeICNSS5\nSYjCTr2dfGFEAOkQ0HJbIeGlLX9MoeD8fjxjN7y+CKSFHnGJYNLSv+bKTyob\nn8lYW776ZphIKLb+CfPEJLmKlF+hY0WdaQBcGyYRsjk3CIuw9SjkbAnzR2Ev\nHeIQMEgN5fq1DmkRpxpCa4BVvNflxJh9catjlFztirNdBMAK8/Io8PQEo/zy\nBwgPIE663SeS+CMI+TQpIUnRbTbZy1FGX+wWs714iZwUJn45IaFUIswQ5aYY\n4O6v/HuAK3ihhjH7sTenu952bMWxPHoq/BmCTX0muEBJz6pIL4YpUA0tNVN2\ncFo3gaWN/jN6tF4CQ91lIFiPV46TBXwsvsKQsKM8OcQoE0P+dkS2Z7vEm2qa\n78Nwc5XfxIl+hVKvo5CSoiQnFncY8zNtArRURidhaSQCo+Dqa0ifN/i+/CJd\nN7+mB0tK2f3lH1rx7kmr7PJxVohNr1YR93f+Hfl9hgp1Tsu2MmLr7esIjS5h\nB29iQUGGHcaLIjJEfOMizEf+Sc1TfPjtNBX74sc2tvXPvhO1wBOLDAXiACz3\nSg3vdD8OtSqgRpGzU4uDfWVzR2EH3Z5UTvtTQUPmhV9ETOJR4pGXPzHwCEov\nJ/6x/hoo9M4UK7IQh5R3i9jsT0wC/hoYRmrAj1V1j+tGWpYaXXmWomSNzdIX\nq4fY\r\n=g+bO\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIG7Qel45dYXcA6h7wd9FAogxUNP16ZUXz+XGlZy5YXjoAiEAqLKqkXwnidAtQPrKVHjETZ7/HkW45tjaEEo8jUlvu+k="}]},"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-formfield_0.16.0-canary.b9468f77.0_1593035640309_0.049238417220143216"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.eb790e49.0":{"name":"@material/mwc-formfield","version":"0.16.0-canary.eb790e49.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=8.0.0-canary.599b8c319.0","@material/mwc-base":"0.16.0-canary.eb790e49.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/rtl":"=8.0.0-canary.599b8c319.0","@material/theme":"=8.0.0-canary.599b8c319.0","@material/typography":"=8.0.0-canary.599b8c319.0"},"publishConfig":{"access":"public"},"gitHead":"722b9fe701d60a27c2554032e63a2a7579ed4306","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/722b9fe701d60a27c2554032e63a2a7579ed4306/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/722b9fe701d60a27c2554032e63a2a7579ed4306/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/722b9fe701d60a27c2554032e63a2a7579ed4306/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/722b9fe701d60a27c2554032e63a2a7579ed4306/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n*None*\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.16.0-canary.eb790e49.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-rsWiGyB8qcseDdAWCHa04wWneMxZ/BdoxDbgyqWMLIdHvMlLLYdbDeyfw4JIm+1+LSJC2J82w5PG4oQ5MiOZ6A==","shasum":"cc3cb8dc1bfd25a647b6dad66054514272210257","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.16.0-canary.eb790e49.0.tgz","fileCount":16,"unpackedSize":48468,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe9RSpCRA9TVsSAnZWagAALoMP/iNlfCRsxNEafZKCFvlY\nR1N3eJqhccBKgN6eMFM4yK3g49ra+LPgwdsy2i3FYfUmxwUUyaHcEssEoep7\nD1fPhRAmyOR8Wydnzve2yKwGV09GCLL7zrVNolwyX1TYzfGhnftjUjF0mYWh\no1Ck0Tlao6eGbFURoMvXGaO8XHek7T6Q4pbHOt1o0FUQdqw7uiZCZXloC3t+\n58lAyGRjr5CDL6nWarByT5JE/1GRF5o9ODv32E4IGHrEL8ibRTzvxFipV+JE\nhIIgr5xzQL62zrk0YLLqZdldRwxB6lY0mo/q51wUOyCuBOWMTX+cXkjcKs+r\nplbUISsvIioZTMrBikWLb6S+0TbIrwFT5RjIL0U9fEIU11XAKDdXPgGief//\nIUinrI8pNrL3IWgk84S1utxateYX0wzntvUOGSGFF24T7lHZEw32Qmg3okHW\ntMMyxYMCaXOAu8kU6zVAL6udco3eQ/5cH6R3UuPoOLff33AHLHMLA5jeefiH\nOMnee0pCLLYeO524Kpfv46dS4f1wGjY0v1o2f/UDLRuo/H5wEpclMTjJO6DO\nx3lwggbzyDRjU0l2tUzH6S94sDT/ROyHpzJ5nzpjb6yCPmtz9YE/p7V4kb5a\nR62PlMfPYy3eoM6n3W266pEQfYtH6MaOeCmIUKNks3aUsjHkP6vZWdeu9bTA\nn0LM\r\n=l5iJ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFJDx8UY6FK/pAcShhw37MaxDL4OQBLbIHhruaJF78OWAiEAqSD/hwhrBeQHya3qvWnX8crI0/BvL6koA2LTSi5Rovk="}]},"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-formfield_0.16.0-canary.eb790e49.0_1593119913012_0.026604145972715765"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.9aa1a5c5.0":{"name":"@material/mwc-formfield","version":"0.16.0-canary.9aa1a5c5.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=8.0.0-canary.38197b443.0","@material/mwc-base":"0.16.0-canary.9aa1a5c5.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/rtl":"=8.0.0-canary.38197b443.0","@material/theme":"=8.0.0-canary.38197b443.0","@material/typography":"=8.0.0-canary.38197b443.0"},"publishConfig":{"access":"public"},"gitHead":"04b200e2b2832855ef5eca7e2000672e53739c05","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/04b200e2b2832855ef5eca7e2000672e53739c05/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/04b200e2b2832855ef5eca7e2000672e53739c05/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/04b200e2b2832855ef5eca7e2000672e53739c05/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/04b200e2b2832855ef5eca7e2000672e53739c05/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n*None*\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.16.0-canary.9aa1a5c5.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-hWzHegGVwtuJSvX9u7qsvOedO5+X1YHO+QKeuKCFBUxY0GleDOn1Ge37iaoLW8siSpAVl/H0axC9yjFfU/LuGg==","shasum":"c70ccfc8ed774eceb30983c1b7767424d0d0b546","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.16.0-canary.9aa1a5c5.0.tgz","fileCount":16,"unpackedSize":48468,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe9iq0CRA9TVsSAnZWagAAl00P/Az5SvXfKeFBKiBL/l21\nekmUMkBmx/2tf3dPgrIJq1BVNtx+XWCRPThii7WmLyusqU90NmAQBFmlbRbI\n19mJudNNr9Rk7VMJNeQ/uzTvKYzizbRFL32VOcwkdY96sNw0bQn5UsMXy9Vi\nTdXs6RIdoTxMC8Oyzk9xAVeHpGp9VExF1TmbOEE9AUDa+q+3YTEpZOq7Nz88\n0P74Rjtmnf2swiX65cl2iCClb1H0NPurKNJmnvDedpGZGpURdWtl9OdLQq5Q\nVgDH7S8cWG3qBHMGzR+bR87jvdLZX6IQMP/CVkiTI7Ftx291+oFl0IUc20ev\nIAVjxHq+nc/nLosCIZlnRkrsDH33dD3WpJpn8ZSEMgtSkdpYO4r+D0XbFHj+\nhbBnvxj5q2qcfFeQOwoHwWBQsxZtCWm4sPo/ZzZuRbgLDEV8SjaM//5dHt2w\ncQskYPBk/uwVwZBM1RoktR+I3PI/9y2zR4euFVIUk6CrVhGickFTg6dD7D7V\nlwuSm/PRuWA8+nQVcKu24OWgyyzQM7B2iO+zM7+1qWEOL4rey5I+tXT/oydE\nSmNwqNcKxftCJfYymxXZq1+7o+pqYyiW/3AMcVHFyi4hwN89ZvR3OFVwfKoj\njlHH1pni0bzXPbmaEHuK68SY6QaA9pGZZAme0mLUALy6XaK3IihvH/9v6zwE\nJHE1\r\n=0v8G\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICtlg+C87xpJsXGQfBdCQQnLr37XwTlBtoD1m/0Zfe+JAiAm973z40HOJUFFDXnsfWCV3BMVHAYl3qyyHLs8s66YpA=="}]},"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-formfield_0.16.0-canary.9aa1a5c5.0_1593191091820_0.3798499491426446"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.d36e9861.0":{"name":"@material/mwc-formfield","version":"0.16.0-canary.d36e9861.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=8.0.0-canary.38197b443.0","@material/mwc-base":"0.16.0-canary.d36e9861.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/rtl":"=8.0.0-canary.38197b443.0","@material/theme":"=8.0.0-canary.38197b443.0","@material/typography":"=8.0.0-canary.38197b443.0"},"publishConfig":{"access":"public"},"gitHead":"06dd7e826645eff53f5923422d6024010828a4b8","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/06dd7e826645eff53f5923422d6024010828a4b8/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/06dd7e826645eff53f5923422d6024010828a4b8/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/06dd7e826645eff53f5923422d6024010828a4b8/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/06dd7e826645eff53f5923422d6024010828a4b8/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n*None*\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.16.0-canary.d36e9861.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-00vFC0MUsu5RF6UcHrUzoN0P6LLSRLcJIRkZ/4gQuzzlvbIN6HiL1FaPzT5D2rjWKZSgbHNDzWo9EswsWadQoA==","shasum":"cbbae83c6638d5d9f9f9d4f5b8396f8ad0aac681","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.16.0-canary.d36e9861.0.tgz","fileCount":16,"unpackedSize":48468,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe9jH/CRA9TVsSAnZWagAADDEP/A3Hiu8M8zB/2G13GuV6\nZRizPWQreS+YdBgcNRDI51qYICkyB6TyV3ZLMw5aC3Y4xcWG8MhhXHv22iD/\nwB2pUdaBiyqL3oR6RjHxA+fOz/75GZQgr9LsieFnUxaEuj7X++4b7tce0IkI\nRSo4lLRKAfPjE32EveHZ9h9eIxoK7frxCADL2wt0M/2WwBdU/8n3QgALnu/6\nqmEFhOBmISq3Pig/lpZhg1AcUC0DTIA8uEWeXCAybxQZsFE+UpvIZQRjTzux\ndRUlQZaa0hEl3xXuZcwKvwERU9dBY7dqpuxJgoo59UYY1Hv9CRdG7Hs7OSgB\nn0rJtBVU+2vX7xEO0zBKU5QHyk8f+SnQ2AKJ0XQIWurKBfivKLSV4fTxvZZg\n8ZGGCLpXN8IXmAErFXSg470LqFHKH8qy+FOWhWckFGxQ+SsgUFsb20y6HtJS\n0XGcQhkzB4OsDAVtu290/xSt9+6OoSMU5zympAYim9HLswfA19SYuMXuCP/I\naWKPkI9whfkLd/LXZf9sI6tMaqDED/axae3r9ULUKlGdK1IFjgbfuoOgUNY9\nKt7LwDEmBB8H4pOqject+Dvv4fJ7R56not0AuwAbFX/I8JoW/WboH2PhPeSE\n5PL7+7FGfdwcYvlI13Rm0exyCeBIVth1si8pkeqYHU+9mGzYQhNFSDxV3SEk\nhmHe\r\n=qWxt\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHURVAo1YiUcbM4/DYjGl+t+wvLRjE0LTXUDySyg5HIbAiEAqoBEfA/HXv+m0/STrZVi7IN0tqIxhb07lXWaaOSizSw="}]},"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-formfield_0.16.0-canary.d36e9861.0_1593192959530_0.5315747189210707"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.155c2f85.0":{"name":"@material/mwc-formfield","version":"0.16.0-canary.155c2f85.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=8.0.0-canary.df7154fb3.0","@material/mwc-base":"0.16.0-canary.155c2f85.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/rtl":"=8.0.0-canary.df7154fb3.0","@material/theme":"=8.0.0-canary.df7154fb3.0","@material/typography":"=8.0.0-canary.df7154fb3.0"},"publishConfig":{"access":"public"},"gitHead":"28a52966d069b05ddf3f845738ff3207532f05b7","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/28a52966d069b05ddf3f845738ff3207532f05b7/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/28a52966d069b05ddf3f845738ff3207532f05b7/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/28a52966d069b05ddf3f845738ff3207532f05b7/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/28a52966d069b05ddf3f845738ff3207532f05b7/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n*None*\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.16.0-canary.155c2f85.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-QlL7mlN+7hts0iYSKBp9Zif9a/j2+SDPvM3GTXZrhxHRhGfw46IYSgS5U+KYu7Wyslh7m1V/t969nj3BdrnhUg==","shasum":"94802b027155370c2f8ef9704fe28855bc149695","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.16.0-canary.155c2f85.0.tgz","fileCount":16,"unpackedSize":48468,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe9oSkCRA9TVsSAnZWagAAEhUQAI9oREXhYm3UVKLSvDLq\nhyLf/dlg95AJI5Tspn5mtHYIcXNhL0rxEOYG7FFV64N2rqbWl+14gXetcAFM\nNllOlWN0MaoXDcPjBG8LSfhHHODkyFKCYXVhFRZfMJgFrGa03Y5atPBPTF1F\nFX3L4aFDUIldo39OOWjnbot6upsi1onGz9giPS31V3JhZzCNZJiX9SZOBYZk\ni5vJuCI5y4FwG4szZCsuDZTsFRZqh8PHzXZ1UhdQpXsSBG+TRgJdiXJAd9gT\nL0h2EdJmp1/z3q+4esH+AD6/GelM2squcoZsd+Qf2dUuRNVKOKC4oyuaeMRH\ntPf0Gy5s4+A7luoVyO6SnaVeYURixvVMUba0u2RHr1POmNuzNvnqFVGhDIGk\nlJj0JD8//idpYV149IZhP6UiQ/VlYB8ri4154Vj9T65yV5yM+DiHPPxdFRj+\nrteZwz547gUDqeFdIh3ZNOF6Ee/iwxkpvsGnc/CtmnEJAzJg3oRDxmHwxvdd\nMcMN/bnv5FB4Ghd1NWqONFVBFqVAY0sIKCOwOp9uTci4IgghpgOkH9uZqgzW\nRZX+SUdVRTnIuO0g+6Xb0XSVaG9MflfOC5laTc9tGX+XH5jn/G4bpEAkr6Kh\n4msGLvbSfgPhjkC7XWwuAG9MIrtsDRqeA/W31KY2Y5Ua68KBxh86X6BK/MLe\nnQO0\r\n=WTFe\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEXTpcPDyc1wooKJfR9iQ8LV0vw/s49KjidGldG2MZugAiBvO5+5wvvoz7AzlRVKG5yQCZQSnV9UCme9H4Dz+0nPgw=="}]},"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":"sayrisuarez@google.com","name":"ssuarez"},{"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-formfield_0.16.0-canary.155c2f85.0_1593214116009_0.5439601289605103"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.340c9c40.0":{"name":"@material/mwc-formfield","version":"0.16.0-canary.340c9c40.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=8.0.0-canary.df7154fb3.0","@material/mwc-base":"0.16.0-canary.340c9c40.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/rtl":"=8.0.0-canary.df7154fb3.0","@material/theme":"=8.0.0-canary.df7154fb3.0","@material/typography":"=8.0.0-canary.df7154fb3.0"},"publishConfig":{"access":"public"},"gitHead":"b65b8e518436cb4bcd2fd8c59ae2898f2715462e","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b65b8e518436cb4bcd2fd8c59ae2898f2715462e/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b65b8e518436cb4bcd2fd8c59ae2898f2715462e/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b65b8e518436cb4bcd2fd8c59ae2898f2715462e/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b65b8e518436cb4bcd2fd8c59ae2898f2715462e/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n*None*\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.16.0-canary.340c9c40.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-0zBnv6GhMcM3kAtAoxSzhnvJTZ+zJBTi4guPqiSHt9RwoMv8ZBR+K026nSKLZ3YDXRZumvt0yWmEwjwzMLzTsA==","shasum":"d0ce0735a53fcc584e79893c07fe179894627d41","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.16.0-canary.340c9c40.0.tgz","fileCount":16,"unpackedSize":48468,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe9obRCRA9TVsSAnZWagAAsdcP/0o+xS+fcv9nKiybznWx\nnHl+zn+yZeXbLzNfju3nOZO/cmriJ0csLwG93/AWWwwMGM5njsMt8imH5dIK\n41MZd1pvc/JP2AH8dHzhXCAy1c5K46duy9txs9cI8OaIqkGw9856JE5Gg+2K\nycHOlWArKRvfL8CCBKJuCiNbcjZp8l+EG4Ew2GrCPvLurvQBnELCaOY9yE8f\nvAaymIREWMxwkVWo2DH5WnnfprHf3a7ZRZZFE3+WDYQpaf/4sGT5nvBTJSON\nxxg1p+FaCUYATCKJdKQUg+6L88eFu1cWs8G+2C78M3lduHkpdpxwabxGJd8P\n+d5RaHhOxK2x746JZjrNfORki8gnPmODjwL4Mds8mDPqUYj5WjGLIEj5O9HG\nDW41QJnmRd6BkLw5MYLw/pUz/FfSSJ/vf4rhJW61lqZoVG4kl2/IdHcsr2qI\nG6TV5eT1knxBTD2/NiAfMFGBEyrsm6/Z1BPJWGhWdSO2NdQHn8n2UFMeICMA\nl82B4VU7DAu1cX6rb91eOyZhMyc81aOx6OdAK3lt+twFgkxFeHNi3ytcotnI\nlpgJL7mpbnDjvdVgWCehPCy5Wf8izG/QOf2ivMvZHBLntlll97cioBWsMcbW\nWXw6r3AypL1iMOicVb62jqFTekqMp4ssf9y28hYEmEH5tEKqmuRDmws06ydA\nsc47\r\n=hguy\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDXT5re+5IefQkspRkqIR0RqdCZGWFDnKkgZB+bwKdhsQIgRIrEQbf4K98r0yQU9/6gvkWVsN55b3/BmZKYJuEix8k="}]},"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":"sayrisuarez@google.com","name":"ssuarez"},{"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-formfield_0.16.0-canary.340c9c40.0_1593214672044_0.8403937222702198"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.a3384d2d.0":{"name":"@material/mwc-formfield","version":"0.16.0-canary.a3384d2d.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=8.0.0-canary.c678a9d34.0","@material/mwc-base":"0.16.0-canary.a3384d2d.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/rtl":"=8.0.0-canary.c678a9d34.0","@material/theme":"=8.0.0-canary.c678a9d34.0","@material/typography":"=8.0.0-canary.c678a9d34.0"},"publishConfig":{"access":"public"},"gitHead":"e09d50d940709441416a3ec78b0600a867285980","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e09d50d940709441416a3ec78b0600a867285980/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e09d50d940709441416a3ec78b0600a867285980/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e09d50d940709441416a3ec78b0600a867285980/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e09d50d940709441416a3ec78b0600a867285980/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n*None*\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.16.0-canary.a3384d2d.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-9o/6Q62TGptnMK2BSVQBjoNN0tfnxXvv8pYci9M0RV1mMgqGqiLxXZb140lpSAi0IMojOBUMYuni1chIsGyBNg==","shasum":"572d613a202027ec5b0dcc2cb491d96be577c34e","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.16.0-canary.a3384d2d.0.tgz","fileCount":16,"unpackedSize":48468,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe+6fPCRA9TVsSAnZWagAAkPgP/ickvy7lBtRhNLv/6FrU\nHyd98KBnNn8PESABlAIESaea/KvClmTaiWbMul9IZ2LcSn7Rm6QX04QCz5ub\n1RzVSuzBq4smAWstCi65yVRYDkoTRB460adixanljwzXGtRruNczJvCTjeRN\nHE6qmet3VjDSoHdihhBNr91in/Fm5OGAPRmKWQ1MtVKEqiKy1IoyyssEIS2d\nWNDyPqVwKuT7Md26LkEkvczqbYHveXIW8fwnKHe+CqCih4EpvWjTqYtWDqde\nH9ayA0lKb7cKYtV4NHmVCUco4qNkCl1YbTNlSNcYUMhZjAJ28b3WbcwRP9vo\nM1Ymh1pPNjtUnsLm6W0/POdDU5hadHYxutU86bgFG73WodVTjcUejBokG2kL\nD0Cu6mRqLV8UUpbkfUdsfFzhJmkgLMYMyZElGIHGXB7XyWZnxgqJQn9woLb4\n+AMWh68x9Ze4Elum2M8xev2piGABKBJ/k05HLOiMcp769AjA3Mf8lh26h+O/\npmjPyEIW/0yVfrRdL887nigv3oZk4Vy3OzzDp789hdKCPJP2HIImMWYMs6sN\njzmBqPoNZXU6jEpkCUFiKFSx+OS5nstMPMygNDg8oP0TBrh4WNO3ZtI4xfHM\nCQNqDLQOdoJYpZWn9ldU2ey0H2gH1GjQG4B6htzZStykYT29KZ5Tf5T+U4yK\n1Koq\r\n=rleX\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBgg6KgDrSEJ/zHbaDYTSISLHpwYVbCa/uW/IFRrjc1qAiEA3u9AE4ojVVQTvXfaNlJvy0lJcp4hTM3OiUpX5yfST68="}]},"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":"sayrisuarez@google.com","name":"ssuarez"},{"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-formfield_0.16.0-canary.a3384d2d.0_1593550799379_0.9681084597470615"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.17.0-canary.6d056c96.0":{"name":"@material/mwc-formfield","version":"0.17.0-canary.6d056c96.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=8.0.0-canary.c678a9d34.0","@material/mwc-base":"0.17.0-canary.6d056c96.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/rtl":"=8.0.0-canary.c678a9d34.0","@material/theme":"=8.0.0-canary.c678a9d34.0","@material/typography":"=8.0.0-canary.c678a9d34.0"},"publishConfig":{"access":"public"},"gitHead":"a0abcad0ecc43697e7c489d2c4ddebb257cae5e8","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a0abcad0ecc43697e7c489d2c4ddebb257cae5e8/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a0abcad0ecc43697e7c489d2c4ddebb257cae5e8/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a0abcad0ecc43697e7c489d2c4ddebb257cae5e8/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a0abcad0ecc43697e7c489d2c4ddebb257cae5e8/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n*None*\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.17.0-canary.6d056c96.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-pmmt1UVJOFISXvXD6+x0Wa1Lkf2zRlhq90zyxy4s3rsgRwBz8/PY9lUk1uhYHZpsjijUgp7/N2Q9XERZUx+A8A==","shasum":"9a6986152d419e93e14c24f17199319d086b1952","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.17.0-canary.6d056c96.0.tgz","fileCount":16,"unpackedSize":48468,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe+6oGCRA9TVsSAnZWagAAqFYP/2+c9mOD4eVia073MSD6\nET2EM4WaRnWYZpfLSy9GLMtjJ51Svwcce7dJ2+AJj+LZ60rwhhKnJLywyXcc\nFcQxWgDBhaUtEa2KoTNHmCjDxCKTt5onXhJnxDOZFIbP/Q4EmvLZj0fEZ8gK\nGPFpdfGIKk6wnROZ5UvD//2JeC+aEUVfnqecG01SMWPhXBQwnGJpMkQYmt1i\n/PvLnbmz6rxxXBcC8QVFBAqIWk6+oyDWSSrMATWFjpusmwsBoYnQpnYRknzf\ndybRrsLqELvioAa6ZqLskhK+e/xl18qhdvfaxW3NsW5bozcw518DZsLT/LRB\nGY35eil1U7KX0uHetjhlfBIigH0eNMEmgllljly0T4RhCfXJWAi5GsLgWbTC\ntgzLqEyUqXngFhZkQCY3ywDkKIDC0yK/UVEEb4FZtPfj3rVKZftYDXVeDb27\n4OtwvimCWBTUSIgZN315EEhC6ftY35kzmXjjQ2sAeXmBGDrkj2EBc6XRS6Ni\nJIXDCAcGU+hkFc/Vaj2VcMl1dQYe7drYAsnKarilOWhISDv3x6KqU8+eICBc\nkgJWv0NlHMMpvR8yWDgvDu5GlgdEBWSr6eihBL+MxPSNYGPsphjtSQrLtPcX\nkVpQBzJL8fVn68VJ2kHe5UCVIpy41Py1X5wP81XnTWbIrPKB1OSVXDcc7Gns\nwwUl\r\n=VYu5\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEmOlMgX2zG44HZ6pzorFcSSwQ/uzUkdZOEDiscu3XtpAiB0juw+OujGW3ZmL6ExgjDfJUPjIjv0wPBP5r+VETiVZw=="}]},"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":"sayrisuarez@google.com","name":"ssuarez"},{"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-formfield_0.17.0-canary.6d056c96.0_1593551365942_0.7253635012598645"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.1":{"name":"@material/mwc-formfield","version":"0.16.1","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=8.0.0-canary.c678a9d34.0","@material/mwc-base":"^0.16.1","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/rtl":"=8.0.0-canary.c678a9d34.0","@material/theme":"=8.0.0-canary.c678a9d34.0","@material/typography":"=8.0.0-canary.c678a9d34.0"},"publishConfig":{"access":"public"},"gitHead":"3b47995b0b098b9e7dfcc7b735eb23e892cbffcd","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.16.1","_nodeVersion":"13.8.0","_npmVersion":"lerna/3.20.2/node@v13.8.0+x64 (darwin)","dist":{"integrity":"sha512-W2RUN+YJ1MYW5ghU/gaAbCL4fwWr7cH8r80uHrUjGKe+KtXTx9sl7g/AjvKMyHoZxWwZyqeMPILGlJ4Ko4u7QQ==","shasum":"4db123fe62401d0a158b10d2cc4e516b7fec82b1","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.16.1.tgz","fileCount":16,"unpackedSize":48433,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe+6s+CRA9TVsSAnZWagAAzaEP/R8pYt9jQGFfEy2Uk9PG\nmkcwALtAfU2zrrWvIoroDiuaU3Hbi2hmw2+747ZrgMRw3A9rw76qN/9hLyTH\n2pnynuADN2DcZwcCRgMRUddIIWFHOr2smCvYIOp8wfxFS2RKUKCT6lTAzYDM\nsJ1WEYb3vhadPG8P3ITdMIjQeJi7eLGKtKUGPwGRjR/EN1P98EpE4UuNVQiV\neRkjq5IYJOTpILa8h3slpq60Ri+AeN9QiykDY078P+Dqx2+HO/iJYpL1TwD+\nOIt3XCyb9hQla7mylm0CtyE5PNF4JzeLhkZ0gmQIZsOyKqldOMKi40ee7SmD\nTXf6wRJDcKP9sLoJJgqFLn02O4+Vo75W/hroUu778Z2bO3mbIbUjdWRdeoaw\ngi6QDuLe96awpn5OvfPbuAYQoNmsEpeULvr5o/VmDI3t1LnxL4AaUVmGhU8e\n6TJUmW5XPahPi2ntmmBh1X29CNMfIwsw+6kHSd3H17irJ1z8dyR7B+WajdVW\nNxfaUfmzDpgnIdv7hz+k4P2oMfJuxy6XObYDUpIN3481Kna2N6pJKHgREBvF\n5jsVuiMyQA6AYwXZBXCCgbHqbIbVWhuq8RFLiID8WsX0nMHjbtTz7ImXpSoe\ngH/EhHfIsm9y14SFcgvqFKcOGjJb9WBuoEiXyaqjwuKKaZQeTLPpr4/mxqGS\nWgdY\r\n=UaRJ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCXSIVk3483wV+Vw/8QfFqNodphWgVSG8ElerLXNhBBEAIhAPCXJrMPVh/KGq8yTtL5Yfi0F0nf7D5opsPcjy6hLxOR"}]},"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":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"emarquez","email":"emarquez@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-formfield_0.16.1_1593551678129_0.15472210401994446"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.17.0-canary.f7e37607.0":{"name":"@material/mwc-formfield","version":"0.17.0-canary.f7e37607.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=8.0.0-canary.c678a9d34.0","@material/mwc-base":"0.17.0-canary.f7e37607.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/rtl":"=8.0.0-canary.c678a9d34.0","@material/theme":"=8.0.0-canary.c678a9d34.0","@material/typography":"=8.0.0-canary.c678a9d34.0"},"publishConfig":{"access":"public"},"gitHead":"898d9ba1603fc85a0dd4f96b0dca134bf20f6b37","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/898d9ba1603fc85a0dd4f96b0dca134bf20f6b37/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/898d9ba1603fc85a0dd4f96b0dca134bf20f6b37/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/898d9ba1603fc85a0dd4f96b0dca134bf20f6b37/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/898d9ba1603fc85a0dd4f96b0dca134bf20f6b37/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n*None*\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.17.0-canary.f7e37607.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-RMYRf0pAdcnuINFif28e0mgdB9oLZm166z21fpYozvp0AcPQ/qoFD5+v9CEuFbf4axHnRX5PfDxFXS42msIOYQ==","shasum":"b60f12758fc54aa5febd7a894a639d6880f18e8e","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.17.0-canary.f7e37607.0.tgz","fileCount":16,"unpackedSize":48468,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe+7IUCRA9TVsSAnZWagAAA4sQAJgOeXtV4jW00n2fpDis\nesL51z1PyBk/SdUy1PvZBIWrE9veNJgEui/XKkBTC7y2gfgX33kUPIQzKF2T\nhQOWtip4Ks9079LyBXbUWPm9IBItm1is9SM9XEmpWlqXrFRWpjtIvvcvyukp\nyV1Iejm4mx9NKajKV1JJmkiKc0jJJCxFjj3zeYy/KQX3x7/l1JSAQJMdhlut\nZ1eH7AXQu5khyhnzJVtd6FG/ftzOhjrJ6OXQkhUwnkncQlk/aCzDFosjS1GQ\nWD3sgaJ2bXq/AJChAXkqoSLtv/RiWCL8cTI5ZbUjrtsOuwM8euB+fU6UkwyJ\njWe6dHmodwXxyFU6VOcezDT1pS6s/2Veuh8rwd0656rD/XTt/uh+9NSsRw20\nfyiUHDhJxCGg5UqlPvYyWNo7SH9LmgebRxj3WN+QcI3wRw2EnNtlE+sAlDYe\n6F/4dHPsk8JTSLRYMosFLtfOcT3zSmE5wTKXYoF6iQyoNX7s4vjg/wOq9o22\nZvLJuxvogjTGm4eImQ0gGAXmwtTMG0h+pPBJ1NlYblLG9MWkdVi2NnGjv32s\nflZ5F4HgU3+EBOPmyR2e1GAmorqCVwE+8VKtCfQm85Rjm8PK/8IcBX8DTwB6\nXuSd075uF56y6LNT5pDLNDBc25ikPQgWXXjnpE2lRcJFskSUfkk9+ddudz19\n6eXx\r\n=5TNI\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDxcuhSKsFtUYoKXU9Sv8U84+VfcjxyQSO2/d+niO9O7wIgCpgjqsBnHzGeITijIy0pwxg5qIii9YYaozxWOMVD2PY="}]},"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":"sayrisuarez@google.com","name":"ssuarez"},{"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-formfield_0.17.0-canary.f7e37607.0_1593553427747_0.2078884887614696"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.0afbfef2.0":{"name":"@material/mwc-formfield","version":"0.18.0-canary.0afbfef2.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=8.0.0-canary.610c26c4a.0","@material/mwc-base":"0.18.0-canary.0afbfef2.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/rtl":"=8.0.0-canary.610c26c4a.0","@material/theme":"=8.0.0-canary.610c26c4a.0","@material/typography":"=8.0.0-canary.610c26c4a.0"},"publishConfig":{"access":"public"},"gitHead":"22b3cf02901c0c438f1e4150ce9513d5f45f21d1","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/22b3cf02901c0c438f1e4150ce9513d5f45f21d1/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/22b3cf02901c0c438f1e4150ce9513d5f45f21d1/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/22b3cf02901c0c438f1e4150ce9513d5f45f21d1/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/22b3cf02901c0c438f1e4150ce9513d5f45f21d1/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n*None*\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.18.0-canary.0afbfef2.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-fyihA5aOnvlTThNiDzhnc5cjd/4e5n3g5Z1LbS1nPDgBkvXVTnWNkKp/ZEb+T0DfKpICMqMHYbf6LFVwP7VDaA==","shasum":"a099e648f4a7eb2178ae86ffcd532286e15395ae","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.18.0-canary.0afbfef2.0.tgz","fileCount":16,"unpackedSize":48468,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe/OdkCRA9TVsSAnZWagAANpIP/RO6X2fi7cKo+YQ4my7r\n2NS1KHVVEBNvXHWIH8FXbS88Odl/hcr/ZXw51k/S+zskRjgpWK/cs7JWyvJy\npTGdgiqmWvDedzvf3ZlhH1jSMb9fuebx1es1VJJ4rtJdenZqCNUB/xPnN9dg\nholN70CuGSgBWR7xGi5VUF+qKibfA0A5hCQ2l8JB79RLrcD2d7ht/sZiBqIe\nZ/A+Bp+hkoY6AMa3cUOIQiFKdr9Odzd/CxWN6GiHe2TaacYxm0Fk/5Er5UAR\nKLzBjRnHKqC+iTbjDzSep/eGGS5n03vHvkmSKPSX0WcXDGSRMbkGk/DqOJck\nLShpw6MBiZVo7BO/dEgkYo3A/v1tBKcdb0/VYmtbrguZxHISPnt4prZa+xLI\nqWKUo9Uakmuj4bBBAuY69gy0ftT3F94GPo1AureKUFxWsheWx1TXmgFzDybR\nE38CnRbvJ1qR80ZV0Syzg/YmgHbR5/4NOxIQ6taqiMI7Zar5WhTcBD8Cwqgu\nNwGcNKKxDnnhTsMhDmtflMhYhYnmCUKvl8gYRJ8H9UEu8ucy1qddKfz40FJO\nhOeRRqPT0fuPSmOEXRGFywTc0dVkCcPuBntzGw3u5XSzFtUiX/1b704bA3gl\nDfNxOY7oZzu31xMAs16O6cu3MjlGquc9X6PngiPmPRzKGwNjYm20A9dNXWIn\n3f/1\r\n=0lRs\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCnf+Yf4sHbdmBh+n0uIB9axDgNEZIzJYazkE5ks9K5mQIhAOh5qEIddGaA/rLmKhpoeWQLi6S8UBoOxLFaLffGYSVi"}]},"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":"sayrisuarez@google.com","name":"ssuarez"},{"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-formfield_0.18.0-canary.0afbfef2.0_1593632611747_0.7999887749590762"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.17.0":{"name":"@material/mwc-formfield","version":"0.17.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=8.0.0-canary.610c26c4a.0","@material/mwc-base":"^0.17.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/rtl":"=8.0.0-canary.610c26c4a.0","@material/theme":"=8.0.0-canary.610c26c4a.0","@material/typography":"=8.0.0-canary.610c26c4a.0"},"publishConfig":{"access":"public"},"gitHead":"0afbfef219df4add1912c90b8608ac93135d876e","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.17.0","_nodeVersion":"13.8.0","_npmVersion":"lerna/3.20.2/node@v13.8.0+x64 (darwin)","dist":{"integrity":"sha512-la+QSJNz6dSxc48fcvX+AHXnMUJcVIJZVJE9XU5wwdD3E3wo1gtr4C2LsH6ZOXwX82kvHphVvZwY5Az/Cri+VA==","shasum":"55b766c424c253aef0b621a21e075a18650ec3ac","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.17.0.tgz","fileCount":16,"unpackedSize":48433,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe/Od/CRA9TVsSAnZWagAAbxcP/RDFf8SetyixuaRrbvHe\nLNBmE5D3xto5RgGfw74tYZ3uVmkdD4UX4J2UFPA1TrZFBs6QhTFT5m6Yn3UE\n99XDMfu0XCdbBXw6qVYF0B3jhhC5xlD8ve5VaXbMX6fu0RR2zglEY2J9qFbP\n1hnrpez1HN+5raptHg2sk4vmx4F71irzbJGIIoaSUHwSIW8o4s7ulK0cHMA7\nHRfpN6/Li4/CtfMVa7KKC9kCWSYrFD+lrOjN5j7562yR9FNGaySW/eybUnp7\n7FeUdTCTgD6g74P82B9oaMbSIWaJ1gR9u5lnFNjNNuRyic0tV+uC7XU25v2N\n8yCYv3FMzChUY9BgFCh4UyLsnHKA14GkwoMnzYaAG35OWEuOvLM5h2dH4jHg\nwGTdzFUFa5peCeG4icPHggLdYkqVd8GU3CzJ9UCPEcQsBvJ50/8Vwnw+sSbB\n2XGGJzMDISMzZnYYKG9iWPxEoaqrS6LQJGP5mcosYBL/Kq1RFg7a18AdGGRw\nenZp2sLZu+Zu3PXa1kp3UrIJxZ4oGynh7BK5zaq69WuAbW2gMLRvj++ZwvWA\n1Ut672aBo9vuKTge0w9YpplQLvlTiFwrtrGBplwIRVJWKzonYPbsf6HGzdpF\nyfymqqg2/GnSem5MJMHAv6ZfycmbziiuXQvY0EVAWzaHAiLwfDJWvohNDplL\nwKss\r\n=lcEe\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFY1UDygtpqXnmkdlFW6C7f/vrIUVjthPmhytMZIiIO2AiEA2yA0QfoxTn7Iw0guuqSx7U+UX/E9weeRkgyNgRVEqB8="}]},"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":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"emarquez","email":"emarquez@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-formfield_0.17.0_1593632638790_0.4541151866745301"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.fd970958.0":{"name":"@material/mwc-formfield","version":"0.18.0-canary.fd970958.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=8.0.0-canary.a78ceb112.0","@material/mwc-base":"0.18.0-canary.fd970958.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/rtl":"=8.0.0-canary.a78ceb112.0","@material/theme":"=8.0.0-canary.a78ceb112.0","@material/typography":"=8.0.0-canary.a78ceb112.0"},"publishConfig":{"access":"public"},"gitHead":"7dc6a8720f1d1adb0ed9ae03d2ee54b539251905","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7dc6a8720f1d1adb0ed9ae03d2ee54b539251905/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7dc6a8720f1d1adb0ed9ae03d2ee54b539251905/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7dc6a8720f1d1adb0ed9ae03d2ee54b539251905/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7dc6a8720f1d1adb0ed9ae03d2ee54b539251905/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n*None*\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.18.0-canary.fd970958.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-l6nIfPaRG02wdNyiKC92pucS4sVOIvKhcYggNjurHUqQ5G4EGg8v4WWZFv+vFGP8rsRf7HYDUQRaH+CBVQGxFg==","shasum":"8b5db8087721b24e5306346270c515d9ed48b40b","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.18.0-canary.fd970958.0.tgz","fileCount":16,"unpackedSize":48468,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe/R0uCRA9TVsSAnZWagAA6bAQAJnLSc2io+3ko5kx9Xyn\nlMVF1WXqUnJLLZgHEPWCQQNjx153dlV5NftL2ZI5l+rTNUlgShD/chWLnD8f\nlpBTHNiAvhIZuHc9dpWdPEGdumWJKyj7jv88XEylU0JLH5eglIQmyVzFTHjc\nEIBdLYmpTpB9rUuI26kOwc0lqlPQytGuNKYBL8MfAkr57oE2+Xr9f4Bk9URD\nVbfC0pPyh35gdGFJl/tg5tXa384XifJuarGOfcozkjuHKix120i/tiSJCZN7\n2mKOoHNiLdMOQzWeN1OmXJ18G1rFgNNd8dWCUx0CGTsK37NoiISWRAk5Z5us\n+YwakT1LcKHDpEh3L2pX2/9GxCXu9MPj4hoKV17PCnf+JSe0sv9tEKK6C11R\nAP1OvIRrLCxLvRFErB+JWMBf1fF2o+rvfgdRFrURYBsT/eg4sw8dorX73yEL\nlqC1BcmV1sJiyCSPwOv5aV+sqiSL4FpMqCweXFgS7fz8CoOQzqY/AZlPYHre\ntB86C2nyRmq5aodbr+ck1hpO/y8cROziMDkPzWOvuqBeiwUxtFOiUVhEzREc\nWChzXeIL+br2hBgqRM+d4nTfnMgKwhK7O/PUdQQXI4SfJz+Lu8HwX1LbKqCJ\n+4UiGkalX1jyGpCq3/Jv5t71xl+zKcouU20GAYDX72WeK8dyhPKR9OikKlAo\nyhXz\r\n=ehWZ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQChVfW/Bd9ivMT8wrx5PdeqAOFKc7qNw24za8KTc2KhLAIgSsYRquNIgUL7U9UH8kS3JUIjKRfhoFyH3aBfPiP670s="}]},"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":"sayrisuarez@google.com","name":"ssuarez"},{"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-formfield_0.18.0-canary.fd970958.0_1593646382145_0.6315505188565"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.fd44be19.0":{"name":"@material/mwc-formfield","version":"0.18.0-canary.fd44be19.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=8.0.0-canary.a78ceb112.0","@material/mwc-base":"0.18.0-canary.fd44be19.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/rtl":"=8.0.0-canary.a78ceb112.0","@material/theme":"=8.0.0-canary.a78ceb112.0","@material/typography":"=8.0.0-canary.a78ceb112.0"},"publishConfig":{"access":"public"},"gitHead":"19ed8b1c754f72137cfbe305df2c3a6be32c041a","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/19ed8b1c754f72137cfbe305df2c3a6be32c041a/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/19ed8b1c754f72137cfbe305df2c3a6be32c041a/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/19ed8b1c754f72137cfbe305df2c3a6be32c041a/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/19ed8b1c754f72137cfbe305df2c3a6be32c041a/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n*None*\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.18.0-canary.fd44be19.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-Vsybbw9qgoaZpEMnG/XA5LRR0iP9JZq2A0fbOt/sin3EYIONlqhfbtenR/lKAAYFvj2KsJPYm1IcCyV13E+4Kw==","shasum":"c89e494592069b1e299d49284f9f69d7fefd7ba3","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.18.0-canary.fd44be19.0.tgz","fileCount":16,"unpackedSize":48468,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe/XUZCRA9TVsSAnZWagAArFQP/2Nvys0tydTdsaaeJbs0\noof3PNi5CCBN8gtXor65InyX3jJ+9TXuu6fM/9MwH8zCEGvrOBCMzpfzzwM9\n0jEiCeAYLUo3GX1FnbvLFvqF7IFvUNXn1pKsXxoRlQFPPCofGyizU8PW6Fj3\nMI1I74XBy07XjOQdhkY+JpFFz3SNyshDkv5ed1rZRUOQfoANsfR2usbahSr5\nM+M99+fWvqOuZzMH4HpWQxdd3Gu0lAmj8rDkgnRto0LKhVJq9m64iukyToLN\n9i45UGFS/E2+qoQ74e7KF/hy/NpZllwmkN+h3eCswrbpcBrX24PmDp/2vXBJ\nBNDSiAlcIm9C3EB6jqacIc/z56dzfq5f5ARGvJ7Km2T1N+vxnb9uTe+MVeVe\nLZlt7cPugFIG4zWlaJZT+YBEt4KX66EiLWHVVgNcJfn9HE2EAX/4zq25/8+8\nD8jZagnIIVUQFO7ia3hjOeMK8fgvSTjY09DOT5lx0qWr2GVPoIWHkvTrsuE4\n3uaIqDZtAVK6jHPTBUm4FC4KvOM/KBLa6AliIu3Q5Bw0we38TDwZ6q5CgiDw\n2dTzDtRLRfj39k0sIQGveDPh7/ty59aF/qP3nXxWwJwEjM4ydLzxKSAJQ3vL\nW45gQNOMiBFdb4ffHd+kSA+AaRtxtlPt3K3k2kgcMVUuxeu+wgG8vOT0Lqoj\nwIv4\r\n=/OTd\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDrivwz0TRRUH7RSDTuwqGUGf/zWGiK6rcI9t4W2d8djQIgHm+LSLM+/1PHKP77x9P3RcZPksgIguz9+jygy56+CU8="}]},"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":"sayrisuarez@google.com","name":"ssuarez"},{"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-formfield_0.18.0-canary.fd44be19.0_1593668888851_0.2763647176238353"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.17.2":{"name":"@material/mwc-formfield","version":"0.17.2","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=8.0.0-canary.a78ceb112.0","@material/mwc-base":"^0.17.2","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/rtl":"=8.0.0-canary.a78ceb112.0","@material/theme":"=8.0.0-canary.a78ceb112.0","@material/typography":"=8.0.0-canary.a78ceb112.0"},"publishConfig":{"access":"public"},"gitHead":"ca6fc6de0c0461ca30684d96cbb98b8885c8cc6d","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.17.2","_nodeVersion":"13.8.0","_npmVersion":"lerna/3.20.2/node@v13.8.0+x64 (darwin)","dist":{"integrity":"sha512-3VN0Nzh7IwlknCHcOedLTLIROvkHnjQ6M38kHL9MOZm8DnCTduJ4eYY4sQyoZxtnkZR3E1e4sA8+bnpSj4ggPA==","shasum":"b69a9423d4dd7cc83145d7cc7ad5bb0a030fa622","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.17.2.tgz","fileCount":16,"unpackedSize":48433,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe/XdyCRA9TVsSAnZWagAAeQgP+QCbnTB0jnFtyXyEnBbr\nxgCiNsoxsFJIU55Fh+xEFhK8GSsl4D2itic05gJjSOev5Zc7AQ4kGM4SP3Be\nf7TKQkUSyQ/p3maULJymXbptx6+45qiu5j3l740YaYpj1+pPhR1x4B2c6LOF\nAB1tIu1uKlUKXEShE3iABQ1j/HuO3qC8xI14aiOIVvJLFoE91tV2eV54lXzH\nJ76sssEmmaJRdaslB6JDHY8hWihwU7AVdsgaNSYaqTU9Wp95kNfv99GmVRzn\nn6OLj5jI3Lsme/VW/t8pGVlNmdAopmaMSoCNEoVHPRWmJsK6itDzGOr7s69Z\nI8JCy8H3uL1Ujxmo2AML2waLeci0dSr+c71oxEBOiM6WfqmCE9jEcABnz4QI\n669G6kz9FCvxfFt+0n3GdmuBEeK2BNLVA6/XejdFeKSO4b3ZjE2oh0CuoSHj\nvRDAyiTtuKFNzwX91Zc95KKupsoJBDraQg/f17zLDmaFMHg7mAd5RqoNI36n\nnpODs+emjzZN2MjST2Q4OKZnNx/KuMXN/CvcKmo1mvY5OPyka5fDRFL7Zmun\n0K7wM9yr+WzdljaRHVujP/g0mzTVFjWzCGOUK0kaB/8RuoKYLJldrcCXwqH6\nulAeL8oTFq4bsFNBkBxiFen12dIv4B9qkR2wfmitZaXE8mRSViSBWZixhUmg\n6WFq\r\n=XIse\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAhNLAqDJnvuQGp6r3vLOVQk60wqj32AbT3SEAuP6w+sAiEAxG/UuI48PJ25NpAQyYKN9p5/vAgkEoaqdh+Fm/uFngY="}]},"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":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"emarquez","email":"emarquez@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-formfield_0.17.2_1593669489822_0.13572942867374693"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.ca6fc6de.0":{"name":"@material/mwc-formfield","version":"0.18.0-canary.ca6fc6de.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=8.0.0-canary.a78ceb112.0","@material/mwc-base":"0.18.0-canary.ca6fc6de.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/rtl":"=8.0.0-canary.a78ceb112.0","@material/theme":"=8.0.0-canary.a78ceb112.0","@material/typography":"=8.0.0-canary.a78ceb112.0"},"publishConfig":{"access":"public"},"gitHead":"ff7df8fd7df07e908061e32938ae550315d255d5","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ff7df8fd7df07e908061e32938ae550315d255d5/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ff7df8fd7df07e908061e32938ae550315d255d5/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ff7df8fd7df07e908061e32938ae550315d255d5/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ff7df8fd7df07e908061e32938ae550315d255d5/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n*None*\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.18.0-canary.ca6fc6de.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-ZwCtHTisue7dwMS9MwHi5aHO+fqJ73cG9lEP8pUwXnYzC1UmDI9gnsp/6p5T+HwF/0776Vko3s84pfTU1CxNaw==","shasum":"f71eebf6c7a99ac59366131cc117f2df1ba25a1b","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.18.0-canary.ca6fc6de.0.tgz","fileCount":16,"unpackedSize":48468,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe/XeiCRA9TVsSAnZWagAAw0QP/12tVQTC3HYL7FD6Yc1K\n2IwMAZUSlJ95JQIIcFTlD2QvBH6sw71NSnlN1s16LQ88KwpiOUEpij+IbGu7\n+eL4HAbKzRzuRIIBATLSO6mketw9OtoUAmD36GWPM6XRxkLXH4qh/7bRibnN\nONAcOd8kSuFlXfkuSqqRmJklMyc5hNS0hBtpsBCxq1A9WWYUe0yhy8X0qRkc\nrd//LLjOvO0pey3SMyIeTzLOdhBiI6EgZLKBme1z/05x3ddUvf8V0HVvM5mo\n7gBQPa6iXRxRPLqD1ZFtNnPvtU/ppLBcT7bGrfzZwC9MIUHhT+kTWqIGnHT6\nVrmNXymjBk4J0iUDu5SE4aaYqRWBH1c1labWsM09ayE5HdZkGGt+DA0WUEjd\ntwECHG4dSeSMVbHqgK27fawspbELOeUpvWit6XSTFxRoEQJtbuj1C33ousey\nQO+KJ0khFgwxPobxhptJCLhjrAr3iaBulcSA67DEdktU1e/0yjkFVWWIgGxC\nsz5ngyLtqglltcecPcTfvlDP53KUEu+hGpgllGRHOj/Byij89kLk9kvQOblZ\nzCFHt4e94nilapKYOcQBodDQFPHqdoZqPs4lW63zsDZBCcyyidV4EJ7Hv1xo\n0UWRNvn9SFemWhd5/4gBDODRJijRpSk+k32IcVntVuDoJwccCXj8q0Ee4UTF\n1uXi\r\n=xnml\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD55mnuJYZgqSo/xCd43Jio/bHnPxUkofpeu62dc4WWMAIhALhQYrjVuKHsQezGoLDdwz1Lhvo21d8ncT+nRp9gg0sx"}]},"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":"sayrisuarez@google.com","name":"ssuarez"},{"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-formfield_0.18.0-canary.ca6fc6de.0_1593669537936_0.8096883460654529"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.79f1ec2a.0":{"name":"@material/mwc-formfield","version":"0.18.0-canary.79f1ec2a.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=8.0.0-canary.a78ceb112.0","@material/mwc-base":"0.18.0-canary.79f1ec2a.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/rtl":"=8.0.0-canary.a78ceb112.0","@material/theme":"=8.0.0-canary.a78ceb112.0","@material/typography":"=8.0.0-canary.a78ceb112.0"},"publishConfig":{"access":"public"},"gitHead":"28823685e1aac950044fe1d868c6233ae753ba7c","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/28823685e1aac950044fe1d868c6233ae753ba7c/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/28823685e1aac950044fe1d868c6233ae753ba7c/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/28823685e1aac950044fe1d868c6233ae753ba7c/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/28823685e1aac950044fe1d868c6233ae753ba7c/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n*None*\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.18.0-canary.79f1ec2a.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-OXyfAU3OXSXZmmSTPlDWtSMmMu8LWhGoZbN8Z98Q7iylCZAwgp17cInFwcDuFVknYaD+Ae1AIvhkh+05P+kdvg==","shasum":"80d26ee1bbc4bdfde49d0aad189c0a1482aa4639","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.18.0-canary.79f1ec2a.0.tgz","fileCount":16,"unpackedSize":48468,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfBLGYCRA9TVsSAnZWagAAShIP/2H5TKX+jR6uoMX5UNZI\nE/GpvjsIWRzIceCH/K1LV32U3+g3RH29xtwC/YIV27UK0OvO1TLL0SdOxjLE\nnult7uvB59At+JUdWmFWEZET7YKftODvH/Cn0NpIcYGMCjFwhB2ka5gaBMfd\nBTHmpwp35bVinleaFVOKC3rWWB/0lc3Uo217wMTqz8InMTocbI9lXhFxh/Fm\n+woyWh2YFfBoCh9mse9rBt/xmqOFN8fiLqAlbFP6rYQr4Emonh2DRD+yx2XD\nesoxpcE3nz83gXZAnmNXrYey+Frs9DmyzQcXFBSiYHNp3v7BytdaBR2IGmIa\nWrg4MhJNo1D4lPUG1X1oElW2zwI9UeLENG7m/m4g9LLngWR4tY9gtdRUrS6M\n7wKMsUCXqBXjNxu3w+bc/+8gBVdNP0lOKe45mbdIM4s2+Gs78V+8GsUU7MIu\nlsUotMTlEOJW1cxp3I55PrTmBv+WA66JQcn78xpmolRsRMCUIJqX3uAfqWVJ\nz8ZlB/ww2T4rPdxdyOK6/ph/HBP3r3UoJ4eQ8bpxzhvzkRCJqbOlTFiaKocW\nNIi0FE6gNX82fCW52eKxAZ9AlZ+R3D09QOmMoU12E12m2zVK2sfSBX80cSxT\n1ysSMFl56mrg/AmZp8An+jFvKeoEgmgK24BEUssFOw3Lyl8CdVEL17jPfbd6\nhX7i\r\n=8UMy\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDGqFElxbvoMrk0l6j8FW03yTOjjCRfQpXHW9AMj69McwIgM5HHCV6YqlYhR+uasNkNyPsBLg10jtR6YyXNkCa7hQM="}]},"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":"sayrisuarez@google.com","name":"ssuarez"},{"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-formfield_0.18.0-canary.79f1ec2a.0_1594143127677_0.6064568135339963"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.a7bc45ae.0":{"name":"@material/mwc-formfield","version":"0.18.0-canary.a7bc45ae.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=8.0.0-canary.6ed717ddd.0","@material/mwc-base":"0.18.0-canary.a7bc45ae.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/rtl":"=8.0.0-canary.6ed717ddd.0","@material/theme":"=8.0.0-canary.6ed717ddd.0","@material/typography":"=8.0.0-canary.6ed717ddd.0"},"publishConfig":{"access":"public"},"gitHead":"fe14f2ba9c3850967039fb923e6ca39978290d3b","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/fe14f2ba9c3850967039fb923e6ca39978290d3b/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/fe14f2ba9c3850967039fb923e6ca39978290d3b/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/fe14f2ba9c3850967039fb923e6ca39978290d3b/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/fe14f2ba9c3850967039fb923e6ca39978290d3b/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n*None*\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.18.0-canary.a7bc45ae.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-Tqtr58jvDyXJC84vu928+sLF83EJapBABosWcwgCZf97lHZaVmPct7XO9aqMullrDe8R3X/dUhMETj9IWv9Ojw==","shasum":"05d1f932526641bc398af4f3ce1be18b5193bbcc","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.18.0-canary.a7bc45ae.0.tgz","fileCount":16,"unpackedSize":48468,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfB1JpCRA9TVsSAnZWagAALIYP/iqBbL0PRd8FPMDJ+4Ah\nZmO6acBEb/p4Eht87K1cpPwPjAptAIVnsmL25hAN7/j7QH9vBrflPULa52rB\nSiKDnrAgn3U45j9wVnL/Q/kf7zPGeWm0GmXrWbkjcg21x690bWXJh6voS8Pt\nHyyQbA8A+KY9yz+Y6XrlQwSn1+9299uOvoijHALyBseOOSl/DDdQzqKKf+sj\niw2L/rRUiRkkmopk0uRwvv0qtR/dYDcfJCWHPjZJMCAhzmG3UqO+5fYmhxCp\nLLGJ9ugUZ1aLaHARYlUhTbXufqV+VTfG28I+hYIZIkmhf0QKHVjSdG2OmB3j\ncHFD9S9vGs3gOc3VbFK+NIyPyHKxFp6J6DCII6qjZmgAXJKGd5+EUkPB6+Iu\nfgUrKAt+784GH79wgHpOY7fmjmA/khRM+mgtK+j5ZdOo1eth0AYNSj+VjrV2\nXQ5lVoDAIdDw0bmjuG28wLHD7kfDhJ4KqxG2ucL4oRdx6DNnPIsmWH3sBT9/\nHlMgDCGC5xwYgU9aTR4Hy8Ey5XRdNSoB8YztS5HtPgquvFf/BdJfTIgnDInX\nQJm7KDHKAjJOA/EKXc9LZ5wmZVP3GgZd0geanPzomaQNMKIDnfwTEXQlurtR\nW7lOQX2ml4E+/U0jwsaunVYyPziRyBZiHW83jUUutYQC3GenUBsfw05pLA4o\nR5EI\r\n=ANyd\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCID0E3eC39rH0KhnlpKzB67aouxdYptbKG91u6yJdSokwAiABfCzcPzLQR9IVL+uXr3Dtqe1Ue/HCvQKyLVUuwRbyKA=="}]},"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":"sayrisuarez@google.com","name":"ssuarez"},{"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-formfield_0.18.0-canary.a7bc45ae.0_1594315368708_0.7604563716881652"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.b184bc1c.0":{"name":"@material/mwc-formfield","version":"0.18.0-canary.b184bc1c.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=8.0.0-canary.6ed717ddd.0","@material/mwc-base":"0.18.0-canary.b184bc1c.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/rtl":"=8.0.0-canary.6ed717ddd.0","@material/theme":"=8.0.0-canary.6ed717ddd.0","@material/typography":"=8.0.0-canary.6ed717ddd.0"},"publishConfig":{"access":"public"},"gitHead":"ed045f87cb3f1a4ba70a20cb1f586b80a1aa928d","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ed045f87cb3f1a4ba70a20cb1f586b80a1aa928d/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ed045f87cb3f1a4ba70a20cb1f586b80a1aa928d/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ed045f87cb3f1a4ba70a20cb1f586b80a1aa928d/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ed045f87cb3f1a4ba70a20cb1f586b80a1aa928d/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n*None*\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.18.0-canary.b184bc1c.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-YFkh5cOi47mRK0MkueYYg6a7vkB2Rv1f30FO1ryRNZsXZEOxfXQxe3gBP3bjj6IuGhrTWAkqojzbLxKsQkA0kg==","shasum":"d83cc2c414fb74c58dc14ee69b3763ff1c9d674a","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.18.0-canary.b184bc1c.0.tgz","fileCount":16,"unpackedSize":48468,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfB1SQCRA9TVsSAnZWagAAJyoQAImP6QuvVwb3OLvvp281\nEHqkKmjtL4NQm15RvTdtnGlbeOIMEzLfKl16KhCW7RR7lU0w8Sg3f7yNCK2o\nwb6+bfmOCLhVnq9F+5Ueok3NFaG+xmBUiQMSRfUizSXcaaQnoPNI/+tSXz6y\nWozekL9yHdjK/AJUCu+rfoM7QmuJ1RGE6wtdX2pO/bgNSNSpiPePLVL2YTJE\nqq11nb7/c8pj6RyCZZFtyW6Ek5dVKAOaf2a9H5kc8oTPGoBkGYo5UEjwqPiQ\naxuSpaGdhds4DPG+2COF64WPYOuvgTfsftEcvwBDG2GRpR6kACZBedNIEiBz\nbTsgmKvTOqKAnR2ESI4VBVkXndvS4F6BhriciEfghbTnXnnveLOoByodtFQu\nVPheuDdOYueEUIfLcLoyfHjoabd5ZXoCS3R+nwO30KborU7rGtiotj8sq9D5\nGfImVg62VlIYplNOg8sfDAhGc6pwVs5NbJazQIp/yVMCzOotrJJwOxGVutyZ\nFkqTcrNIi7RRR2G7cCqxAqVrbsskOGUoEXOsweLV9FywESG+PNloWUZWdJG3\nUsnJbd8STE0ycVvITRbMMlj5tgbPlC/H3NTGrtC+b8plgnICdk1NQNLrAo5W\ns3vkjVH/QM9a3JMaHuE3xCnnpej8a46O4IxZFQ5tXJY6OCXIpjlrIGP+uAym\nApXA\r\n=Eye7\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEhf3o9dqmrwJ6T8UD50cVYB8ykLpfpWFP5hnjAaC6vXAiAEy7H5CCdm/Pu7cPTlMy5YHX2XlFl5R8vjY/BVxz4YfQ=="}]},"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":"sayrisuarez@google.com","name":"ssuarez"},{"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-formfield_0.18.0-canary.b184bc1c.0_1594315919958_0.2233826796866325"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.b39fde62.0":{"name":"@material/mwc-formfield","version":"0.18.0-canary.b39fde62.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=8.0.0-canary.6ed717ddd.0","@material/mwc-base":"0.18.0-canary.b39fde62.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/rtl":"=8.0.0-canary.6ed717ddd.0","@material/theme":"=8.0.0-canary.6ed717ddd.0","@material/typography":"=8.0.0-canary.6ed717ddd.0"},"publishConfig":{"access":"public"},"gitHead":"561ab4c73d80c73f9b95c39655b7057d622fa2ee","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/561ab4c73d80c73f9b95c39655b7057d622fa2ee/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/561ab4c73d80c73f9b95c39655b7057d622fa2ee/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/561ab4c73d80c73f9b95c39655b7057d622fa2ee/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/561ab4c73d80c73f9b95c39655b7057d622fa2ee/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n*None*\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.18.0-canary.b39fde62.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-yGXPXPs3da9fNVX2v80Yd8vL8qliB9Q94GQcnFjsgHI+D4gBNnhzlRA5D5XMv8S4s/7t5AI6ebtFj5Sof8ympQ==","shasum":"d9771515b8d197ea54b3e16294955dc378db0b39","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.18.0-canary.b39fde62.0.tgz","fileCount":16,"unpackedSize":48468,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfB1XKCRA9TVsSAnZWagAAlVsQAJCfiCKx1VWxjg1HZzia\nT517Cqds5j12os8xvWqFEq0vOeNY8ILnzDlpKXT0cgzeKJH52lq9fpx+AIZv\n82V6rLtfPh2g36WrnfCLsWVWnJI154LCAT9uYAA6XhgpD6ldbtw+z3cZeZ9y\nzsISqMsAdkHzfrr2zfMYyZ33PeXxKCvOD8pyPiLgQ6pkhjAknQM8Bn9BKPwN\nbruOcZUQmMpcFJW6V0MGp4gjKeHvn4Cd7PwCT82N0TqABcONlvbhU0SCf1oZ\nYSSHNvvnwa1rzn8+ivJ/F9QiUoypm8odBLsBdvOT3nsZ4lwjmxas1HyyiKBZ\nQmwFR/gI7nOx+kUQA28jAIXE0TjBRkuJSAb66s/DhYlbnRbsQkDMv+Q0BTz4\nyFEt49hsE3xaF8D9CtaKdbRNtY4GO/7OCI4aJA81IIajbmByT+NB7yl0584U\n0YC7exlez++yHojo7VnGaRiE1dcZYDQmV4l1y4mIOYZW46ecqS4MEoiZFQ/N\nLCLzfLlmwzrybrf5Und3bB0eVvPpVMdLTK1SCoQME5FahZSYPpeCxGqLKa4W\nOsKbWWsaIXvQBaQgvBtW7NCpltmvtncT7zhf/Yi1rhi2oLI63qFCZipCvyty\nwQn54z/H433wcFC7URAE7fiK6m6wwr+9GKos/vgtvyMp/cmrDFoX43NPRl9R\nEYxG\r\n=YHbm\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEH+1Cc/KLLgYZsofvwyXgkhsmIFffTwJQePRnwOzBskAiB6mWr9I0+are6MtRdu1RHvraIW5jygoRHPeXZsi2qz4A=="}]},"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":"sayrisuarez@google.com","name":"ssuarez"},{"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-formfield_0.18.0-canary.b39fde62.0_1594316234140_0.4750971969893947"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.dfdd8d6c.0":{"name":"@material/mwc-formfield","version":"0.18.0-canary.dfdd8d6c.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=8.0.0-canary.6ed717ddd.0","@material/mwc-base":"0.18.0-canary.dfdd8d6c.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/rtl":"=8.0.0-canary.6ed717ddd.0","@material/theme":"=8.0.0-canary.6ed717ddd.0","@material/typography":"=8.0.0-canary.6ed717ddd.0"},"publishConfig":{"access":"public"},"gitHead":"f0aaeb4b52155318bdfca32a9cd375c7cf8b0ca0","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f0aaeb4b52155318bdfca32a9cd375c7cf8b0ca0/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f0aaeb4b52155318bdfca32a9cd375c7cf8b0ca0/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f0aaeb4b52155318bdfca32a9cd375c7cf8b0ca0/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f0aaeb4b52155318bdfca32a9cd375c7cf8b0ca0/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n*None*\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.18.0-canary.dfdd8d6c.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-kzJNBpJIVlWqkZIWw6huUOYlg/lCJh2DMhAaa0hA0moEU0bLkcO1BiOYWvA3NFVgZXH4AfIYwl2N8kDWYR5QYw==","shasum":"0b90fc0e4af3477291676080fbfe8c7902c897fb","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.18.0-canary.dfdd8d6c.0.tgz","fileCount":16,"unpackedSize":48468,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfB2EVCRA9TVsSAnZWagAA7ucP/iqYh3RM6LzEjMZ3wLvK\ntDVszHnEvrWXw/pG//h/SRdOY1NDnAK/xJZ030dEbpEODPGqAflRQxPaZZ1L\nkFyFc/KLorCh1CyqQSTUo0RK2kEu9shaWgsZbEsLIJ7oUINzs+EQyL0muAu7\nrcR/OeDcOI1asQ8tT5NJj1tIl34SQXfmw0FFM+oZEnmMhm6YL3spBvwtwxmJ\nOeyzjQ5oMbMd2fzy/Df1phXG3XkcoQJCRNnqMluGa44cwxjceYKc9IixnPKU\n0cUDm67fqEUJN3rDCH+qzbedjzu1AmDoG5ObCYPvbHDgV/54Oysuch/erkB0\nOwYYMSGp15zyNAJvhXLAVGkIbx+FLsOL1hhgOnoXpvdhgXXnNc66gCcEKh/p\n85k4TpK6lQMVCo3vqjWzqZ4q6O401EpAfjbgXfjyLndyZpSN0vA9ug4Lw2tH\nCPv9iFnZ7dEvDcirqXDDfaqUAIlagjxGT+g0LwTg20C2Bo2xQnaCb/F217Kn\ne1t7PY0hLXInLXXeJtX2e8LRJ/fozUwcHxMWAZbU58AOYMN7KOYKAjLIexkZ\nDyFeIL9mhbIVekjbSrqsBN3cT4BkD0oi/ryFAAETMdEuqKz7f6fU4Ka2mOi5\nnEWBis3juymuG5YS/JeSxiQvAsZza0qH7Htod6viSGCScTf5rbolV5gYP544\nSEJ2\r\n=zIfE\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC/U95rdDHcvSMHTPlN6USYsf2bFaSVzdq5jqyD8ivF3gIhALr2saAOXFmTwnCwg3+mbG9/uM5XoumhJ04hqnAsABDY"}]},"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":"sayrisuarez@google.com","name":"ssuarez"},{"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-formfield_0.18.0-canary.dfdd8d6c.0_1594319124928_0.1888181952743071"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.11cf2694.0":{"name":"@material/mwc-formfield","version":"0.18.0-canary.11cf2694.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=8.0.0-canary.6ed717ddd.0","@material/mwc-base":"0.18.0-canary.11cf2694.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/rtl":"=8.0.0-canary.6ed717ddd.0","@material/theme":"=8.0.0-canary.6ed717ddd.0","@material/typography":"=8.0.0-canary.6ed717ddd.0"},"publishConfig":{"access":"public"},"gitHead":"652e6b8d96cc6adfa62d59e09d264defbb4f259b","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/652e6b8d96cc6adfa62d59e09d264defbb4f259b/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/652e6b8d96cc6adfa62d59e09d264defbb4f259b/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/652e6b8d96cc6adfa62d59e09d264defbb4f259b/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/652e6b8d96cc6adfa62d59e09d264defbb4f259b/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n*None*\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.18.0-canary.11cf2694.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-vwZ8s2xzS3VjPAaIqe7AdVuP99Nn+eb70IVf2TFm7VLiRdb9YoKdKVpTJuyPuIZIFqkw00k9E4Y9Qz3sWPvpAw==","shasum":"96e8b1f4bf9ec857e85cd2028923b0622cfafaef","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.18.0-canary.11cf2694.0.tgz","fileCount":16,"unpackedSize":48468,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfB4FdCRA9TVsSAnZWagAACWQP/1blDvOPtCmwcQsi+QqW\nTqKBukQghaVBJnPHZBQtf5emxj4SHMnaP9FyU3o3eLP5XA9DKmLFbi/bNG+X\nzkjLX9koUSTNUO3dx9j16XLsWdtHL7bhZBP3eixs+YVC+BvpFi+6vRHD9say\naF7BLAjWodRCa4r4GuvnVQIBVt0fOyOPF13qp0OUVPNw5bHrp8I21tlxDKzW\nrYyCi3wJJGZ8LvpMA1qf6rz4hQxmkho2k+fHFrY+K1SW3aW20VnGyNiAzgR6\nbK2uOoCN4x+PXsanVM/PtxjsKQXdP/hpKw0QA0m1hRSKcmh2XUBLW5Tq+0lK\nA0vTEWvUHsOl/CDdSfLo2zbgeLisDGeGev5bBhOxV5/IYO6EPNpz+ESEHxgm\n1qhExazAseHwVlkGT6AiPcHws7siZ6Y1Jf81DwVjrU6yu/yaFpW3+Yd6TSVa\n1QIwvBvi2BETVfuNAu8DY4mlAufnkK8QcSf6UDbWeG6/MFAbdcyqVUgJomw6\npbNnh/MVR5ZKxRjcYvz55rfeE4RU961TSqy5Eqi1yCUiFzXo3Wo1YwfbhJSJ\nLLUVHe1Ftxd/coIcNuVffPNburuS0anq8YQrw+SlYUOm6irAlKDnck7Y3hWF\nqQ4Vi0ir/V0XxBUH+BAbPd4oQe+G3A6gx76pl/uaW8otFNm5AY2Y+MX6kqaC\nXhe1\r\n=o7CN\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICTXVes3XbgaL4TCETv0Ix+Ups3HDVxlrZmBIJjSo+LJAiEA3p/0rUwC+E2Z1TqIgmjdSt3/fuxcf6LEemc77dYLp5E="}]},"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":"sayrisuarez@google.com","name":"ssuarez"},{"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-formfield_0.18.0-canary.11cf2694.0_1594327389024_0.7338329001206756"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.436d66e9.0":{"name":"@material/mwc-formfield","version":"0.18.0-canary.436d66e9.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=8.0.0-canary.6ed717ddd.0","@material/mwc-base":"0.18.0-canary.436d66e9.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/rtl":"=8.0.0-canary.6ed717ddd.0","@material/theme":"=8.0.0-canary.6ed717ddd.0","@material/typography":"=8.0.0-canary.6ed717ddd.0"},"publishConfig":{"access":"public"},"gitHead":"95b44ecddb7a4ad5662751540e79c58656790fa9","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/95b44ecddb7a4ad5662751540e79c58656790fa9/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/95b44ecddb7a4ad5662751540e79c58656790fa9/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/95b44ecddb7a4ad5662751540e79c58656790fa9/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/95b44ecddb7a4ad5662751540e79c58656790fa9/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n*None*\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.18.0-canary.436d66e9.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-pYcShLYmYFCIfehsi4nAsvwQU5vOLTbUx6kBr8M089i4cTgRVI0V/0o8Tqv8wOqPDg6UdcV/MohOE6Lv9KzoLg==","shasum":"f573fc0d714a4bf3a2092154c58cb397edacbc74","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.18.0-canary.436d66e9.0.tgz","fileCount":16,"unpackedSize":48468,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfB4J7CRA9TVsSAnZWagAAAH4P/AnH8OUxSKHAQuv7By+s\nNJ2AkyCxhg083lfinptjyjMlSjMC1h6Sc82mFir/3qTGIkyq5YIx56bIHD33\nCu2OZ7o5zHFJkTUpue/+jy8+khP5sTqCeo/51qWwyjf1vTU42hJaSqxpdTxR\nCT2hVuRtsVmtkVgGiRkSQGGrqSWtGPPwt4KozaSlA8yt9ldlIH5lVg7mSp9/\nZDeTKIooy6u12tSk2RqudyUqDqNgcY/1/uOjCvaR6ucom/fQlqJA5NQ+4mCg\ntQ0CPHe23O3iDQE8Q75keuwf1UYEnTu3kZzh+q5fDirrj9cQ4Ww1SKJWYiZx\nvN+RBi9t/FJgr32Ei3XHuZ7Sbi6+zRRouz/+A+MEKbwWNwRLJ3QS4sGNLzly\nOoWyyYV8M8f+9lDASux9gJ/gcGJeMwI86KZCfEs+S1HRzrdrNIcXea0LmY5E\nJmmZoGrQv4ddFlxwI9zOKcdtcFaLFl3PjaBVUsk/G+foVOeClX3ONWN8Qwkj\nLNVXVcNi2+ipWX/W+WIa1ZU6+J5m1kfSq9hP7Zl4601z74FcqXc15eMIL9/6\nDvwRg+8l5d/C4j1Yf/im8aLo3dcqFMGf7UrkAWemAb59qSh8FuPGSZLO9GUk\nKbhPj0UdP1dCyfT/JVdQ4npTmjeN/rXXYQo/9OH6MTwTGbZOkEJI7rY62a4c\nN6K+\r\n=oFJC\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBuPczGFv2zIpqfSPHNBWz4y2TVxA4u6b0G7opqGEbAZAiA1JYMg0/t4D/JHFv2Vu9FroTgSbhwx5ZT1oSbVXXjrDQ=="}]},"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":"sayrisuarez@google.com","name":"ssuarez"},{"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-formfield_0.18.0-canary.436d66e9.0_1594327675371_0.888754633654582"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.3a44d36b.0":{"name":"@material/mwc-formfield","version":"0.18.0-canary.3a44d36b.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=8.0.0-canary.6ed717ddd.0","@material/mwc-base":"0.18.0-canary.3a44d36b.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/rtl":"=8.0.0-canary.6ed717ddd.0","@material/theme":"=8.0.0-canary.6ed717ddd.0","@material/typography":"=8.0.0-canary.6ed717ddd.0"},"publishConfig":{"access":"public"},"gitHead":"2cc46bce7534ef7046c58891f32fd054a1fa8b3f","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2cc46bce7534ef7046c58891f32fd054a1fa8b3f/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2cc46bce7534ef7046c58891f32fd054a1fa8b3f/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2cc46bce7534ef7046c58891f32fd054a1fa8b3f/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2cc46bce7534ef7046c58891f32fd054a1fa8b3f/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n*None*\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.18.0-canary.3a44d36b.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-MZUQQj8HcxL7U09zHPY5ZWuCme2gQSNTH5rRNpg1hJpSQrmVSZLzAPKgPGucNNoGeRhF12CZK+3JdBRv8Sj6YA==","shasum":"6ff8bacb227575937b085b5fcc5604f11888fe34","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.18.0-canary.3a44d36b.0.tgz","fileCount":16,"unpackedSize":48468,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfB7grCRA9TVsSAnZWagAAYNIP/0MUkYcAWvwW/q9kPRqN\n4Jwcr7hu2GuPB2zon/eOM9ChTYvXJa+DcEhzWuEkcCL3wk4S87ha73MbDKW9\ne8cBbkysU92tJJ9gkrc0W1BrJJSJYJGZ/mYDqWsDaabvVye43N1YXo6INMxv\nkcSIf7fQDneEKmhS0PW2Ukqpid2xCpI6/9IoRkAQ/tVI48I8Nh9BJOz1STov\nJCaxRvRWuR5ustuLbz3S6FHx4kEY60WC+fg4i4N9M1Xvrt05GQHKhGB4JfVT\nKyrp9YGWZgkVpSqWP11QjETqd/CzlZhQXLF6p4dIBsi16TOvZF0HPzmJF97H\nGKEzGvOu5Q+JdwIoOV0C5kZ7HyYE5gqVlGbduE0XzWGckRuhGAh9O0kGzy1j\nnj5Or3cK6Gc1aQk6PBPd7fP1SGAgna3UT0cke9b1y4aHNN1p+gXC9KkDFt7A\ntfsWea/CVPOKfLjLguyJKdo8In07GtXyYbOMe0twsrgYitlLaNhz1g0vFjhX\neeiJKkj6kPg94XjjG6pof2ZfycQNk/SuvFNRUJhy70TDX8/QX8tAQGUDmz7r\n0HpQE36eRG6u2qjh41Z+mvhk1Cp5x5oiEQqr6cxUMOZ+yB18CyhZEbajGoyu\na9MtMhajgZ4Ij1R0Y9iSnEpsQ6Ft1CM98Rot/hRe9R+tXBtyL4Ht0Hf3QroV\npsKQ\r\n=9g1e\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHA86L7u2zAmEWOBh4Brxiw2yJZXwqajtY/a7Y8cpzDEAiB1CJAEQtGTQhsUpJADHKcJ3KxUiTZNZHkWsewKvzmD7A=="}]},"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":"sayrisuarez@google.com","name":"ssuarez"},{"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-formfield_0.18.0-canary.3a44d36b.0_1594341419218_0.6289039204633764"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.ec11ae6e.0":{"name":"@material/mwc-formfield","version":"0.18.0-canary.ec11ae6e.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=8.0.0-canary.1e7cb6198.0","@material/mwc-base":"0.18.0-canary.ec11ae6e.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/rtl":"=8.0.0-canary.1e7cb6198.0","@material/theme":"=8.0.0-canary.1e7cb6198.0","@material/typography":"=8.0.0-canary.1e7cb6198.0"},"publishConfig":{"access":"public"},"gitHead":"e68c3fdbbceeb46e346d694dad4b236fc74713cf","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e68c3fdbbceeb46e346d694dad4b236fc74713cf/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e68c3fdbbceeb46e346d694dad4b236fc74713cf/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e68c3fdbbceeb46e346d694dad4b236fc74713cf/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e68c3fdbbceeb46e346d694dad4b236fc74713cf/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n*None*\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.18.0-canary.ec11ae6e.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-mtpR3Ep+ZpZu5GpRYDBIaUYLnxyqGgGjfFBz+mAeTKJjP67uE9KAID5EqFOnSE0IEAyVFTcl/oG5tbWbXZwUnw==","shasum":"f9697a8247e200e0b732efd296225b3145023072","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.18.0-canary.ec11ae6e.0.tgz","fileCount":16,"unpackedSize":48468,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfCKrjCRA9TVsSAnZWagAAaVsP/jEefcUw6BfrHouAfhci\n6CjpY2dm7NJM47q1LHaU1sZgQSfM20PgjaUPk2w4V9fk4h8nL/6Uy2E57E6p\nKoMLPX3HiDGj2uvoH0zQo96DyXGmEG+BC6LOlzysyKZlgJOOpVbX6DyFGIFo\n5iXjb27l3DeBtIYlHNN9Boq3M/Zq7SCi6hfkBN9k4c/KxKXJQlAqWK7idGmv\nJE1WGAvBDLYdfwAfgqc3DasKyntEPxrgLcmZ2SijVXjrnar/r3ogUgoMofXq\nSvWXCM0BPMtqaxTHVINhBWFjpN4mmmV7SJzqltVFqEkDxuLMy4rXgLohZMe3\n7xz5WoptXSS9IZyymv0o9whlid5EALqfT0YOrNAYJf/Bh5qdF5kQ+KKhnYdr\nzYUu6g2Njmh4X6qBtRZ6k9Gv8oRRhYPHmasCX74Athwgbw83zrL9rpjJ4Qx7\ndTqGeOhis62eRfwP2hQ3ucmj24YeNtV6UAwI1w47z70PhiQezxKNZ/fiAUtV\nVRwb5dd13ggarKs8sColwUccChn48v8J8yO8pMVug7R70r1Xd0pLQ7g9cWdh\nBj7s0q0yva94xnOfRRmxKIJTh3JQ8glVAvBsDKYvYLd+qKa9zdpYLkmW492c\nziSbiDvwmL49geg0TeK/u0zbjBvxnaQ6wBhXpnjcTmCrknXmlY3JYnSAujv/\n07Rh\r\n=NCFp\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDhjy/qFclACemcqKA9ydg6CAcv1thxO+rLr3oQGlNdfQIhAOJPb3pvdVtwPQHhqWkgI34jwQ0XVxF9Dpkz47bHZTJm"}]},"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":"sayrisuarez@google.com","name":"ssuarez"},{"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-formfield_0.18.0-canary.ec11ae6e.0_1594403555240_0.1263049227077968"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.17f6cf27.0":{"name":"@material/mwc-formfield","version":"0.18.0-canary.17f6cf27.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=8.0.0-canary.b2edaeead.0","@material/mwc-base":"0.18.0-canary.17f6cf27.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/rtl":"=8.0.0-canary.b2edaeead.0","@material/theme":"=8.0.0-canary.b2edaeead.0","@material/typography":"=8.0.0-canary.b2edaeead.0"},"publishConfig":{"access":"public"},"gitHead":"a622acf92b818bebef7c3f77eb5296521068d267","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a622acf92b818bebef7c3f77eb5296521068d267/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a622acf92b818bebef7c3f77eb5296521068d267/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a622acf92b818bebef7c3f77eb5296521068d267/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a622acf92b818bebef7c3f77eb5296521068d267/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n*None*\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.18.0-canary.17f6cf27.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-3u9eUQPdtwlm90UbfhzKAtuju7j83DuC5M7lg7ZSCVvyFjyvsvUaEzlBovmmb5lG4mk9MgphXYU6XT6vg+prhQ==","shasum":"ef0cdf47b91c12191a32d27eb45ef4386b64bad3","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.18.0-canary.17f6cf27.0.tgz","fileCount":16,"unpackedSize":48468,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfCLQ8CRA9TVsSAnZWagAAvMYP/i0L7+fVZH5+vzOi85QH\noLbPHmWfX7mir77QBb4Ae2Z2JNwX2OUtvv7EmnCROFNpe7eMPEZCihHX6zH+\nVCbOJxNsx7WuB4Jbs+CIzyW16+WymResYW5Es07VsIM9HXveOtUAumwjlWY/\n03rFSOHnLvAeCEug1BI4D8AXv/itZnK5n8Kf/6G1ir4EsY+pXFk4Ufprr/2r\npClTywkLHEH5bYZTf02ONfNC2IyATELiNbzySQqQB60/0qxyD0e3iyXzXK2X\nMehCTUR/oxit9ZjfZaUKEfAeLMvIyqD+68e3JUTqP92vtSEGev2BrZOtPBYK\ngu1tK4MBWyzWQ/KzD7E9YIQROc17HhJR44BFajlhBmoJ/LIGetKjvO7srxYU\n114aBvMbJr5a6KA0XiajWib7MH3hsx6m8gLgxA3fC3UV2iuQYGSye7WVLPlE\n3enmzYueliPIlpKq9qUx2gRIH+IclWHVSj+1SgkW2khlMkMklZGHGWu/zT1c\nhgZYUS0PyulHuoFFam4LOIzeN2cydK8wFswsK6vXcOtWmv+bsoSJkfHVYB9e\nvfaXKj0wYQn6AcNTh6VhWZ6stVS2v/L/Tb/kUWxhT7W2/BOciCwrSQl1Jmwl\nsszNX30e22/ahPrhVv9pYY0wmfBX5s3PUrH+zK0kJNcz+QWOiM+IfMEbN+M4\nS1fx\r\n=2eMk\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGszXyDRWGy45UJuXs3pWVd8/epR4MKQifroabUJ/pNeAiEAnUvYY0N/w4EzRkfroGvFpHqefhzhEkXG51II3rs8gkM="}]},"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":"sayrisuarez@google.com","name":"ssuarez"},{"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-formfield_0.18.0-canary.17f6cf27.0_1594405945030_0.38584234079318636"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.efdfbc21.0":{"name":"@material/mwc-formfield","version":"0.18.0-canary.efdfbc21.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=8.0.0-canary.b2edaeead.0","@material/mwc-base":"0.18.0-canary.efdfbc21.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/rtl":"=8.0.0-canary.b2edaeead.0","@material/theme":"=8.0.0-canary.b2edaeead.0","@material/typography":"=8.0.0-canary.b2edaeead.0"},"publishConfig":{"access":"public"},"gitHead":"d0c5bf147bc31e55a775562b113790bac6052eed","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d0c5bf147bc31e55a775562b113790bac6052eed/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d0c5bf147bc31e55a775562b113790bac6052eed/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d0c5bf147bc31e55a775562b113790bac6052eed/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d0c5bf147bc31e55a775562b113790bac6052eed/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n*None*\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.18.0-canary.efdfbc21.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-X/n1fbT+4Nt6kZZ4LaL7uAS7rkaBwaiGEoZcu1ZfY3njPc7B3dFrHPdbaNN/K1emsjHZuIqL72iXbyEgx997PA==","shasum":"ae1e88a667e1bbd8481e01901e9d4038dbcf6de0","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.18.0-canary.efdfbc21.0.tgz","fileCount":16,"unpackedSize":48468,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfCLb3CRA9TVsSAnZWagAASUcP/0toONd3TyVQGYYVwUwu\nZpgllpB8+x6unu1XKeDcQIG+f/bDJeD8NwW/tSJ6aQ6ubFqw9xcZzGq2wWba\n/34CDihPsUXBb6nY11EqQpXvAi/zfxjyJ5+6jmp7VQSbYeusj49HCbKk2Vz3\nNPUyxK2vfBDcoED4dBPtyORJV0IU1k7z309bzq98T0nFyJ4SHhavgYdLJHQu\n3cW5xZHG8uAK+4oKeVd1WAW0S/KjtQgX1ONu1Sint4Vko59Zw8nrFRzka9b2\nqR8nZu/kjCjDjh/5DjuSly5x5CeiZnvRVvbwajgc227rYtaqTJVnTU80lcl5\nTmCE6xWXtC+0KUrsBKPdkDHM0mDxWBCpuBvzWLEXiTPiYoXNJrgbyiCcLHoO\nAJh0PMC9mdG2YFQLVpynytyUdKRNu90ycLvgRjnSy3X7RzcEbGX4tC2LKzpr\nuCoYLWNAgT5GWOh+J4of0DMshfmZewp6fCni7XpmQcIqMzPb93FlKJ12/XhE\nZ1+HyudSvTxhW8YYrjH4HFZA0yfS7/IUP7h9hE2VW3BBDOSwZKnjWIs0VfQT\nPpnVis72f+TdUcpkk2ssFqH3TeFTh1Yr7414hibe0hwypK0L9QDLKoqcXtdS\nErGSQwjEXD0NCdNdfswy6ft574N6LT6d2fF38aJJuTvc93nHsjTTPzNywXc7\n4V/H\r\n=sNh1\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBaDgRS6eXOIxfbYLUiJZTZpDIW7bhKlFQHBJ+x/EX7rAiEA0cggSy7KAfpFjyzbd5sp5GVIarHRTOJ2ZGS/GrT2bYU="}]},"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":"sayrisuarez@google.com","name":"ssuarez"},{"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-formfield_0.18.0-canary.efdfbc21.0_1594406647410_0.1064379116777141"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.bae4339a.0":{"name":"@material/mwc-formfield","version":"0.18.0-canary.bae4339a.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=8.0.0-canary.5dac1f624.0","@material/mwc-base":"0.18.0-canary.bae4339a.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/rtl":"=8.0.0-canary.5dac1f624.0","@material/theme":"=8.0.0-canary.5dac1f624.0","@material/typography":"=8.0.0-canary.5dac1f624.0"},"publishConfig":{"access":"public"},"gitHead":"3b615d0a523f0cb1bc5f7f0c0f7ca6eb5f52ee63","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3b615d0a523f0cb1bc5f7f0c0f7ca6eb5f52ee63/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3b615d0a523f0cb1bc5f7f0c0f7ca6eb5f52ee63/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3b615d0a523f0cb1bc5f7f0c0f7ca6eb5f52ee63/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3b615d0a523f0cb1bc5f7f0c0f7ca6eb5f52ee63/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n*None*\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.18.0-canary.bae4339a.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-2s9Zxihw19ZYn4uEH6rfaaq0iMZx4XBDmY53qgv2YnYtQxqjqBYuNU72BB8FeZLaqB637cqmRU5S2UnzsV5XVg==","shasum":"8897ab2e4801f2ccad9c60de3f18d44ceae64cfd","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.18.0-canary.bae4339a.0.tgz","fileCount":16,"unpackedSize":48468,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfDeAwCRA9TVsSAnZWagAAuukP/Akw3rELLwqi+4q+CJGb\nG4LxGw0saD4QBY9fypUpIr5jDjLSWM8yLdffG9Dcu2irgFU8QK8r5UQSrV9H\nJ2gwYYQyQfoycTNMo0/PqYwSDvnKUT/FHqIzAHrs81MvQsVnokq98GLUrT/j\nwcs76VnutqSmguAILxiF+gRoFViz62mBniI0rM4ZUbOJOgKoArVZth8I9++R\nhiTHSqhGSuyROG/jIQlamPykeawh8SjjPYwIYyH+gZnJBXlmHnYtuDtvzHNC\nkUnfTogrcYMR7QWm9CEllmEDNsi9ARBa63/BdwAJomnKfiIpOBTxo2s1ylFd\nk8LmqHgTCsfQWfmL0Eh4xJ5KfrWOKHcEnNnurHhLqnVPEHmoZzEgXJIH8zCl\nfa49C5oT9ewBKYn0yrT1aR+j3rak4fHj1f4cfUDtbxQ4AauSNMIhsDoOwBKk\nii7T/RCXcrbi65kAUK0X99b7XIBAVWXfdfGz+i3V6XDiKKsV4GOUjqPQsmH+\ncHTMONnPRMgielGc2QHNvnq3120bkSSW2QhS61bzi6ogDcXqPWCna8zT9d2a\nqIRA9g1uQxOCWSU6wDH4c1FCHptZt8MN41gJ9jCbqBfb58LdPKGIZbwIG6/J\npcSFcg725TomkTN5erK4+DcfUY89uPt6ktSvHBavbUyJDzSOoGlwhOxqmcRI\nOQGr\r\n=hB8Z\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCzF4iX+gwbwtAfmakDwEKcx1nl1vO/dLEKVF64uJb4+QIgSIIf9bQPZRWVZOqhHyHAkO6iqqfgzzejyEf+JekZusM="}]},"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":"sayrisuarez@google.com","name":"ssuarez"},{"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-formfield_0.18.0-canary.bae4339a.0_1594744879888_0.2604466402177452"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.28eac13b.0":{"name":"@material/mwc-formfield","version":"0.18.0-canary.28eac13b.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=8.0.0-canary.e6e23019d.0","@material/mwc-base":"0.18.0-canary.28eac13b.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/rtl":"=8.0.0-canary.e6e23019d.0","@material/theme":"=8.0.0-canary.e6e23019d.0","@material/typography":"=8.0.0-canary.e6e23019d.0"},"publishConfig":{"access":"public"},"gitHead":"26d5b26372c667630c62d9894c9825aec9e06f60","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/26d5b26372c667630c62d9894c9825aec9e06f60/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/26d5b26372c667630c62d9894c9825aec9e06f60/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/26d5b26372c667630c62d9894c9825aec9e06f60/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/26d5b26372c667630c62d9894c9825aec9e06f60/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n*None*\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.18.0-canary.28eac13b.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-inJCWioC9LJ8M8pTgUSFXjrrPYETW1Mz9lA9Fc2Jz5GwBVKSmN9u+XtJ6PLir7OfY6oaz/Log0Bu+3+oPzSvEQ==","shasum":"859f3b75a192c02671786b15a0e773a383cfc514","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.18.0-canary.28eac13b.0.tgz","fileCount":16,"unpackedSize":48468,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfDjBGCRA9TVsSAnZWagAAegwP/iVydP5fDycsL5aGmw3X\njDMYQEe0uxRSplS9Gvhjoxe7Xbze6AlmcC52fY6D+XwXuagVeICKqEABdzCr\n6oR95UFVUwHQZPGNLv2o//pyL/gFQEzcPA7muDB/O01raroxWrMcbhJchLEc\nc+KnZwkVG7UNyjT062QPDSSLLk6EPWul/OJSTWeFtGtWyziAt15wGO1evbmc\n3iyQ9neUaWK9pS/K8JS45k3dXGRl79xp4yCp6/TEbouWHrKrmx8spRFGdT9C\ndFzkTbX9p1gePmhrJ5folTCUoqFMgCaCO390bpUsEMdS0lLkqVLAPe5v6XEy\n4+1EPqhD816VKR1mJWZwzzCatI/cZwmb+Hte+N4HeFNizH/t3D+5eFTqiJ8y\ni0WsrAnEsxAwI4gk+EQYo79+a7BEMeymJEcZB9b1FkSFJZLxK+QqzuXT9rwO\nXCzxVGsIhU3lHJv9QpcyfU+fsyE52uXF1jwuYtJDE00BFXBu2YuGclU3CQpX\nlrvsVAaMVcQ7zKDPGi09071J/u1SLTAzF2mBS//RdF5eK0Dnvz95RpfVL1UQ\nzzAK5S1YE+Kvl7bxdU7Uj3mhAyIMhKOBWodRBC+UfKz3Kk/I4GP1apAeQH4m\nWHCmZalR1hPdnHBro276b5ooqLnKyMOxNXw0dRBVmynQueP+BcL5riC6ERqn\nz/ng\r\n=igMz\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBdg5VkwRK50+54BE8etzWjBP++d0pUUZxiEygyQbU/NAiEAjHwUCj8DPIJwc0LJnaSbU2Q2JyvsRn4zt3zoC7P5P04="}]},"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":"sayrisuarez@google.com","name":"ssuarez"},{"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-formfield_0.18.0-canary.28eac13b.0_1594765381759_0.5745398302375677"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.44966b65.0":{"name":"@material/mwc-formfield","version":"0.18.0-canary.44966b65.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=8.0.0-canary.ad4df58c1.0","@material/mwc-base":"0.18.0-canary.44966b65.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/rtl":"=8.0.0-canary.ad4df58c1.0","@material/theme":"=8.0.0-canary.ad4df58c1.0","@material/typography":"=8.0.0-canary.ad4df58c1.0"},"publishConfig":{"access":"public"},"gitHead":"e431cd0a71967599b61ba4219d726819807947ae","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e431cd0a71967599b61ba4219d726819807947ae/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e431cd0a71967599b61ba4219d726819807947ae/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e431cd0a71967599b61ba4219d726819807947ae/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e431cd0a71967599b61ba4219d726819807947ae/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n*None*\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.18.0-canary.44966b65.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-cDkVvRTZDQTdn8HhQdUbcuhrrw2BWzyPfDFYctvB9D1DyiAtMeOS01wKhzceqRCmulrMU3oD61K3mH+JVmpUJA==","shasum":"50985479e52a66d0ab45d69e5d1b4dbe8c9a5a7a","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.18.0-canary.44966b65.0.tgz","fileCount":16,"unpackedSize":48468,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfD0UsCRA9TVsSAnZWagAAS/AP/iUOq6cOgovg6IJtTm14\nQg/z+xQxYpaYR4y0vGa0mcPUgx8Vs9I23sfC3q/c8FFk3cO91CF6wwFiAAOq\neAH3ChHT/DqPEdJiNiiBlkOXXaZR6PFChMJlRrY0xQU83nDoMNHhS/MiIn9f\ncymCrm5Nam/wQmn5GeDABbVuQe5xP/QIv65qGCzkrTh2I4uE6RTXt58yF6Wx\n/wMW1pWCRnDA40IdMy8J5e86So173Oc607CuUb1hvGQPSMhDj7CZOprvaec0\n5JvlgRrdrkEZJTKyyXWqnDhHFfaQTPG9e1w3/C5/S2ktK3dwDLX3E7HNEC4V\nGBdSwM1F84f0YU8fqnqfqHieDUFO0R7SAYJTY2tgLsZVeSjuiCZUfhJY6XDb\n2KuY0Sms7o6sYmUnmRvoTmPhuLftioblTLggtgBqh4DW3OI2HaouQT04/zQ4\nhimwXdPwODf/W+AUvOaATp645u/b7cZJmeajDnaucpRcrZcS1OX3rglRrbFa\nstddNonbMVfv0o2v+Iu3vYBtot+vZJtWlUGM/S2Jr6ROt0JDheCUsmDqLqJK\npXQb9tKafp1Igqnqitzlw8saWef/wdbfxja0vQrm/MEIRElHatrxmz2zeUIV\nK/yf45gZyME51yq7lWi4n06xhovg3PYVeEWNynqjXXzxQGKiKxcesYQDznEm\n0tc4\r\n=OCT5\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBR0J6TiOlNkLK45QvyXnqDXGA44qXI/c6kV529HptXTAiByUp5P5rtFqSNHkB9gJnAjtxtlUy82wnXa1mzwGgDB5A=="}]},"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":"sayrisuarez@google.com","name":"ssuarez"},{"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-formfield_0.18.0-canary.44966b65.0_1594836268131_0.08383142090680007"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.3ef0ef60.0":{"name":"@material/mwc-formfield","version":"0.18.0-canary.3ef0ef60.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=8.0.0-canary.01db89053.0","@material/mwc-base":"0.18.0-canary.3ef0ef60.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/rtl":"=8.0.0-canary.01db89053.0","@material/theme":"=8.0.0-canary.01db89053.0","@material/typography":"=8.0.0-canary.01db89053.0"},"publishConfig":{"access":"public"},"gitHead":"6fd176476c86425b826862155a44202aed930407","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6fd176476c86425b826862155a44202aed930407/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6fd176476c86425b826862155a44202aed930407/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6fd176476c86425b826862155a44202aed930407/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6fd176476c86425b826862155a44202aed930407/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n*None*\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.18.0-canary.3ef0ef60.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-OZZu1iNezRtRo3N8yJ/9XBMF4AH79wWYgmp9MOrW6fiiE+a43fIswVAEOwlCPNEJ6hV7zfLSx9loD7lOIgpvFA==","shasum":"0e6fefdf88127afc1c8dbbba7278f7e37f2ad4ed","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.18.0-canary.3ef0ef60.0.tgz","fileCount":16,"unpackedSize":48468,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfEIYwCRA9TVsSAnZWagAAbW0P/1ifBg8OYWeBYaB/pSrH\nRuGjKUp8iFHEdlk+e6gqr114UFsnX1jB1nPtqFhd9EsMth4L1mt53Ptr4PbU\ntUTH4QzaI49pKBL/fpzvE+ehNs8/tCPuB2bqDU3kQw3GzDT04vkOWSIQMNCm\nm0+FVjlifBOEqevHM7fExmkMLQ7avf3qYO2VhUVcLGczPnPwENaCDpiBOxMD\nCqXtlPEaPtM5x+igB6H7ae4C+MdOxTwly+jRijcriC/C7JLIEOD4gy4lXFGD\no6tkHUhseB4LxaM/L7DGVjlWXxorhpRYMLSldLRdWuF7UJZf47J8eqKTYUzG\nqDHTNV9at7+NtOSwcOne+Q/NC+0wS/4Ldf5636/8HiErpDTfEv8RzuujK/0P\nFwLnImCwsa2pT6IEM2gWTdjU8LVJrnDPFizfA6hH1UA4W4bc3e3VEWebCsCs\ngwWfVXPFKvPSKFuNOlmUrEbrFCxvH0bEPGqwG4L+oeYMfBMqrkxguryLjHX0\nzkG5bi3vXICkL1SA/Dhu9bW+g43Afru28b84riNP2ik2dQxGHael0067CFvl\n9cFy65lCZ5uVP3djc6S/O64sGBKXtNIZE3pKciMUGvzt98FbWX7tYahBdY+e\n7WAcfIGbWS5/6NoaHgnpgKONLhXQAAK0URPEZpfzqO1zMUn331+y2NxE0m0D\n5SVi\r\n=BzjB\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIG883hJ7n/hyWa5E6JNRjR/AcJ+qNtVqtM0GCUpvH7h2AiAjafgNlpr6d7MvzolD5vE8qKs/M6tq03ju6wdy+1oY+Q=="}]},"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":"sayrisuarez@google.com","name":"ssuarez"},{"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-formfield_0.18.0-canary.3ef0ef60.0_1594918447737_0.4222699087119419"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.fcebf9e6.0":{"name":"@material/mwc-formfield","version":"0.18.0-canary.fcebf9e6.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=8.0.0-canary.01db89053.0","@material/mwc-base":"0.18.0-canary.fcebf9e6.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/rtl":"=8.0.0-canary.01db89053.0","@material/theme":"=8.0.0-canary.01db89053.0","@material/typography":"=8.0.0-canary.01db89053.0"},"publishConfig":{"access":"public"},"gitHead":"27c24842ba1b663ca72b52321d89d72fc7ef34ff","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/27c24842ba1b663ca72b52321d89d72fc7ef34ff/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/27c24842ba1b663ca72b52321d89d72fc7ef34ff/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/27c24842ba1b663ca72b52321d89d72fc7ef34ff/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/27c24842ba1b663ca72b52321d89d72fc7ef34ff/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n*None*\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.18.0-canary.fcebf9e6.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-2iRY/4vRB10As9QkqUmYPLkqqCxhxYBCSQlEhqAZfnVMKOna8sWB4ke26pZWZpWokHQCPyPprsB4F58mtw5HXw==","shasum":"f53283b566555b353bf74588992d9391842cb652","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.18.0-canary.fcebf9e6.0.tgz","fileCount":16,"unpackedSize":48468,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfFeZXCRA9TVsSAnZWagAAXi8P/iP+NaTOqo1kqzVIWkja\nAFq7N4ZccFpNYi04TzLIVvg4avWMElWs4WuOL1Y//ljImD6zYwkphwAir/pk\nsIXs36Z4H+rRiAzexAMMnIlLBbRQwSj9l2GwfbstVQsZVFVokG2qKPimCaHb\n3PhCpWreAbGX3oisn9bmv54zOwT88e+NCWu1kvV+zL2341yq3Wzuxbu3cR5E\nxweBv+sQTFgrgJQmaAguyFQxfd/rfawYRFSBLu9yNJvXLUb1x05yPlAyquBk\nS9Oo8qlxCNIkDT+HaS0e8kFtt8sKPgrtsjtXWZtKjAqwqDXrlBGqoiCi3wdD\nJjWZ087uczzMnqRpdN8lC6xTgeoh6QBtjbU5fOJFbXqMdcgtClesxU1BwSKW\nbNW/92Ldhok9UMtYB0ciXSfYkS4fISYrC/xV8UmCxZ5pWmC4Huv07OkKS83M\n2ZX5JRtb2vtHwkmiGD/q0lhUM//z8iG5FbQKgqFuSSytecGE2086P3HbofNv\n8UJ/aZeIN6K6Pq9+IGNG3AAbXHrwvyOJ2ylxwYkGQuB9MpjvgZBF5iqDn9dO\nPF4Gg1G+cRe0LT8H0396gVNr1EP/WMlmSueiNUlke1vz/Sg++1qBnvhlcGTY\nkeunCBuc+aiFKg3RtD1rD3dwGSQF6ged5J6YgVNKH+hr+dfFk9IFXaAlkCfO\n3yTP\r\n=FbE9\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHPceinFhQcggyEqC6CZ9XUhsvaPWak1bdZogV4H7XC7AiA7fXsXGgIZ/ltm0K4+mFb0dYPg8MvWpp0jZloBbthMQQ=="}]},"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":"sayrisuarez@google.com","name":"ssuarez"},{"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-formfield_0.18.0-canary.fcebf9e6.0_1595270742928_0.10249906074291704"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.b6a772df.0":{"name":"@material/mwc-formfield","version":"0.18.0-canary.b6a772df.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=8.0.0-canary.fb5a4cdeb.0","@material/mwc-base":"0.18.0-canary.b6a772df.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/rtl":"=8.0.0-canary.fb5a4cdeb.0","@material/theme":"=8.0.0-canary.fb5a4cdeb.0","@material/typography":"=8.0.0-canary.fb5a4cdeb.0"},"publishConfig":{"access":"public"},"gitHead":"aff69a9137a8578f83238c4b15f6ef6447db7c80","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/aff69a9137a8578f83238c4b15f6ef6447db7c80/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/aff69a9137a8578f83238c4b15f6ef6447db7c80/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/aff69a9137a8578f83238c4b15f6ef6447db7c80/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/aff69a9137a8578f83238c4b15f6ef6447db7c80/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n*None*\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.18.0-canary.b6a772df.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-aew6z4Gh4r6MxoOB7JwUvGoXULQWlR91SmGeiyTXMNe0waVdRpGNYcRcOPs17VBJhVD5cMFjJ4RA7BLQ9RLAOw==","shasum":"73c5a50a1bf27a38aa1646455099c511a7260cbe","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.18.0-canary.b6a772df.0.tgz","fileCount":16,"unpackedSize":48468,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfFh6uCRA9TVsSAnZWagAAIv0P/20T+Wbm5ptwUVosgcbK\n7LxVWPs9Sybgv688/RMsJgW+k9e/H+CU7ojyj+CXzE8TY2lK7ph4nhwieky9\nYKsi4hQIX9PRSZpyCkFwbqqzvLQ5IinUAcbsTt/U1D0cSNW641u0pJt/lbb1\nh32xvo9QtA6rf8JduwYVLuaq7+Q8haRQa2C4bnWLZ3YVtD1/7O1GpExWWbH/\nH05aH9ANju1C94Ig+3JsOiCAS9d5iJuTc1cxRj7z6pljo5pBAs8wXkj3Uge2\n5Ud7Mr5CUOPoARr/0R/cwmxJgkiAM5bGPpk2o8HXAZ+f01X8Go2q6oEhMl2h\ntSC1Fa5oYl3WOjMU0VXMCCUYCi4ykoBtzRT+Njh3zajN91dtBQ6XqX4rfXd4\ndXyCrzV/Kf5fM87qCS3LRNSOQK69CNQh4u1O+ayvx45pT6hhhY90TnZJOHZH\nd8ghWzJiYZxHD9xWpakU5EV0xcKyA/UOqElvGpZKxvrnUQ5q09MLpD6QhWxz\nMt/MBlYovPrDmRFzRIHW1DWfIM8oYsvrZh1tSueWfMVsSGvhTsqtXf5hmnJU\nYqRXB30crYo4ZiAgo6BMlKo+g7nqKHQ86COrBC0EccZaz/1bIQndK3SRgYd9\nBweKvt/S+FvGZIgq49kdJlvOrjFJ3NotivKt/OO3KUFWCPA2HtFau5SnWibA\nMth8\r\n=zxbY\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCID51sDTGhNNCXjUKK4K3JJigfRjUrWglGr/gb7PyVO9NAiAA/px9xevskj6x86w4yGdM6+BtVaQBC4vC6/4Gptzm8g=="}]},"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":"sayrisuarez@google.com","name":"ssuarez"},{"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-formfield_0.18.0-canary.b6a772df.0_1595285165903_0.5462078346639343"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.f6a6ca38.0":{"name":"@material/mwc-formfield","version":"0.18.0-canary.f6a6ca38.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=8.0.0-canary.abcdbcfeb.0","@material/mwc-base":"0.18.0-canary.f6a6ca38.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/rtl":"=8.0.0-canary.abcdbcfeb.0","@material/theme":"=8.0.0-canary.abcdbcfeb.0","@material/typography":"=8.0.0-canary.abcdbcfeb.0"},"publishConfig":{"access":"public"},"gitHead":"44166a768d79b9da90f97e27d954aa263d27b4b5","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/44166a768d79b9da90f97e27d954aa263d27b4b5/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/44166a768d79b9da90f97e27d954aa263d27b4b5/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/44166a768d79b9da90f97e27d954aa263d27b4b5/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/44166a768d79b9da90f97e27d954aa263d27b4b5/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n*None*\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.18.0-canary.f6a6ca38.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-HMKdbzGInAYmwPenBF+xvqWAP74tZFVXFFXRezjabLJqwNOXv0iTKpCcKG1spobwpzJ5jDJ3MhLVXI4NPji1jw==","shasum":"7bd769b5d2976345bb3e6648332ad55ca3a2a533","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.18.0-canary.f6a6ca38.0.tgz","fileCount":16,"unpackedSize":48468,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfFxqBCRA9TVsSAnZWagAAhbQP/j/R1GUqpIhKe5q/VF4a\nqdIt5wahzP9V9KDnuwOPsrVW/YnMwDy+gECrc9UVmwJT39PnvmMEikhczxYK\n4Nixrbcx0qXTqiwd0hbcgaXEPe0fCc2QrMADeC6L24VBW2VsrzFS644MuhyG\nE4ilJ6qMhNaEliVkP++UP9Plk4idlYAX2ImLUSlUWUqHgkdRd2LGYbGSJaJt\naD21tfb+7WablHUK9CDHdheL1fonhbblMIgON5NMyajle4LciQeN8W9+jhLz\nsSAEGYKFPV9QC3lVCLyXQuEz13/rvjvmuB6faOy5yweV9EAq6YHbEoa47+v4\n+hPZK6hpcHiXCI6cVR0eg5GmOutjGXzcg8znp+sPVMwNlToWyoPFNX6+gR6m\nmEcVC9CpkTUy/ZE0CG1AlNZ8SsE8X1OJhkszODLPnZjmSAQl7g/2SGuYmUWn\nBH0GszjXf5TUSK0ODoyYG5qdU4QIP/ggz61S6HaduXchFWmRYTrWGnHFUYQ8\nWrc0s+qgPXIndoCyLEwixtXFLDQ8kMz9KQcKGSsTeubLhd1xM4hauewMPwuD\nxmhezvymDVCbNgCnRPBC0hMWI6/ftlCf/6hpGEz5NMFqW/+yY3gnpe8xg45Q\nrRo0zPngSSt/NcEqznWvcUCTS0wN4avQ0lKFVst2TWAZk9PEhh47Lz8+1TKD\nn5EI\r\n=LFFt\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCBxrl+HhEDWaOiqe3U52QPBbHpGcxi5SIbGNWtO0CAHAIhALAsE5Z3ddZtCy8sp0vrjWcuIJ0qr2a0n/K2SSO2+/yW"}]},"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":"sayrisuarez@google.com","name":"ssuarez"},{"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-formfield_0.18.0-canary.f6a6ca38.0_1595349632625_0.8091565274132582"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.647dd6b7.0":{"name":"@material/mwc-formfield","version":"0.18.0-canary.647dd6b7.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=8.0.0-canary.abcdbcfeb.0","@material/mwc-base":"0.18.0-canary.647dd6b7.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/rtl":"=8.0.0-canary.abcdbcfeb.0","@material/theme":"=8.0.0-canary.abcdbcfeb.0","@material/typography":"=8.0.0-canary.abcdbcfeb.0"},"publishConfig":{"access":"public"},"gitHead":"ebb4e6346746ba552191ef32f6686136b75b1a6b","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ebb4e6346746ba552191ef32f6686136b75b1a6b/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ebb4e6346746ba552191ef32f6686136b75b1a6b/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ebb4e6346746ba552191ef32f6686136b75b1a6b/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ebb4e6346746ba552191ef32f6686136b75b1a6b/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n*None*\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.18.0-canary.647dd6b7.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-x0PaMLxmhfbUXofKJL+1+1WeAx/USVcbKoxYLOnlBl5ARMczzc1UEdYThZN8PuLZnsrFsZpn5m9YkEy45rpAPg==","shasum":"693f8e5f64be1931fd5866aebcf3b279ca0d51ea","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.18.0-canary.647dd6b7.0.tgz","fileCount":16,"unpackedSize":48468,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfFzbpCRA9TVsSAnZWagAA49EP/AyxdmmMVS8FBuUShQ5W\n4VosprbZ9XNvydwO1dhZxG9PlBrDL8jPUffQkwDk+ulBBevytRGEI/Ed3Cb4\n2PyikyDQ3GON8JFyi1XiiumkOixQSBC6itc3m+NUJgEbqs+8/cr9vhZJMGRK\nlMehg7en0zgicHWuWsLljT4yZscT35EYR+9wyrSq+YXU9fabXYBP6l8Um1Nz\nAeBQJpTXzaPDaRXXvPEXdl1OsDSA6UdgdR0apHAY2WzjO0ThEfgMdIWEPnkb\noQs1CXA8ZOXDRrvkEu8OXNqyBnS9iQopl0GeyRIzQfLjQyOfMiLNkLZ0+/kT\nnizEJdws/pL8xif9VNzsY9AH7XWs7ehTBO1LQTnRB3iq83Hr8H4cHcLdjJrj\nGrWlFqRc+ozcCeGJnfV6INTWouViJg4SBp4rxnUc51ByzuyR6tWPCEzL1HkX\ndjqgfsynUj7jsrAeDftY6D4byhH6WrKY7rFrnGcoryjTQkpif/aeMxonKMs4\nB4gS1C4ExmBUZ9S8QEjofSEEeGN//OERNBDYmENotpkSUrkgUAl//sRrz0/o\nkcLRzPxsqlWPUcEDzbLGq1ft1esBGKXCU30CrqH0MUxsww9rmTJW5FiH0Hkc\nlFRaFsC5HGfT9c1b5RaQ9kMnqR3119rg4gkxJoYp5WEm9FkvZbSg6jBB2WqO\nTZLp\r\n=U5Ig\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD2Sbt4MR+wHxwxyAi4XW6ucDebPYuApZQqbS4rJe0FdwIgEwDu7eFDcNI6wYPgFSh4inZt7ohsZmpCTiuaLAnpSCs="}]},"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":"sayrisuarez@google.com","name":"ssuarez"},{"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-formfield_0.18.0-canary.647dd6b7.0_1595356905247_0.3123748072509043"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.3cb7406f.0":{"name":"@material/mwc-formfield","version":"0.18.0-canary.3cb7406f.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=8.0.0-canary.abcdbcfeb.0","@material/mwc-base":"0.18.0-canary.3cb7406f.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/rtl":"=8.0.0-canary.abcdbcfeb.0","@material/theme":"=8.0.0-canary.abcdbcfeb.0","@material/typography":"=8.0.0-canary.abcdbcfeb.0"},"publishConfig":{"access":"public"},"gitHead":"18d8050825886f251014bddc9658829794a0010c","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/18d8050825886f251014bddc9658829794a0010c/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/18d8050825886f251014bddc9658829794a0010c/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/18d8050825886f251014bddc9658829794a0010c/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/18d8050825886f251014bddc9658829794a0010c/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n*None*\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.18.0-canary.3cb7406f.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-Q94ulOZc3T3Z7/wpU+dB5tFLVvQBWb/cQkSRSsSXUf5lC+thFkq+Ibv1KQzTpzaEjsdtxooGCYX218dAVdUwyg==","shasum":"8faf7d3a528a1863faf46e612dc78f528388307e","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.18.0-canary.3cb7406f.0.tgz","fileCount":16,"unpackedSize":48468,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGIv+CRA9TVsSAnZWagAAugUP/2+3cdGp9BKYMoX+v5PT\nxw6l0udOYym5hjBL5V+/StCyc+LyoTGY2xQIWr1tk4u5WnM9S99FtstvNqpr\n73F04yKaF1X6HFeOxUhdoPN3+LRNGXH5MNRebNv2N8lZ7BvCpbMhpmBWLW0p\nP56k/LUf5yDbY7PEypOdewX/UMuAEVWZ/Q9AvIGMFSDBXep5lIFG+86IJhHe\niWJQ243NH0Fil2Z6P+TUGttXY4SfuKQQz5bQOof4MZ7Cuiq8aTtBfswEBCQc\nRmeH9MroXt35Yi9QXgTnvPI+teoPmmH+++yJP4LPimyUuB3lqR9V8iwHWBpK\no4OAK58kDkohhBdBuJYoWx5aOWUTeWQB8+wnyZ2sn2bwh/MFSIOugbpw2v6y\n8wpbGVgwQdxUii8hGNgPfSAJXCOKQZ2RKSu72YDVw3PzCdBUNkDThqwtATmQ\nRXvCZyADJK08/IabkTzlndrwn4YTNn+QT5AsloDdVRntYlkoUre7iq82Pkny\nT9xGqdeH8dNvlhy1jNnowG6cGlB54j1xgDAxBy0KPuyIINdmVrHt7P6LHn6V\nJwBkVPlCncblSKY4iddtHliWQaG7EsxPKVZ8WKy2/zF05WL2z+gQ0o5Emiko\npalqN4Tf8s4pzqN3QAfr16SDmzzgPdrEfL/dpJuthQ7i35bQC7gkmvQCdxYd\nQz9i\r\n=ArNN\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDBT2LFyZLk93WYr5g6GpkAxXdnl7VIHqGRtdRCD395uAiACtDXyaGF0cW7k4wjjRbQXWZHB3N01XifTnHZpOSypWA=="}]},"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":"sayrisuarez@google.com","name":"ssuarez"},{"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-formfield_0.18.0-canary.3cb7406f.0_1595444221688_0.9948351461285758"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.5717a5a1.0":{"name":"@material/mwc-formfield","version":"0.18.0-canary.5717a5a1.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=8.0.0-canary.abcdbcfeb.0","@material/mwc-base":"0.18.0-canary.5717a5a1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/rtl":"=8.0.0-canary.abcdbcfeb.0","@material/theme":"=8.0.0-canary.abcdbcfeb.0","@material/typography":"=8.0.0-canary.abcdbcfeb.0"},"publishConfig":{"access":"public"},"gitHead":"80cfd9e67c10918291b4799451796c633cec6f96","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/80cfd9e67c10918291b4799451796c633cec6f96/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/80cfd9e67c10918291b4799451796c633cec6f96/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/80cfd9e67c10918291b4799451796c633cec6f96/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/80cfd9e67c10918291b4799451796c633cec6f96/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n*None*\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.18.0-canary.5717a5a1.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-9Oty/+PUlac90Tj0WjGBXedXIv+eqYdlNwlEnRTrmnJL3hqyVHjEYFQwkElfUm5wRA4pr+SRIDYi+t4UAE/sVA==","shasum":"17b214c7b7ead509e3f2030f71ff3a3e0261e0d2","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.18.0-canary.5717a5a1.0.tgz","fileCount":16,"unpackedSize":48468,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGLIYCRA9TVsSAnZWagAAakkP/2H2zfarml6ta74lNzvd\n+DQVzaI07UVeUZfUF5BZInUEBbWKWk3Rhi00Rgcf9yXbK4/YLq6w6uwMsBo6\nzDshDEZ2CMmCkVUTIGwclGS7oCXGrnImhHR/+JYixrIZb9JZL5gbKgQX0RwY\nK+Bh3GENm/sdrK8g1so0WpvxaEDgQ4EKrvx9xSTbjuchxKKD7sb4pRBOvYDR\nFCu3Q6luQqzRo3j3SjxmcdAaRgeQfHTk0Zj/ZppSDwoLzGITMW7/JnwP6I59\nTZTmG9N8kvVCO1hE8iWlbdnPyzq3sieR8pSVKOpxYSj2FYuTSdczhRU74+FR\nBeOXVPnN0jCXh7UhJpcwXyue9lVhZYf3Eup7qkw53ilSGMeoRPxvYPD/bWFc\nfrEC/DOxCat6jY8U8xkNJPz40jMx91tTVeuHT/GR+JwwB3guoKErDrljLjL4\nlhSmBzGSV1fJvxvxz3hYCubbyf2hYpItcDsllAphMWlj14arLZlu1eKW8+dj\ncTNJix8GsqmmqJPrr6/AakpMySDq7i3nWFpVwAHlpPM7szNHS1Oiz1g3jfhu\noJjbSXQWdxmfKNZpFffyoioT6UJeVzki0E3hEV0ZnvUDBHtk8sCBdGaOPCPA\nrGCmTmaESjXOPObjjghGa8Z7gBpVfpOnlDzhRjyFQqoNSnKSdpClbDCgva3O\nYVa2\r\n=Ml/C\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEAvDoBX21tCwg5yB0x1NduNcROQ2P6sBZjBpLW4tmTfAiBTKOPLTzgIo72Euryy81qBjch0jO2NHJ56xd7sWCa0qA=="}]},"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":"sayrisuarez@google.com","name":"ssuarez"},{"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-formfield_0.18.0-canary.5717a5a1.0_1595453976452_0.3708709188773698"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.d84cd4b2.0":{"name":"@material/mwc-formfield","version":"0.18.0-canary.d84cd4b2.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=8.0.0-canary.7bd5075de.0","@material/mwc-base":"0.18.0-canary.d84cd4b2.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/rtl":"=8.0.0-canary.7bd5075de.0","@material/theme":"=8.0.0-canary.7bd5075de.0","@material/typography":"=8.0.0-canary.7bd5075de.0"},"publishConfig":{"access":"public"},"gitHead":"c90ecef90fa937fc0931100e4f1d3627211865dc","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c90ecef90fa937fc0931100e4f1d3627211865dc/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c90ecef90fa937fc0931100e4f1d3627211865dc/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c90ecef90fa937fc0931100e4f1d3627211865dc/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c90ecef90fa937fc0931100e4f1d3627211865dc/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n*None*\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.18.0-canary.d84cd4b2.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-G2cK8rcEjR6DfqzmylCotsLeg23pXhLzqiVc0WbhDqCcQKx/rPyP42cYLkD4U4RS5oI7eJzv+r4ddFHozj3T4A==","shasum":"5b2e8be9c3a7dfdf3c0c455e54c89d954158c288","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.18.0-canary.d84cd4b2.0.tgz","fileCount":16,"unpackedSize":48468,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGLKLCRA9TVsSAnZWagAA3IsP/jDlWdNr1fjD/PrM6CLr\ny05luBiR8tS2i5vWhXk5nHjbGCaCWW6PpJ1FZVO6KROm4zE1S3gin+tfLuAa\nKZuniUT8zT6n+SWZBsZDdUHTHxGvZJAvMeprFLltV7V7dUX0jAMZ7XVRP9Ou\n+y3XK4nG1pqLn/8ZKaAEUkrQMvkbJ+B6J9pfahHJvloxf2t86E4PUyavHvBS\nd+B/E7tPHNY8uoH6EfyGksAqux+3e+h5vmiKDaZv5eD64K+576WHG1GCOOOK\nPTstB11HQgIRrQoQ7Cz6O9Bg2sWGMhZf89KsrcS9VMMkGZhKYPdV90ND1UO3\nhMJXJIDw+4Bu/nsOogF7zQ+7W2k4WW2pkZAt25lHRJaqtxLbBkQQPRJ1gZ1f\n9638nuGy0F0VQR7lwUM3/3j1PZEG/zEnC4C0fjuFTtRAn4jL1BrdRoXGHcNF\nw15n6basZPeZW6jVFeIrejJX9iPSSnGP+PgRDh3mkqxBXSCDh2YOp6493ey8\n6CCw4GE1ottQmKMQFT22p04udje1kY+wIzUn9+LGkX8/121u8cM3q2RM9TLN\nzHWtyjz7iFs5/9YyluyOzh1U8IJy4/ajwJRxNQ+5PyHHNG2uC/Zt9vhPc46i\nnUQ/SnDYwvoqoUJfN72Bv76sdkd3yxFEvy9gj7pw9Or5SReZLiqnH0SJV5hK\nNcJB\r\n=yhfj\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDucA34beOOJR70p6wW5G6Bjrlo8oiEyiwH8hgs34jBYAiEAzj9PsftEp32TdkxbJ4wdE+HPmRROZG5fwtp08melWpE="}]},"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":"sayrisuarez@google.com","name":"ssuarez"},{"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-formfield_0.18.0-canary.d84cd4b2.0_1595454090880_0.10401586137935626"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.f279e7fc.0":{"name":"@material/mwc-formfield","version":"0.18.0-canary.f279e7fc.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=8.0.0-canary.7bd5075de.0","@material/mwc-base":"0.18.0-canary.f279e7fc.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/rtl":"=8.0.0-canary.7bd5075de.0","@material/theme":"=8.0.0-canary.7bd5075de.0","@material/typography":"=8.0.0-canary.7bd5075de.0"},"publishConfig":{"access":"public"},"gitHead":"73c3335df275cf5fb17f3b990df9c4b8184ce3ed","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/73c3335df275cf5fb17f3b990df9c4b8184ce3ed/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/73c3335df275cf5fb17f3b990df9c4b8184ce3ed/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/73c3335df275cf5fb17f3b990df9c4b8184ce3ed/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/73c3335df275cf5fb17f3b990df9c4b8184ce3ed/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n*None*\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.18.0-canary.f279e7fc.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-/KJ3z0boPCI0UgHbj0TMlYzRZP9iQF2cKWCcShSosByAJlR6zczbvRSiELQkbvggVw/SzjwZrLvcDdExpfbfDA==","shasum":"a243c43dbd1170f04de12deee45d05b590a2ed32","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.18.0-canary.f279e7fc.0.tgz","fileCount":16,"unpackedSize":48468,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGLb0CRA9TVsSAnZWagAAWjkQAIwhP8nI1sdQ3pWK6g03\nhSGKAUV2qndi/ICYSA4uodO4KjB3WsEsRuU/AjdX+iF/wPAPXvpXlGlVkK6c\n+DqnTQG2Zdtsri4RMXoATaQi+kDv67btPYJA1UAOI6PdYgKNTqtM2yim1cvL\nL7ktE5SFigZmxE5o2jVQLS0ToO3ah9W8M7uysrwaijD5ZbZvXYkF45IlTq4N\n/NTUcpncHPB1ohGnt1Y98QPjBBCC6lcBpqnpOopcKABxZGb9BEmLkRxgM1fO\nvZWD5/mJmYrwzq6djjmgXrwHrXwsIySpaBo0x9SRdlMoscOr7qrgmAHTuhCZ\ntFKl58Y5j3CmQjTN0fLIjuegwebwbdLOQuSbTQcQFlsNX2vIOz8mXwyIMUVI\nMFeieFfE6Uw3r+unCLUrlE/blXf/gubamb8UQUf7hPmTtMBnFymt5voPYZYM\nZqLzdYRECrjA7Mr3TE2RhhdYn34enyImBlyz3dx9LeBt1DGdnv4t0BhzgTLK\nFL0wNnRR9SVQ61Dczl4F+Zgyp1mT8ULXPdJyndwoxF+c7ieDT+D8S8rp0nse\n715rQlomASXRknXv8HJuhVJsCN098XnbOHLmyIUP8hY2EVDeUmXvqPu+1str\nGt2D8CP5qJe4ut2MmVAQ118Wyy+6FqHjFBSL0VNTF/GL1PuNUzbbik2R4ALd\n+6qF\r\n=BPNY\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQClaGS4xgsvpv5KSgtXqf5SfPREW8tOlU2qsB50hQ2k4gIhAMM6UT//ntxcsmI/nhcYyECGCCsyUFm/De19z35l3SH8"}]},"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":"sayrisuarez@google.com","name":"ssuarez"},{"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-formfield_0.18.0-canary.f279e7fc.0_1595455219756_0.009746313689696473"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.f181e3bc.0":{"name":"@material/mwc-formfield","version":"0.18.0-canary.f181e3bc.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=8.0.0-canary.7bd5075de.0","@material/mwc-base":"0.18.0-canary.f181e3bc.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/rtl":"=8.0.0-canary.7bd5075de.0","@material/theme":"=8.0.0-canary.7bd5075de.0","@material/typography":"=8.0.0-canary.7bd5075de.0"},"publishConfig":{"access":"public"},"gitHead":"33201638ca11f3c34598273b4ab4ec40bb019951","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/33201638ca11f3c34598273b4ab4ec40bb019951/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/33201638ca11f3c34598273b4ab4ec40bb019951/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/33201638ca11f3c34598273b4ab4ec40bb019951/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/33201638ca11f3c34598273b4ab4ec40bb019951/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n*None*\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.18.0-canary.f181e3bc.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-Yo0AQGAWc72kPtmkdAJ6RcRszI9EStLBl7qfCI49I2CI3eb8WKks3d630wh1jbZikbVos0GlQfpCfhwhlro2TQ==","shasum":"cbd8a775fe93e1848eb26ac07e78f1cd2339bd8f","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.18.0-canary.f181e3bc.0.tgz","fileCount":16,"unpackedSize":48468,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGLdrCRA9TVsSAnZWagAAwRoP/0Sklo6o9Bm34w8zlQaM\nCTxeZ2NRAynL9fASgaXjqGtP/eDczz3vy9vZSPBr4U7U6DXOSS7Kw+ayyvyK\nN+8ul4sR8YpiQndmDsFho1oiLGD07Ea08iLicHxLHUNVTUsgCK/V+DkhjUYh\nFKIjoZSS1jl1XyNfQfSCCa/vp9jITXS6dxoYdZP6oBnezZR+iIxBCZYSlUi8\nq5ejKB7QJx/CF35R0FpUVVagfRZp0ZK1PktLAla1Xx7cTA6CtdgqjUhFJ8gx\nhzjuBGUCwJNB1DbBuk7EwbSPHGnv3KJlLkjc6C2Ft8qf/upT/9REI/yB6m/f\ndxZWs4vFmTMldaP0PEgzfMWQEj9zUt5OvD56Up4ZvQPi92ua9SyTH37gTgUt\nUn7gWjVkrmrd/QgqfqcPcqwQ2QOMxAXBSnDMX0Ry6HGlaqdltlWSEAaHs5xr\nFKW/CPjXPIdJVnnKhjBcimzEIvxtgi3yCEGg4BtxDU4+nMAi79jVx5C/6e36\ncx2dvyQcEGf8E/ze+DE828OyN1M9nOSRUBqbS62lebHwQtqxZ7f4BpY76r/u\nz2ibYR2O4vtgyhsnwWbTkmy29pfdzAn021LOyCF/x6JN2ugtQLZtsSzU23PU\nHcO45yVWQ6Tour5p6zasYMti7BrIs0enM5LybxvbIWKWNXnTwoB06YOUSbAV\nZvhY\r\n=dDzs\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCg88zchirCrz2rxvAJnHmaFcdeIcFLh+WGA/QeERnmPwIgP4ZdNZ7kdA7VMbQ3mErMAbaETpg8sQnYTyTs6JCsZMo="}]},"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":"sayrisuarez@google.com","name":"ssuarez"},{"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-formfield_0.18.0-canary.f181e3bc.0_1595455338840_0.6894947370307423"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.346a622a.0":{"name":"@material/mwc-formfield","version":"0.18.0-canary.346a622a.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=8.0.0-canary.7bd5075de.0","@material/mwc-base":"0.18.0-canary.346a622a.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/rtl":"=8.0.0-canary.7bd5075de.0","@material/theme":"=8.0.0-canary.7bd5075de.0","@material/typography":"=8.0.0-canary.7bd5075de.0"},"publishConfig":{"access":"public"},"gitHead":"03c5331dce90f41a530d3c8569d87c9569257d13","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/03c5331dce90f41a530d3c8569d87c9569257d13/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/03c5331dce90f41a530d3c8569d87c9569257d13/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/03c5331dce90f41a530d3c8569d87c9569257d13/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/03c5331dce90f41a530d3c8569d87c9569257d13/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n*None*\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.18.0-canary.346a622a.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-PCF0aAK3Ar+mSmBZ8USdRmnf6dfaOqtMWSwE8ldAbD0Uv0UVMb/UkvAmMVeOsDCwQP0KaU+EDhxjYSiZLQ0P0Q==","shasum":"9914445b0c7aaea04a6a240771271245ef2d7760","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.18.0-canary.346a622a.0.tgz","fileCount":16,"unpackedSize":48468,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGM45CRA9TVsSAnZWagAAIusQAIMCXlRYUaAThKkXjCzF\nEty6xZmQaBGZ8/vYP5Xal0cOmSFBVmqIyIhyHqthJmoFKG3kUoDIWKikmK5X\nv3lZOq8ruNqgzsgp4DiG5jekLBp6xSagg1Ltz2FFpo4g+Gn9fEDsZQLg+vEN\nMU9Qi9B36Cdcc1YIlgBHPhd5Mgrx/1tRadlAtQ/+PP8IeRtF/YYR5sSedM7p\nJwReWt98AA134the3ulMBG3is54Wukzbqy5FuPTmWxIcRPfBZP4ui8/YiOQL\nQpNJHHiWOcynX36X4Ir4E0jDhCX/EFb2ke48p+K9t8s0VgC1oa3Lx+sAI0vo\nuY98qyEJhYW3xL62QQO4SjygVRudyvH2YEXGzwJLnR9f2uwf33krTuoawszp\nu8yaUHuNu5WzGCGIwNa7EOu34uqfpmLWLxn3bH8sy3xOOueThFtdpTd/DorY\nAM23cyeRBCnhFSBb9nwZENBR0PIXrGXHoIrIEz5Yq7joh5xb04OLHoj/LuQJ\nZYk9pxDTqa3ISSTIfSiQoIlm+DqYUcP8ydrqkQl4FadbNr2dXPrLENrWEcfT\nVBlYCDIJe48GY8o/RXIyBPmO5ykhuLeaq7wLhKz9eYJipU361TqcSS/Wtm5l\nDkMSbKTQI7O4VDFQUhLdk8PJ1VkA2LoUTsdMhKThD8OtX+4Kdm+N+MRjeHUg\ndmVG\r\n=ZT4B\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDVdvnI5jaIdT7V+onwhMt5lsR0ADssFjdcwWXIDuaoTAiEAptqu+hPz+CGo6xbNQrhfs5H6TFq2COKyGiZtiVrrs5I="}]},"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":"sayrisuarez@google.com","name":"ssuarez"},{"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-formfield_0.18.0-canary.346a622a.0_1595461176591_0.3449714446409835"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.c9e8a848.0":{"name":"@material/mwc-formfield","version":"0.18.0-canary.c9e8a848.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=8.0.0-canary.7bd5075de.0","@material/mwc-base":"0.18.0-canary.c9e8a848.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/rtl":"=8.0.0-canary.7bd5075de.0","@material/theme":"=8.0.0-canary.7bd5075de.0","@material/typography":"=8.0.0-canary.7bd5075de.0"},"publishConfig":{"access":"public"},"gitHead":"bdd3a24691563386cbeffdb8824ffa26a3c03ba3","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/bdd3a24691563386cbeffdb8824ffa26a3c03ba3/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/bdd3a24691563386cbeffdb8824ffa26a3c03ba3/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/bdd3a24691563386cbeffdb8824ffa26a3c03ba3/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/bdd3a24691563386cbeffdb8824ffa26a3c03ba3/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n*None*\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.18.0-canary.c9e8a848.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-f5sDpMKqNAq/kjRB62Q7jyhyO9I1UgZnFSomJSzAKuBiE2Nb9qHxL2iWBMD5DjMQ08BXQUOsNm6f9AL/Iv82eQ==","shasum":"bd66b3dee33d98fba627e83f7714a82c018de7e0","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.18.0-canary.c9e8a848.0.tgz","fileCount":16,"unpackedSize":48468,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGONlCRA9TVsSAnZWagAAiTkP/RRu0U75zH/wA2K8Fylf\naX51huWs5ky52c5D6qflUDbULud9Uyyfsi1oieX0fcidLQNwbnx8IAOMhxCv\nTTbX2d8IZS0OdWzxsyHnKgQDQDtABf5Gl7hX25EPkfXkQj6Qe5qaaL1HpV/O\nLWJbJJjheg43L1qsGV48LCTqF3EhNCJzQ1jVbvo+3wvwnVPTUxBfYz+oC3oK\nujID+niIqJ+/uDYaOr9GWkZLpnMBBJ5/CI04jMd22JaPEfmydmbnkdX+PWYd\nY2+b8x0p8mumWuP0A/WXImtr52QDBjB/oiLHqdWEs2KXDbV518lexfQBPCcM\nUSMmgFJBfTHMFnSBcN+NoREcSL4x2XML/k1lhoL22RFeSDE7iCAY3hrQMhJl\nqRysXuNCnfqmE9RLyBpWW2yT/cHLuVCrCEAIW74X6m7tFkCVr+AanQqCvoxV\npB3z9cmqbgm9eiGC10pJVzMCDb4up7grJ0uYEK6laP8CXHL13sKd44J4v2Px\nuZzHPt8ShbZcVzl2a3tnMDwMkR2l/zGxPSEzKsu6yBfqaCYhEuJYZy5e0n2f\nIaRRKFRWfsUr3wOi3GQVTouqOQYIQt6dAcq5GevuMqYh+FGZWIUy+zu+7Dmq\n6ab6RWqx86DhBJfXiesvRg/OWKLMcBL33voZYnEF6W1F/hrPQqoVFIHMqd+c\n2Oss\r\n=Bgy2\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCSLHE2Bp7NxkDCuIuNNnVRqerXbXsBEQw/CSgVVoiGxwIgfJZwRbykCRmBSj6dnNrm7DW00u5n5NiyKACJjAKIh3o="}]},"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":"sayrisuarez@google.com","name":"ssuarez"},{"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-formfield_0.18.0-canary.c9e8a848.0_1595466597302_0.86531054598293"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.718c385c.0":{"name":"@material/mwc-formfield","version":"0.18.0-canary.718c385c.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=8.0.0-canary.7bd5075de.0","@material/mwc-base":"0.18.0-canary.718c385c.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/rtl":"=8.0.0-canary.7bd5075de.0","@material/theme":"=8.0.0-canary.7bd5075de.0","@material/typography":"=8.0.0-canary.7bd5075de.0"},"publishConfig":{"access":"public"},"gitHead":"dbfbcdf25eee8ad94b581e3e4da50e65b4ebce74","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/dbfbcdf25eee8ad94b581e3e4da50e65b4ebce74/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/dbfbcdf25eee8ad94b581e3e4da50e65b4ebce74/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/dbfbcdf25eee8ad94b581e3e4da50e65b4ebce74/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/dbfbcdf25eee8ad94b581e3e4da50e65b4ebce74/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n*None*\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.18.0-canary.718c385c.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-gz016zJ8ksMpcHuNWWmeQw2o/aX/zK+5RyZ4zkJzY/jiZL27PBJL1lSE0kAaR19rQGv1qpQgZm1p7fm2deUQwQ==","shasum":"cd517c69211dacca1bd3bf8ffdcac52aef14761c","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.18.0-canary.718c385c.0.tgz","fileCount":16,"unpackedSize":48468,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGe2mCRA9TVsSAnZWagAA++gP/3U6/B1okoskqpCn3ncK\n4So24Pb4jxK/Jr42Suht9g9D+MFbG4+ZyBucuJFeAtDHS+7+8onoXW7fZw+g\nUspLSxcsFyR5nu/odDa0cvuta6CHAqcA9F0ECCeoWqMkefN0DpcxUJ+3RS4h\nri4DBdhCSdKYuD1uPXFyaYkGKd622ETVscqwwEV4n/rvfdCt6L3kEs7LIdJ9\nn6dLpQkIZWfVNVOALauve7Q1OLC7LHtEAtc0XnBn2euHmLvl8+6nr7ZObNpV\nDGb/KlmWUpZDUbl8LdbsOf5ohx4wzEPz6FUm9XEAqPTsuvMHV+uGVGwxiINE\nGndCHdaBslp3e1Qti79YJ+TsTEr3LRgIj4cLNKMBwiRGJ2pZDon1zixjwHTE\n6ehu5OG9pmktm7xyFECp0LTL3LT7XZZhk7TUXAucYvdPKlQYzMqQ5d/tWKjT\njx8EylPjeBEds1dZ8d24EdtUkZ1WvlPRqo41LiXCoJFTHVPIdUf5swh4FxBP\nLa+25zuCsUk4omiXZcxPh/0YbqAMNBgzlBP5EVRrhkxr8pftFzwuiGTuQsaa\nMRvuRri2Nz49mIRYl5ljCIPPBdrdATrtt1M95TtvHUlRdUQZSkIi2r3xT/zv\naRL53z0qGvf9nCu0lJ2/W8d4UQGrec3QnADo9cPaJg/4AkaLGuJxg5cVmqJn\nio4U\r\n=EGsH\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDg/CitkNw34pHSk6RKoqC1F57+0xSTKFC8jMq4pSEY0AiBAJp5jbfH3nzDcXcot1a+ljc1EhVTX7u2JjwNa6wwENQ=="}]},"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":"sayrisuarez@google.com","name":"ssuarez"},{"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-formfield_0.18.0-canary.718c385c.0_1595534757393_0.09769001965134749"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.cd516a27.0":{"name":"@material/mwc-formfield","version":"0.18.0-canary.cd516a27.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=8.0.0-canary.7bd5075de.0","@material/mwc-base":"0.18.0-canary.cd516a27.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/rtl":"=8.0.0-canary.7bd5075de.0","@material/theme":"=8.0.0-canary.7bd5075de.0","@material/typography":"=8.0.0-canary.7bd5075de.0"},"publishConfig":{"access":"public"},"gitHead":"e3b4c123ab8be0eaab91697be67dab225c8ea378","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e3b4c123ab8be0eaab91697be67dab225c8ea378/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e3b4c123ab8be0eaab91697be67dab225c8ea378/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e3b4c123ab8be0eaab91697be67dab225c8ea378/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e3b4c123ab8be0eaab91697be67dab225c8ea378/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n*None*\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.18.0-canary.cd516a27.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-tqF6I4B9N05WOesE2eMoCwPe0J2NZsBlhSCtS4zRTkZrYfn5SA0Vt5R3oaQkS/7Prkuh+REhaVl0jEoNdfgY9g==","shasum":"cb11686522a6aecc8b69b7b3e05623f09961ebe6","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.18.0-canary.cd516a27.0.tgz","fileCount":16,"unpackedSize":48468,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGzIgCRA9TVsSAnZWagAAsN0P+gIkBfskssl9mbEWdfWy\n/jKqkWmDXc58X8sL5rYiqZBK9vxTkpTpj0IlxN6geT7PJeucHFmiVNX++ouj\ng480wBJricRj8acM+2nm9M/u8YWR3k6Jq3VpB2lsykfsvsQyieA3jq/PIQv7\nbp0URuYUPops/F2w7N6NH7xZObC5MRBslsGnV1K9jhHZKFEu0sIIvAtvmO/M\n5Oyy91045ILJrvCo2rjzhsHmS0VUAAi6CAq9jkx1VaZnA58NXoLyHSetTrT8\nplRmRSsJKGA65WKd8tc1mNeyWD1Ffux86Q1l3B69z4+/auRY4JG/DieBIkKf\nJnus9FrYb71kHBzBHuiyhFQRe217wZg1Y3F/sCjfX2MTRKeJH3JPAKoli2jl\nsDU9jOr5sUeyMpqsWmLK8jhNJZTe9Y/A50wg5A8t12PTmAVsDbYIlUmDoKcm\n4YmliKm8eJtW4KpbzWggTKl+W6gKQ3UA/NApwAGDM9h8IdvcxZIIeEQ8BuSu\nS4Ezc+Y+LL8SQ6ohrVPqquGpXOKNOBgG0DgsM2J8F1ftTZeXPQb/5nwSpUzE\nnNIwDs6IS7HudTCdqphHcSDZDsq45jQp5PPbGNfLL2ZLj1jAAoAs3hggsI/e\nIKvtXav4NS5E537TfVTF+wHOh2JfGs4zWEaZ9SujIRP7SjUrPIV/ouZ6eviV\nbJiP\r\n=oVaP\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFizRO8ThXpSJPNZliErhmAAabWv5TQ5+924GMUOHNJTAiEAm0wYyFOiPP1Ie47i9qjEMmZocIyVuchtbCap3/AdaUA="}]},"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":"sayrisuarez@google.com","name":"ssuarez"},{"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-formfield_0.18.0-canary.cd516a27.0_1595617823647_0.3546691903165051"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.1f082191.0":{"name":"@material/mwc-formfield","version":"0.18.0-canary.1f082191.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=8.0.0-canary.7bd5075de.0","@material/mwc-base":"0.18.0-canary.1f082191.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/rtl":"=8.0.0-canary.7bd5075de.0","@material/theme":"=8.0.0-canary.7bd5075de.0","@material/typography":"=8.0.0-canary.7bd5075de.0"},"publishConfig":{"access":"public"},"gitHead":"ac40081dcdf0df5976402e0f1f63b1efef1f945c","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ac40081dcdf0df5976402e0f1f63b1efef1f945c/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ac40081dcdf0df5976402e0f1f63b1efef1f945c/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ac40081dcdf0df5976402e0f1f63b1efef1f945c/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ac40081dcdf0df5976402e0f1f63b1efef1f945c/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n*None*\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.18.0-canary.1f082191.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-DOXHYz/16i9h8KLJ22HCadvRtNceLDOYz5WwZ7ELXP+QQYUxlHQwkj1CQakYKzaLw4moj2tUL94Bv5Vn/DiAKQ==","shasum":"f4145a2f4d82d48832582d7fb6fa8b5f9b9155e3","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.18.0-canary.1f082191.0.tgz","fileCount":16,"unpackedSize":48468,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGzNiCRA9TVsSAnZWagAAD4IP/jpGh2Sc9dJI5Pu2eJ4W\ndE8OSuCmMw9MEWW8HD2oamGIwpalRFIZIahhjfu6QJtIDZtMSVrpFAc8mMfw\naDW6uMIEEokry6bcr45FIW0M1G0Jz0c0MQ2QWfQFMglSu0vXk36143fk+dmg\no8+dZpiRj1HvPU174dJJ0NfVqgzlcSKDGKbEaNvEdvAqNGVmDwq5ysrgGH8L\nT6vD+OAMseaWvJLA4OF5oFikS+dhbiN+xApNixcAPe1X1RlnEKX2tOED1wyo\nt/t6vXpppOlsj6HpBTclbA9Epex7EROoBR7HpVE7DdUIXH1rngQRvEDRkAsG\n87qokUVfxPKPBfyEfOgwwsHVYj276R2kdnhkC5CqMHHVAIiH4jh+cT1tpcY1\n24epU4trllna0NYhFGxi+6vVuzHDQ+/D2j5vmphq3BkLvecPBhvefUP9Setc\nqB1zdU00LR9gMiXDDXhvw4/Q4zK+IuvyhMov4lIvx24KyGAkHW/pjNPWBuV9\nyn6BxyjjNJNu1Y3MNmgehdkjo2RAhcd7+5QNCXNkCU1Wn3e8FaDcaO+TsO2t\nIajamhOAZiDffp5Bb/ttfRviWi7iwiKQMks4C89bJ4T+MhYGrOJFE7JWY02d\nBhoWw9ijVVApCGkDRlQwf/i+gr7dSYvQHlFNNCvj6nghoSw4/YCKhugkYNgW\n61EH\r\n=bdP+\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIB6JNYxkHfiOqCruil0EfUwN5xtSDuQUGwWXBp+g8f6RAiBGfH3/PxftdyYAmfOhthUq07Xkt1FIKjeZ+/gVFdEgNQ=="}]},"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":"sayrisuarez@google.com","name":"ssuarez"},{"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-formfield_0.18.0-canary.1f082191.0_1595618146345_0.41200594735472773"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.ea3e82dc.0":{"name":"@material/mwc-formfield","version":"0.18.0-canary.ea3e82dc.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=8.0.0-canary.7bd5075de.0","@material/mwc-base":"0.18.0-canary.ea3e82dc.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/rtl":"=8.0.0-canary.7bd5075de.0","@material/theme":"=8.0.0-canary.7bd5075de.0","@material/typography":"=8.0.0-canary.7bd5075de.0"},"publishConfig":{"access":"public"},"gitHead":"acc963dd578ca338baf9c6d33a6a341a215c42a4","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/acc963dd578ca338baf9c6d33a6a341a215c42a4/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/acc963dd578ca338baf9c6d33a6a341a215c42a4/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/acc963dd578ca338baf9c6d33a6a341a215c42a4/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/acc963dd578ca338baf9c6d33a6a341a215c42a4/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n*None*\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.18.0-canary.ea3e82dc.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-/73nV/706YrdW1/OmMiKDmp9qtZ74tZ+4uucVTCQ3SmLEd2pAJ2HZN71FYWJ1d2RwmU9JSiPUejOA/5UPphrUA==","shasum":"ef97a0538d53a40558d9495e92f727157362cebb","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.18.0-canary.ea3e82dc.0.tgz","fileCount":16,"unpackedSize":48468,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGzScCRA9TVsSAnZWagAAZGYP/3/BvogcHllg8ZQMpkss\nHVb5nKG57B/gWfIU0gDSblKYFXPYgAeiZ2pJz5DR/uScz3kwQ81QD60dY8SU\n2/hHFL/dPbIEgU1n8aDctnULNDfwQxBHRjJ7vNXt39rM9psa75B0lhN7sBza\ng5YQ40PdHA8yl1zj3sSta2oJlRjGPxhvYXfVC4JoAj5iwg9WFDADWjR16gJ0\ndHzUHt6raxnPOLu4rw1cI77fwqupK1sgBIQrF95IcmCRUpa5Vj4I36WVT0pp\n3x+fXrPDHB4LVTyarIyBWhbNB/WV/iB9IT7dSlyVQyKcxbfJ2SfBGJReHExr\nguwmkuAlZH7qgX89k/pLKEKTLUHKC6raERszIZtWlwVw/OdKyZG/TimBw83S\nSXEWpuwKtLHAcuG4yPgylXPm2E1frgZzzYHIYSx+Aw+WzwRld+qe9ghT2JQ2\nzWWNJ6SEY8cuJ2by/sIWe4phAliqDVG+l3uSVKZK+E7Va/4rfyvL4j2vf360\nCugNIINJeyfBUt2lA0lg/QUkA28ku9ft1UYgdJNnWx8/eyXZpP2p4k41dTVk\nRehz5xESnmghDF39n720MXEaQCpSepKCGimyIIIslLpfaZTxXnQtilFi9x+N\n2qRdkbqZ+A0EA5YsaATIM6qncvkXsjJ5E1KDSdGEydHJwpYpPP8d39KfM0M5\nF1xK\r\n=IQQ2\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC4MV03CoHs/NtX3nPCyYIlaf1Eh/fIwGYmKsiH9cQFYQIhAOmnIJiknNTf/c6uDvvjkVqM9+ICb9jTMuqYz/VHqXJV"}]},"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":"sayrisuarez@google.com","name":"ssuarez"},{"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-formfield_0.18.0-canary.ea3e82dc.0_1595618459764_0.5004646213138093"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.94987b64.0":{"name":"@material/mwc-formfield","version":"0.18.0-canary.94987b64.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=8.0.0-canary.5511e0aeb.0","@material/mwc-base":"0.18.0-canary.94987b64.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/rtl":"=8.0.0-canary.5511e0aeb.0","@material/theme":"=8.0.0-canary.5511e0aeb.0","@material/typography":"=8.0.0-canary.5511e0aeb.0"},"publishConfig":{"access":"public"},"gitHead":"53896e3bba08752d5bf8b9c64423a52c96fc448b","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/53896e3bba08752d5bf8b9c64423a52c96fc448b/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/53896e3bba08752d5bf8b9c64423a52c96fc448b/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/53896e3bba08752d5bf8b9c64423a52c96fc448b/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/53896e3bba08752d5bf8b9c64423a52c96fc448b/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n*None*\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.18.0-canary.94987b64.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-4MAGpIW8FZKDNY7IaTfjyG2vqec4F4WM3jH5ajwln7C2w5vzLE20/Cn6jyEFui5gdpgRnaytbWg2GCpHWkb/hQ==","shasum":"5ceaa5802336e373959cbe5eea18cbed76a5bb0c","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.18.0-canary.94987b64.0.tgz","fileCount":16,"unpackedSize":48468,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfG0PhCRA9TVsSAnZWagAAtlAP+wbxCKl5ykv8Ew72TZs1\nU6Bsf9Jox76OVOua8O56CKPOIuwtONpj3TUNSnwvl7Ry4uD4Bsx3OfzWRH8n\nivAG06idv0jkskLtOLAJeCoxrMlqjiQYQ0vSrHw05pC0nbmzvh5ZuEkxc+Mx\n3oE0MChOTQEgK5wz36UjUhAxUiVyB3pOjWMLf7D90JW1rULJNMUj5o2bSsxJ\ns6cjurif93MlLLlCZKnMEwJ8bED+HEEI8jGAcuxq0td4VcR8YolLpSKmRavY\niIHU3HnJ9L1oYNF2oQkyVW3twBy1PlOW/4Bn6y+/kHhWavoUdHbmHQOHnC9q\nGUuywgU/POuky1A+zs5it44X+Ds0Wpxgy3sax0d0VE+kuBbZGcJr9nSsGOJ3\nljxoptv2vkVBL/qL7KZXqe+oW/cjBe6BHNMl/2Wn/jBNl9MDGVr7jBw6Zsh+\novIfy9HK/n6shA7U8rx3wDPBX34E6lmM7XetdMFc0qzo2ETEfuB59wI8rwVS\nEhIzREymxMS0sCe6nkd1+B6LqF9Pi/hwlCRofj0krDhLZcZ1SulJVajDJb0T\nskcSbuwakZ1T/zJ2zpBJmN5yrDTUEQayRiCo1PJmMpdBbrwwPvPKVNgjCDUO\nioAuA+4SRHCvChfZL506e1Na/z98BY4GdMnFv5Rxi7EpVpfb1jVevD+SrI/+\nGIst\r\n=VakY\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAQ+gQ5b5pmycbYUUFSEvOX1Kna+ys4ouL7xzzw0egfgAiEAg4Ls4Vzsb3UhCgWYFP8Vmrwjk409cZv+yrNXVHTjWVY="}]},"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":"sayrisuarez@google.com","name":"ssuarez"},{"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-formfield_0.18.0-canary.94987b64.0_1595622368774_0.9136592386402209"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.ff49b7e2.0":{"name":"@material/mwc-formfield","version":"0.18.0-canary.ff49b7e2.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=8.0.0-canary.ac405eae1.0","@material/mwc-base":"0.18.0-canary.ff49b7e2.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/rtl":"=8.0.0-canary.ac405eae1.0","@material/theme":"=8.0.0-canary.ac405eae1.0","@material/typography":"=8.0.0-canary.ac405eae1.0"},"publishConfig":{"access":"public"},"gitHead":"dfb6845469ead87e451744df01007d8532a7a5ad","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/dfb6845469ead87e451744df01007d8532a7a5ad/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/dfb6845469ead87e451744df01007d8532a7a5ad/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/dfb6845469ead87e451744df01007d8532a7a5ad/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/dfb6845469ead87e451744df01007d8532a7a5ad/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n*None*\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.18.0-canary.ff49b7e2.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-13hwTh82/OSbv51cIMiHSX/WxCBROEKF7aIXmGu/VhPv6WeRfCC1H+QtS8nkP3MVEPsfkpBqWhz55tU09zBCgw==","shasum":"f38d80183a3e871d7c34e664c194476e3eb59817","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.18.0-canary.ff49b7e2.0.tgz","fileCount":16,"unpackedSize":48468,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfHyU6CRA9TVsSAnZWagAAbQ8P/2vGuwesOxRiMW+ziZib\npdE2afyf+0O0pd+thsxnToO8TnZ5VeaAWA3J7JAAT9zute/4iDn2iMLHGJPx\naEO9jKGTs+sG4WMkA9wJy72t8Hl1MpLei2JUlsaaMCoxgKuJFX8ZrO/EDE7x\n9xopM/vJ3QjSxTe6vTWQJt4bv3o0nHgoLOpYWYtcaAu6aO5xtD6po7b+QeC7\ndej/89T1pzyWRK4NmVoLwzFmQfM9sM/mw1v8DJvHGeLeTAkkvWgqdPqdEvP1\njgJGHlMIZBZe2quduRWC7RJfW+fIQ6nt9hwNoeAUg82/LP9ehP6aftA0UEGe\nhP3h6u5ao9FRYN5Ps9lhTqXWkW8aOOZz7yVm/mxZ5Tr040l18xlg0J0WDlM3\nKIbwrvJzkHlu6z7s/fYtXTyElx6T4m9bKCpAEe/JMaT8sov4dpmX6vdcZHWl\nGewTgk3Vo7fBiW+f4PQscSYnakkFA/7MQJ6s+UKPcoNXENWUV0x35fYRWv9P\nUUcnbO75moD0Zp8EPqWTPt14rM3ZCnxDNXOYnlMGDEf4HAR1+0lceIeTVhNW\nkicIrfPaJRx00G8keIKdG6un3jBu2c8kIJK2B2oOOIc6VbRIsnyX4xgl/fTc\nET6MRW23e8448RAiQxCMSHkUUHEns+lWbhmS06Wa++Zc8vyFgjALSx8JSdIx\nQk2g\r\n=n4SJ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDrwAYn4pPCo/WDZRp6A6x1XdBSvMLRd2Logd8738IbDQIgCUsvzuvpX27AQ7LNe/Wp8pW4SIC9rNaI1AtNSZkvolo="}]},"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":"sayrisuarez@google.com","name":"ssuarez"},{"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-formfield_0.18.0-canary.ff49b7e2.0_1595876666402_0.8439877609538002"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.3d334ccc.0":{"name":"@material/mwc-formfield","version":"0.18.0-canary.3d334ccc.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=8.0.0-canary.ac405eae1.0","@material/mwc-base":"0.18.0-canary.3d334ccc.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/rtl":"=8.0.0-canary.ac405eae1.0","@material/theme":"=8.0.0-canary.ac405eae1.0","@material/typography":"=8.0.0-canary.ac405eae1.0"},"publishConfig":{"access":"public"},"gitHead":"620788b72968e56f9d028ba5ef2ee7d1b4a91488","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/620788b72968e56f9d028ba5ef2ee7d1b4a91488/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/620788b72968e56f9d028ba5ef2ee7d1b4a91488/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/620788b72968e56f9d028ba5ef2ee7d1b4a91488/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/620788b72968e56f9d028ba5ef2ee7d1b4a91488/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n*None*\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.18.0-canary.3d334ccc.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-i3wcjFUIHJiJYKr73/pJwSlvyZuGuAsJckKbxc55ZBbfcog8N66jkoMM2GrkwYTN14meHCyh33T9kJyFejN1Wg==","shasum":"ef1fc24289b97056ad45ac0afbceae4f9a118bbc","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.18.0-canary.3d334ccc.0.tgz","fileCount":16,"unpackedSize":48468,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIE7zCRA9TVsSAnZWagAAxkgQAJC5eLs/K0iMg4IdgriB\n46DCFfsLmdx7FcWMp/jgRtKbf8krcA/bYuMwegnW9mTfGfN6t6mov6o9bKmp\nITHJjAZ/qDo359b8QN4/TI+s4ON3JeS8ZysC/SLwxfPxOtlie5xewB3BK89I\nxp/NvJk6YNRvebds5CSAXfgC/YW+hLS5nOJXxV8eVd5ufkNZr5nKY5hnWHLv\nGlnCfC50QSn180j0KkqMNQvc8ncQneZHygHlmHLWZG9C6nE2fcW0+nXs+cVL\nl63oZ7lEBn6etgwCYLZj12lS/0JmbYTe1qRcAs+xn+r20uQBXdEeM7ioZqlW\npt8xxsFJtc0L/AVlH+cPG5/NAjBP/XlXaY/8atMvWiLGk7a5NmJifWkvz+gS\nCZRdOxtbGn7y4yElcCjfnHdSFZ0WipsheS5Rvyge45qltrvpSF0jXO7xk0WE\noXHOTFniLAg3JtWtFMY0r1vp0w7zzEu9Osq7GBI1WDhmw1V66iYYefoxXVBq\nL5ni1MKKgou2D9gYZdkMNW5Q9Qn9uj4gxMaTN3XskKsGgYmlzeCaOkQ7ZTaN\nfbV5KVKMhcrK6dR0ZrQnBr2joQ+fUr0YmEmqX0JBBud1mlm4CyjW0yPN1FXv\n/Oqmt5QTUJVVa1Kng0QS4Um0I9HL140OL9f7iD2ED1zXRKXmAlSy6PRb9t14\nrVeM\r\n=P+UZ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEkwmyn/VdiZb+eqounTuw6uHX+E+rk7hhfU/O6yD8MBAiEA1sQEhX4Izm0VdmFEhvLs98EDbREfSuyB5qYf+Ybs8po="}]},"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":"sayrisuarez@google.com","name":"ssuarez"},{"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-formfield_0.18.0-canary.3d334ccc.0_1595952883423_0.41765275583026407"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.82ac569e.0":{"name":"@material/mwc-formfield","version":"0.18.0-canary.82ac569e.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=8.0.0-canary.f86f83f54.0","@material/mwc-base":"0.18.0-canary.82ac569e.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/rtl":"=8.0.0-canary.f86f83f54.0","@material/theme":"=8.0.0-canary.f86f83f54.0","@material/typography":"=8.0.0-canary.f86f83f54.0"},"publishConfig":{"access":"public"},"gitHead":"0082732bc61fddf6b3c8f7d114839f1937e7d1e3","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0082732bc61fddf6b3c8f7d114839f1937e7d1e3/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0082732bc61fddf6b3c8f7d114839f1937e7d1e3/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0082732bc61fddf6b3c8f7d114839f1937e7d1e3/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0082732bc61fddf6b3c8f7d114839f1937e7d1e3/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n*None*\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.18.0-canary.82ac569e.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-CuWkh07g8+/Drbcvq0gl/lPKMCZhlnyjTi7rFsns8NTUzXk9ZSoM9PUl1un9KhQBoEsa10gjY2kDci4Zd0EYjw==","shasum":"1787ea21c0fdefe31c8995c0531f685c31692830","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.18.0-canary.82ac569e.0.tgz","fileCount":16,"unpackedSize":48468,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIHF6CRA9TVsSAnZWagAAq2UQAIkcLtxs80tI63jedNNP\n9wOiEg52/hy4/QOgBrcSO1ZwQ+gqgI4Z9gXXLKjG6LEZ+frT0femoD/7ym5s\nRNDBe5OOHYtYjkOrOLKXh8/m5rOQbi4V2meXDxbzeE1k/xFMCQ7f+d+B6vJg\nXlRlYQdDqyaHtO8lXZtu+5WBm3bQS92oRuDQxph4lxIOjy2kSX4OxRewwR7e\nBLLcLlkGEfl3zHJM02APlmbh3i1aOdyiBnPl/fTkdliz6ylyNB2e34LAecZt\nTM53c5nwQEKgguSXLtsDnYAY/UO+zMA0QPv6n4R+TC5phW33xFhiErchSVXO\nbWS4g8Hg1DMIBlwbMFANFr5rnquEybGewQ//jdtk8O3YeAYboN5ts/yay+ns\nW66h6pNAw/9ts/UPs36GYrH45FXSHxKnWExt586qPwbwups6LehkXY1L/MGO\nNUGTvHMBirS7EEJrkCagbWbyvK9P4Smi3AJPkUjugrlQpHzelz6r1iPcX2cu\n5MkQnK/BVkWp1WpAQZnQSNfhcyFi2rxrlVUiMvCLDeqqv+1mO2Qbp7ANKKmc\nY3tkEZXy/6/FTIcLjwTa++IHDpAla27btox/iAaEBYXNKadJtFgJETTAdAmP\nLE9YDWpjTIfjhJKB7cW8Rzr43eo1aDlbg8zG5UbNLPcjBU3oc2fWKlQmEZrP\nJj5a\r\n=R/c2\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAciDW44bSCUX2dEUwMV15NQG2UitVrUIYO7O7MV1WMqAiA2fhtrvsM9S9cmhWOJSnod9d5hO6NRu5MA23CXC3TIAA=="}]},"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":"sayrisuarez@google.com","name":"ssuarez"},{"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-formfield_0.18.0-canary.82ac569e.0_1595961722421_0.002600619517667324"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.99df7397.0":{"name":"@material/mwc-formfield","version":"0.18.0-canary.99df7397.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=8.0.0-canary.f86f83f54.0","@material/mwc-base":"0.18.0-canary.99df7397.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/rtl":"=8.0.0-canary.f86f83f54.0","@material/theme":"=8.0.0-canary.f86f83f54.0","@material/typography":"=8.0.0-canary.f86f83f54.0"},"publishConfig":{"access":"public"},"gitHead":"e236d384d23fb84c6f0db97495a598e8b374ef26","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e236d384d23fb84c6f0db97495a598e8b374ef26/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e236d384d23fb84c6f0db97495a598e8b374ef26/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e236d384d23fb84c6f0db97495a598e8b374ef26/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e236d384d23fb84c6f0db97495a598e8b374ef26/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n*None*\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.18.0-canary.99df7397.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-JxVaccFX2X+pfMEZ1mxYaV/kSxm67osI2N/bZFnCKsrAsQ3dET0NzhI7BRZ3EBK5n+cmjxP/HVOatngmZCEFmg==","shasum":"4df508f98a930489ce2edfa426dd9adec49ce6ae","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.18.0-canary.99df7397.0.tgz","fileCount":16,"unpackedSize":48468,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIOGGCRA9TVsSAnZWagAAIi8P/RlvyLodsv44xxIcd+J8\n0QU7I/STrX4SFU1FEUPJcMuTA0bDdsUzSD9vqG2pfOvhWWmqQmLNr2/bDgXa\n3MJCbRt/kxkv2HsyMTo5KU6k9l7Dn9jzuKyFfOaqYYPxA54UOszYWY+9uJyC\nVpvithS5lmQPgKYjW9rXuRg7k+NBSG32P0sPwrwl2PRk3TS2r1zcpNyD1YgV\nZ4EKFSpKx8dW+7Nqgh7I1prWZSTiNDfTgB8TYwSOtZ9lxhr79hIxp1uefy+M\n0Or695taMEs6zVVC42ma3miSYzCYMaskEbAPYfFuDJg3U7X1U6KjKOPQnMJu\ne9WFH2uwROuFGg06Zd0EU3OFUT/IwZ5YEc89z3Y5ebpX/v6euOWdT3XKWU9W\n1WW+b8Of9t6CF3bEafs7xTXNIXTfpHDg38oDmVRL90tQOemZ1bmSesrrqkBc\naC9K0lMa016ZZMC/K3swqTjN4aNLn21a2kuXTlRKjpqGgKoSK5p28vUTTrel\nOUwHYfeUvYoCh6KTXp/IH8RS0ozkAGREyuFIvrrV+2JRCTNQEmVFjBKtXvq0\nKAiEq4BguTO0GPGejlecBllPkNsRNqPYdM419s61GbSs07mqV2qfqsrXpcBq\nm5DngdHwHu/vlvUno5lUVQvceAR2Bqxo9C3nTBJq2P+4Ytgrf7Wiu+aujDfv\np5ei\r\n=2Rz1\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDX2zK/aISuDAPKw8ZsUJzG5t1UzqhO24u/4+C++aPQNAIgSl7hOMhVLXZDzu70lYeLzRPTr6lzW2QGyK/nU1QOtl0="}]},"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":"sayrisuarez@google.com","name":"ssuarez"},{"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-formfield_0.18.0-canary.99df7397.0_1595990405504_0.9892257352625808"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.45493e05.0":{"name":"@material/mwc-formfield","version":"0.18.0-canary.45493e05.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=8.0.0-canary.f86f83f54.0","@material/mwc-base":"0.18.0-canary.45493e05.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/rtl":"=8.0.0-canary.f86f83f54.0","@material/theme":"=8.0.0-canary.f86f83f54.0","@material/typography":"=8.0.0-canary.f86f83f54.0"},"publishConfig":{"access":"public"},"gitHead":"8423dd01198986c553ae23227667bc8148bb4276","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8423dd01198986c553ae23227667bc8148bb4276/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8423dd01198986c553ae23227667bc8148bb4276/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8423dd01198986c553ae23227667bc8148bb4276/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8423dd01198986c553ae23227667bc8148bb4276/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n*None*\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.18.0-canary.45493e05.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-Y0aEbgk7zgtqI5c7JCBVLEFR4HtcRoWjPDdnGU5TSA5756lka8PmBCueXD9lE92ULOXjTAg5MFueCzTi5MYPsw==","shasum":"79a3b80b26825e94955821dac2010072e1983b61","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.18.0-canary.45493e05.0.tgz","fileCount":16,"unpackedSize":48468,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIa7dCRA9TVsSAnZWagAAncMP/2xMaTfwyRa1E/nuxP6d\nGk0oXJ/q4XAe4IvTU6mqSH+HP13ogalUBL05c18vUKlZwiUCfYgenrct8L+k\n+1ItdE2pb2oRNcL1KtW8ZAiPI5HBK204EedOFrrzX91o91m3o4v0owqwgCoc\nciam+UDCTAWP7l//mWaa7bB9Wi7QdgCSDySttltTuY9xjV9/l3FowN3LxoWi\nGX7/2J4Dv5MJZxgDU++V6gkSYqKPSuaaCVOIgf97Wty3hEVo53V8AnpUtTOq\nV9M/pF7ZbkqAjj6Pdz6qtBWNm6Erkdg04Xda5XOS99RWg3EGKDHUPJgqDdhd\nBtjt3FYjwNXMyIGJGhl4TjdSuhHYqRakSgtfDdrWNgTEM5oBbHhq2T9uHQah\n2FDKiZ49QIM41ZmjeYVQAz7WvVw9U18i6La82xcYxFXmD8sVBq5DHUGrspVw\n6lKDRIGkrFbAYYusp4JhChB9swF/a0f4c7eo+kdPXI94d/jZqrDTYEHjI487\nl6TJvjLCHeFOEs4M5ubkb1r3uiLtGYjh4OMeaxSK/Lzdd7dsf31cIZMgM3nE\nhX3gQl9UgLbglH6Fh9x6K5cY4x+NKnDuWklpIgQSevQce65EdYXvBMYUd5mL\nF6nqmlaapq37zEzQm6aHz13H6g4fuaJX5hln1o5FPutq71eWiQdzh62x9LCB\nXtiW\r\n=bhm4\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIC5WjIBPgexrnIhveD2+c8wz3F/JngIuT4o0kf9efVxMAiEA5UtKzBh0M9AaMeFqq/o31DjLSez0dQFnotG2aNpyp7Q="}]},"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":"sayrisuarez@google.com","name":"ssuarez"},{"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-formfield_0.18.0-canary.45493e05.0_1596042972876_0.8348303629294751"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.f2ab0a95.0":{"name":"@material/mwc-formfield","version":"0.18.0-canary.f2ab0a95.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=8.0.0-canary.f86f83f54.0","@material/mwc-base":"0.18.0-canary.f2ab0a95.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/rtl":"=8.0.0-canary.f86f83f54.0","@material/theme":"=8.0.0-canary.f86f83f54.0","@material/typography":"=8.0.0-canary.f86f83f54.0"},"publishConfig":{"access":"public"},"gitHead":"1009e1c7d365921dcbc3071cabaa20c5e21e65e8","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1009e1c7d365921dcbc3071cabaa20c5e21e65e8/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1009e1c7d365921dcbc3071cabaa20c5e21e65e8/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1009e1c7d365921dcbc3071cabaa20c5e21e65e8/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1009e1c7d365921dcbc3071cabaa20c5e21e65e8/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n*None*\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.18.0-canary.f2ab0a95.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-Pi5ueidcuCuN3xA7CAVuTK0Cz634GOEFs/LOLA1bCrqZQTMRoQPe40UphS4gts/SexuxwSOUoO5Dp2sGqjneXg==","shasum":"c7f12253e0acabf101d90552f3caf523f6fd83aa","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.18.0-canary.f2ab0a95.0.tgz","fileCount":16,"unpackedSize":48468,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIa/5CRA9TVsSAnZWagAAdiMP/1TYcjYYuDshRB1/dinO\nmu6SNocfqlI7X+BudhWzE0Wh4pwskr3jK2LkYsozB/vRUOhol7vlKsaZF+el\ngamfYSeHhy3Bckufjs+iJ+0sZd/88T17feBMcunXftt+r3ZJMpB8Fn1YB77L\nw+rA1BUB59x7R8IuI87HCQGSzXtnd/IeyJLpyFs5TTsV27M9zeQucw3E7Ekg\neJ3UBJUjfUFfWivSrSzIdi75zoY0TkOG2AJXjjJjIbvwCXlMx97GmP5Uztpn\nMcAsuqN6uSc8cy5XyqlAJOY3EtruoqOdI3Kr3Y30uKQpvSVS/vsGYKFauUE9\nNY9lIVyXXz1vq0OdNP75n/HiUDTVJA7G4qSIrLVa3FS/KO2pRGHsFnNZtPIh\nXqdeBHgGGmvKfEzw/K9z0IxdG7Gelwc0cPAzP+qfqtyIi9R/8bQ0jhFIHzod\nY0LKUzOiU7cWGCvpZasx+Unb9fS3hFOpBXESnFH5pJfijpbztF61RE+iBcDv\n5pGLj6LaUeYDlgBdjKC8DZMN6VKuCW0r8YCDjq/YdtD6u5FcKngHNaiIKrFd\nwsIkrEmRK++Ho95JVqPTR3TOW8XNYCgkQcvHLSYAUvx5p3Xj1U1Nr0+7eHes\nheqrE64cYyE9qkM/Uhblr2XoExS4iu6chyULkq4sSuRnoZyKJNJ6ALGpyhhx\nOdmp\r\n=21DI\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFl6vhUUAuEyCOzA9GdlKIuni/A88T0Y+1Tvc/8dfkNMAiAHTqBRuQpAcRe6jWaYOIkERN088Op0DvuV/KT6KZbFOw=="}]},"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":"sayrisuarez@google.com","name":"ssuarez"},{"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-formfield_0.18.0-canary.f2ab0a95.0_1596043257078_0.17822625289539595"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.45f9eddc.0":{"name":"@material/mwc-formfield","version":"0.18.0-canary.45f9eddc.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=8.0.0-canary.f86f83f54.0","@material/mwc-base":"0.18.0-canary.45f9eddc.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/rtl":"=8.0.0-canary.f86f83f54.0","@material/theme":"=8.0.0-canary.f86f83f54.0","@material/typography":"=8.0.0-canary.f86f83f54.0"},"publishConfig":{"access":"public"},"gitHead":"1cb46e993882c87c3cced22481410b4922c1e1cc","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1cb46e993882c87c3cced22481410b4922c1e1cc/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1cb46e993882c87c3cced22481410b4922c1e1cc/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1cb46e993882c87c3cced22481410b4922c1e1cc/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1cb46e993882c87c3cced22481410b4922c1e1cc/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n*None*\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.18.0-canary.45f9eddc.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-YGnvbJxKbRxLejRx1BX2KiUa19pRqYVkpCIiL+RW4XJGPRQlOWgc+WBv7yCqmNSNICnNvSr4d3/bDIwKLrnTdw==","shasum":"a35078163dd93f93f048305882f0058c7a4f0d0f","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.18.0-canary.45f9eddc.0.tgz","fileCount":16,"unpackedSize":48468,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIhpGCRA9TVsSAnZWagAAUVEP/jWXkAFuZFBP+Z2F8fsR\nBQGHismY7tphw7+SVpHzPUgYqfUdn3/zd88VBvryia/m+Y+s729o0dQUPpvn\nshcjMcbiC215jIe2uWZExXJ++usJsyregLDCqG40b0xMijYDghZfSOUjsQhn\nVQqGycE2mHyqrEy/X089zvCi532ZygNWU7m2KOKtOb9tGd2OysXuRj0mvasx\nittaZj+qX6+D3YAanJp67AIsJZ2rJWjZKKsNF4UYzSd6CpIPiTDAVvK8wKqd\nxSuqZiCkM3N4Q+PI7ZjLnteLT8Nn8sMfcHlG0d2CEMoxW4STTThF96VU6pxj\nGmFcw3UCZIC6cEk5caK4Sj9tJYuXoZw9VI91z+gE93XHPTZ5XvSU3eM1o8oI\ng2pScFHHsFqNWBhDEQjvwWTXxW8w42vpTWjjmhLpIqpPNQNxz3Kss38VflTZ\n35kJfNqo2YJaygoYmnmAie7iGwmGeXELVTWOO2EpI0/t7TTJnDi+m3wnYPz7\n/SB53HEl4w+V9sUmRwJ/Adf3WLFI4GPUjR+G0tiGJkDDbObqg2C5ShL0eg93\nTHo0M2uxSwJgu47U2YbzFN+mD+L2D+4eJl+zKA5KVydkWSlESqQSVQ0aGEu8\nBcJM6n1emVa3BG4YV7k6mSmCB5fLPz9JZAmtJ8tRmptuLgjbpNa9Z4Vnfpyg\nDKSj\r\n=UtD3\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAWiY5MEgmduc6zBI6ch8+GmiddFMOxAaRPWPsI7Rf2qAiBA+V/6m8SgNpBghbEkyqE3jWyOaQKpJZuPU6Wz1m9Phg=="}]},"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":"sayrisuarez@google.com","name":"ssuarez"},{"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-formfield_0.18.0-canary.45f9eddc.0_1596070470552_0.2413670947230162"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.b64663ea.0":{"name":"@material/mwc-formfield","version":"0.18.0-canary.b64663ea.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=8.0.0-canary.f86f83f54.0","@material/mwc-base":"0.18.0-canary.b64663ea.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/rtl":"=8.0.0-canary.f86f83f54.0","@material/theme":"=8.0.0-canary.f86f83f54.0","@material/typography":"=8.0.0-canary.f86f83f54.0"},"publishConfig":{"access":"public"},"gitHead":"18456f1bd35a7bed64d6ca9d3d408d9d62d59c90","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/18456f1bd35a7bed64d6ca9d3d408d9d62d59c90/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/18456f1bd35a7bed64d6ca9d3d408d9d62d59c90/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/18456f1bd35a7bed64d6ca9d3d408d9d62d59c90/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/18456f1bd35a7bed64d6ca9d3d408d9d62d59c90/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n*None*\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.18.0-canary.b64663ea.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-6tytN3ik14jy/xmfx7pGzDS0f5cAbPLDtOSVvAQRMao9PYAab259qVvu11Z8cIJSm1IQIubnlRwbEsQrEHYWpw==","shasum":"ac8a8940d53a89e460f643f5f0fa91d0864552f2","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.18.0-canary.b64663ea.0.tgz","fileCount":16,"unpackedSize":48468,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIwaZCRA9TVsSAnZWagAA2YQQAJFvR4NHN7VPiXD559ni\nPWfBU/w66sfLoyzU5sQJrd1DrBQuIOubykPHX8VuUTvR/svlLECsIidi4dBe\njqVfdjI8rFaHRQJjU6xlho0iL4vYfUJErQg5OHe7PBrY6zdLPV0BhuVU7PnG\n1B1OiMotEs98Y9CPpg+IboSsQf67zXNddxVZy8cXbbznROAadi4tpGmy3rTZ\nI0WitoN+RF1qBaedjmJe/Qb3YA1g34CFVVRSd/xL6yqFg61xmJ31Ju78NF1Y\nQKjrI8fhVLnm6U36CxYLInyd/h5y4mId1figLzlHHga5P5uoSZZzCpBzRLGs\nuOzPjd0wd1TrepOSppyVyKCMTq8IEU0ATbxAh0BLCMLzcDYNa0xMYO7aHtzR\n9bGcAbH7a1aGC6TU7xiwNxf3JHN28qZclvzu2UUeHTN+RYZYPuNteNihxd23\nFe8ILj4y4Do7E/CHzPRgotQWLwUS3uiK9xN2kU4SgZjnlirA9axLfOvfk8Yo\nt0btAkAr8Hbs+Y5/IPTdn9mdQ5ej7F0D3VvdfKfo7ZT+5eXvjwlHsq0J/pp5\nzrr+JCs/6VcyaMkcZbeSAhZVz3SnbtbAxrkJmV43vf5snnIJTgR1Jii9mQZp\nqrS3ggWGNzcjYf80F7Fmi3/i3XHjWRXSZ2qQCT82gCUcg9kPG+Cs6QjUNe5W\nr1ad\r\n=jJ9N\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD/m5i3/TSFqsxXxqDImIh6InKJ9htfhEIFGi6dxUWRIAIhALjPQca9DUrnBK18SnXLtdY1m/GhuDc6mg7NopKJhW5b"}]},"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":"sayrisuarez@google.com","name":"ssuarez"},{"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-formfield_0.18.0-canary.b64663ea.0_1596130968927_0.8421918212078872"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.9a1a4d2d.0":{"name":"@material/mwc-formfield","version":"0.18.0-canary.9a1a4d2d.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=8.0.0-canary.f86f83f54.0","@material/mwc-base":"0.18.0-canary.9a1a4d2d.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/rtl":"=8.0.0-canary.f86f83f54.0","@material/theme":"=8.0.0-canary.f86f83f54.0","@material/typography":"=8.0.0-canary.f86f83f54.0"},"publishConfig":{"access":"public"},"gitHead":"f3382a4c5be4b9d21268b2d1b0831f8d8343d2c6","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f3382a4c5be4b9d21268b2d1b0831f8d8343d2c6/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f3382a4c5be4b9d21268b2d1b0831f8d8343d2c6/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f3382a4c5be4b9d21268b2d1b0831f8d8343d2c6/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f3382a4c5be4b9d21268b2d1b0831f8d8343d2c6/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n*None*\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.18.0-canary.9a1a4d2d.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-WxIjRff4MvoZ+KQeXXJpgOpZzbQaYouPfT1gd42/waGVmAXWkYjP/Tg8e7leFXdog9xKaiNnD9ucTshYPorBXw==","shasum":"71295b2b31aa19e90215b926f7da468edbfe53b0","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.18.0-canary.9a1a4d2d.0.tgz","fileCount":16,"unpackedSize":48468,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIzWzCRA9TVsSAnZWagAAVBEP/Art37kYiBCTnfVwHULa\n7o0nUOcSYcj0WpKNY2xsBEKed4AWRNLbvj9LX3fqP/H0js9Mv8iWBexZci/e\nbIC6q/UbG8g5aPa1HZ22dq2OkhjK0ETu84ZHNZtBb5+7Edo6I/rbjeU41mcw\nFc5NYoskiey8vGE7BZcddUrAf5mzNY0NrmEyXkpxHwuN4SCXymwmo7jtPz/U\nTS2evUOw48KTbFab5X+IMOgL7q0J2x3p++c8dD0mE5BIcD3kii0zVmcK9y4T\nvmWXA59EHqnidVCWfU9D2T8r+QLE8sXhM7b9WXsrIs6KnMk1nKKw8IuQbWWY\nsYzJ6v9bHHCMrYzrcGmV+M8tIIuby6R6VXidIDSWpnOxULZBWOaTW9LKMrog\ntS6eJNotTJy+If+/ggipD8wMa4dcfJqiUQZ/tIc1PEgS1/q458KzD9hWCtZI\nabKy+mjrqFLeuEyQtYWMs16gMyi6LTqlB8b/vVl7zQXv8v4uN9HB//iLzWcR\nlhTm4/h5jcw0+5GkEKW9pepS9mJPNJakrLrXwEShSd/B+yTsL4kMiCJQkxt3\npNYn7oDFg9H0+SY4ULgbZAyTmoAP6qQtW81InszgUk49fedBXwmdKqrj3+3E\nc6/News5rgcliwPCYo9R/uo9regpStjO63I8mc9GnVTAPs82BOlMAcHoiV7n\nBOj5\r\n=gCdO\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDU0Aj5Q7L+//1nCrhUUEBNAcfOEKE5kCsn9AEeBd5dnwIgDG19Uhw0ja4MaPaTtlMAqf5FI5gqyhI2MuWi81o0R9g="}]},"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":"sayrisuarez@google.com","name":"ssuarez"},{"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-formfield_0.18.0-canary.9a1a4d2d.0_1596143027293_0.6788192741070407"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.887c2848.0":{"name":"@material/mwc-formfield","version":"0.18.0-canary.887c2848.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=8.0.0-canary.74839da7b.0","@material/mwc-base":"0.18.0-canary.887c2848.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/rtl":"=8.0.0-canary.74839da7b.0","@material/theme":"=8.0.0-canary.74839da7b.0","@material/typography":"=8.0.0-canary.74839da7b.0"},"publishConfig":{"access":"public"},"gitHead":"2da757768e8d58aa4885027c78c58f8515382305","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2da757768e8d58aa4885027c78c58f8515382305/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2da757768e8d58aa4885027c78c58f8515382305/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2da757768e8d58aa4885027c78c58f8515382305/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2da757768e8d58aa4885027c78c58f8515382305/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n*None*\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.18.0-canary.887c2848.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-AYiEIzGJf+j730nfyPIi78XuIAN/0lvpgJ6KfRZ0nLNXkbQ4j/fQZ0QQTC6P3V9MuARYDOTROl3CUvdUlPRBFQ==","shasum":"f64e99826ea245256831c11b5e08f1076f793091","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.18.0-canary.887c2848.0.tgz","fileCount":16,"unpackedSize":48468,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfI0QaCRA9TVsSAnZWagAAbHkP/2qemKgjYw0D4DE9lR6y\n2kRePVXzYVlvpN3guBAPTZPOPBXFQUP8LeHCEWII3iFXf0NsiW/eukB5kLog\nWmMG9MJ+QmQrny+w+R2/AcFSA2vGTp/8y9V3Dw1kjDRKwhSflwi17UN4JQ6T\no9ya8plvsYBlzd09f85y9J2HFswYaRJ+aHjT1ETy6Pv28lxND4nkfHJkihRN\np2TP9F2bx4ZamjhygJRoJAB5mFYZIHQuOKCss+8ER64oQpFpKbGEi0Wwhuro\nARtioTTjb2/w0bQZBgsIQgB9md0+4LNwZhha8JJjo82Gtwhkgbm631k/HK1v\nN47hhLAA7iPIBEINU1jHfwGYk2hGrIDCpkR+aGGMCsM1U7b7hCqxdZ+r0rZ9\nUot8nk5GmIDtc4TURdjic/jYraCp5ksIhYZw25m50lfCyCKEujLyV+TJ8lbG\nGvHc+iGhoaxoQvaXdwWaOnyN4hFLMAzReHMOxM7TJWWkVp9EHdF3W6AO9JuK\nJAyTjHpqT61/Ugu/fzrRJnSvD3GzRpUty9IO575E+IEOWgxBIamYzUGpAXTt\nAXWcecm5RSF+PThFea/TZzgr1pwfXLudkhRWfuPOKtpiBF5zamZPsKKML6Uu\nCr+/H1IdmyX5jsdr2uWLg0ZpJqosJdTwLBnc7dwk1+gUJbHS82tpug99nLO8\nBPDm\r\n=sCay\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEoaNfrGZG/qcDtOWAOTB6/SzbMq4wE9oIBHqiMAKHhqAiEAi7l/kGyK9KnrEf2ZQ6wRX6Y6zS7OQZ+qGHP9WaWxvBs="}]},"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":"sayrisuarez@google.com","name":"ssuarez"},{"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-formfield_0.18.0-canary.887c2848.0_1596146714326_0.6569137070303517"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.354eb695.0":{"name":"@material/mwc-formfield","version":"0.18.0-canary.354eb695.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=8.0.0-canary.74839da7b.0","@material/mwc-base":"0.18.0-canary.354eb695.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/rtl":"=8.0.0-canary.74839da7b.0","@material/theme":"=8.0.0-canary.74839da7b.0","@material/typography":"=8.0.0-canary.74839da7b.0"},"publishConfig":{"access":"public"},"gitHead":"75cc944c1c31dc88606fa2007d002743354e601f","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/75cc944c1c31dc88606fa2007d002743354e601f/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/75cc944c1c31dc88606fa2007d002743354e601f/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/75cc944c1c31dc88606fa2007d002743354e601f/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/75cc944c1c31dc88606fa2007d002743354e601f/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n*None*\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.18.0-canary.354eb695.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-3M4oBNx9HZuAKKP5BTlIbRnXvdtSNlQPrw2UjYImW9LHqvRykHh5uMxMJGeKy8iIIbQazzSqyk6H3W6TyIP+5A==","shasum":"2318634c73851f425ea00cbb06ba2c9436a3bd19","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.18.0-canary.354eb695.0.tgz","fileCount":16,"unpackedSize":48468,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfI15pCRA9TVsSAnZWagAAYl8P/RZ+qwaMTOirSV8qFSqI\nRYe7+k88X+M98SYRMCAfvYrM6SsQ0jPgI0AlXZJa7ZBS8+C9NmHG1LOpKkHM\nm82GcKbTM/PFRBk0+akcwT464TEO0lBqM4HSik04vKCEghS+h6tpVzPsl3fk\njB7Jsrc2RCNlYFQ/uj78+CAX4EJB0/R/9aJnj+i7RThdi84WjwGYxTmt4+3u\ngwtPT+Ma5WHO8SIKrGWNc7xRm2qziRQF/GTljIYYMKNIVgjaq5ZD+JB0rLe7\nxuvgVeNMhHmkN+tkpsjn2pp8CX6tCsbJm9vsPb9fbqvKlNB1MBLAG9RV2Xqn\n19P2x5yyudAF/EeHvBHDvdgmdThiKLSf+i9Dozm2/nXvXubh8f2P9wKTF7Za\nzbLYfiJLzjHxwJTzr4guSWElQ7lBqANITjOAoSGMkHlVupKKYRSxzIajLI46\nFh1D1bg61htMabH6VWFeJKH5LlKESMkm+6m7+SMGru3wRNXcrtnw3WsRKaVp\ncP3K7F7ewWtvonLNvEyY/jJ29jmzpM+Vqev/yxKJyvb4Hu/J8fyCr7fj+qJC\nhBm9k079FEZZJ9wjWoyImLlFCBifKJlFHgkfSqcxxlcKcuQDMqBNsaffLU3i\nA4PMcZj6E9o5RmJLzkSmF2VBicWr39/NNg5MNA+7pd0INGpFhIii1QknMu/r\nDHt5\r\n=5FzL\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCQyfXG9tX/UT3DegHKC1emWo6xBfE5dTfXGZjAd4p0OgIgOjLDMnZtEoL5N50kN6tS5HzbtaXe+RIv9u8VXQUxMW0="}]},"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":"sayrisuarez@google.com","name":"ssuarez"},{"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-formfield_0.18.0-canary.354eb695.0_1596153448842_0.7185044656225323"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.7beb236c.0":{"name":"@material/mwc-formfield","version":"0.18.0-canary.7beb236c.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=8.0.0-canary.74839da7b.0","@material/mwc-base":"0.18.0-canary.7beb236c.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/rtl":"=8.0.0-canary.74839da7b.0","@material/theme":"=8.0.0-canary.74839da7b.0","@material/typography":"=8.0.0-canary.74839da7b.0"},"publishConfig":{"access":"public"},"gitHead":"9cb1508b49b8ccba6072341f23bae1ac67078621","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9cb1508b49b8ccba6072341f23bae1ac67078621/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9cb1508b49b8ccba6072341f23bae1ac67078621/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9cb1508b49b8ccba6072341f23bae1ac67078621/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9cb1508b49b8ccba6072341f23bae1ac67078621/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n*None*\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.18.0-canary.7beb236c.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-Q5jHqSWkzOu9T38r50JNr3baDh7vnVbUgn33wQXvJfePIdpAdrsMDytZJZMeiNKeV5y/ApQASyKEUoCeOPpaYA==","shasum":"061fc20695d1ebc6ec51174d6b8ffbaf74a17b3f","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.18.0-canary.7beb236c.0.tgz","fileCount":16,"unpackedSize":48468,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfJFd3CRA9TVsSAnZWagAAaVUP/2TgzH1gFGMD1Yhw1lrv\nqZ4Ie2cmqObzr0MFDIJdcuo6ecFFEBipWUfj4KOEk/77RPduSClI1K2NCqUg\nXltKHh3CxDOxgho3b5FjpUgu5NwbfOI56JiEboMxQs8YIXH/ugT6tbLDgsvA\nKqviA1qDiv1fbEcFPIUuEyd3P2GvYFi81Y2kouB52u9aIisBVNB05D4pxjJ0\n1hb2TkI8btlxhCsDY6swIRL601M0ZBd1ZbP4kR3+AINO2p30qfpwmLCrLGAl\n4J+OZcevDu/QHa1EmrSazvH+GyH5spt2qNmMPTSsIAxF6sdwXHbgiNdfrE67\ncua+MJ66BIJUBgmDbLegzw/K0oZDmbfV/Dw9MktJWKbBjc8npHW/UIiNO9ZW\nGywbM60XNJf+IjSaD7/LjG/LdDJJtg+2Bkxh7JkrLsmEfz1vPmNoD7T1SPMZ\n/DpvFA26EGzppmljkIE7pDbj8zfOlT6B7FS/mUf/p2ftqi8zkxYPi1fWJrap\naOz4Ikoj9cXS5ZZ2XV/8v+DzEltfr7vxzap34QrxYGnWfd19ds5BeUKsvp67\natiHztbp8lmnwGh83bMn/+jdgEcXgZ5ZQcD7T4O9UrL7Z+JbG/la4qjVme/a\nmsfCVlZUc++Hs7XON1+pyf7Ly1u4utrRuk5UaovbjXwefFoJ9MCoe/4Ab5t2\n46R9\r\n=kgJJ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC0RXIvtwjw1irZAK6kqkkATxJSSOWw74rH+F2UhBZjYQIgfNCRwHu2PZXdE27DPMrkupQ/g0kkA9ZhwunMP9DmjOE="}]},"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":"sayrisuarez@google.com","name":"ssuarez"},{"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-formfield_0.18.0-canary.7beb236c.0_1596217206965_0.967224916966851"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.c44acc0c.0":{"name":"@material/mwc-formfield","version":"0.18.0-canary.c44acc0c.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=8.0.0-canary.74839da7b.0","@material/mwc-base":"0.18.0-canary.c44acc0c.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/rtl":"=8.0.0-canary.74839da7b.0","@material/theme":"=8.0.0-canary.74839da7b.0","@material/typography":"=8.0.0-canary.74839da7b.0"},"publishConfig":{"access":"public"},"gitHead":"2491ff018c9a71195a5e873fa60b912085ec84d3","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2491ff018c9a71195a5e873fa60b912085ec84d3/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2491ff018c9a71195a5e873fa60b912085ec84d3/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2491ff018c9a71195a5e873fa60b912085ec84d3/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2491ff018c9a71195a5e873fa60b912085ec84d3/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n*None*\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.18.0-canary.c44acc0c.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-UvrlocbnfZPHQCTTjklkc5NBPBHDDV6HPw+/LwgjI6So8i6JVHFB7Ro4HL6epYAH8K0Sk0IdKA3+moaaavmBgw==","shasum":"0b95e4644885dc7dfa32252e3375841f49038da9","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.18.0-canary.c44acc0c.0.tgz","fileCount":16,"unpackedSize":48468,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfJIjRCRA9TVsSAnZWagAAXBYP/0pRoulMWGkSxyXnTFoe\n8Gjk2qCYlAQ7L44gFyNK+4IxkxLArzyfbKXih1njjVXhlXBQma0WJPc60eIg\nM7gMB4M4+fq/tddR/5VHtR1JaShhYishId5BpdfdTuC1qA3fHL8B+mgK2RwQ\nFn78gnvrNJ5C8KN684wdAG7fb4+pBRDWf7fllAbpwzh7JwE+izMff4xExdT0\noV4DMQ2EF/R/T2Lcy3cHOyMVJz3IDBkvAIYSv9mMXLWO9KYOvEhqOZmHH8n9\n04wCFKD5mMUabJMPZw3nIdeSJlKTLYsqZnPH5CizfzCd49gZ7CFuKHz9OS08\nHrxNCOuCcbWUmKzv3W6uvL/g/2WH1FETpTuxkavEzQ3TOyu2QHpSInvpotaA\nJNlsyFTg1PS7aX4LniYN0LLKUKzfTUCflPfa0V6+wk/CT2XJbKmrGR/04TZ3\nt0Z/J/cfKR/dGXpzYi6k3/NILaKemobbP76I+w3tfwgqqMPYWNHv9Q/+doyg\nX2Oobsogva2siTJ+CTr4sGOv/Ba7MHi+KsqllEku5f7jp5DV4zgpZZkqv/WC\nKkGLYNaKjc1tlJNDXYC4rFAtyMzXPsMqYZP4C8NgdchWHgZWBwoxpw2qRcN/\nlJ3EXKlb4hlLVXlfUgQbcuUJtosw8+LgAjc2p5hU02Bc2BuxKrYuHeEIinNy\n1qUv\r\n=UEnE\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEuKJtQOBlENV3GHh6PGAsqt5+g/f3+XfUh76bDYPEiEAiEAzcbs7XWlKblr+7BZaisZvvirceBGy30UbJ9OvosYtqk="}]},"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":"sayrisuarez@google.com","name":"ssuarez"},{"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-formfield_0.18.0-canary.c44acc0c.0_1596229840952_0.8449640631862005"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.779853ff.0":{"name":"@material/mwc-formfield","version":"0.18.0-canary.779853ff.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=8.0.0-canary.74839da7b.0","@material/mwc-base":"0.18.0-canary.779853ff.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/mwc-checkbox":"0.18.0-canary.779853ff.0","@material/mwc-radio":"0.18.0-canary.779853ff.0","@material/mwc-switch":"0.18.0-canary.779853ff.0","@material/rtl":"=8.0.0-canary.74839da7b.0","@material/theme":"=8.0.0-canary.74839da7b.0","@material/typography":"=8.0.0-canary.74839da7b.0"},"publishConfig":{"access":"public"},"gitHead":"e06c13898d0c9fdc7cd494c68586a55eddd2d483","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e06c13898d0c9fdc7cd494c68586a55eddd2d483/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e06c13898d0c9fdc7cd494c68586a55eddd2d483/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e06c13898d0c9fdc7cd494c68586a55eddd2d483/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e06c13898d0c9fdc7cd494c68586a55eddd2d483/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n*None*\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.18.0-canary.779853ff.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-mlfSn5JfuXe61fSwlHynsDGI4vTuxjTcVyei0Za4+smlZ3Lr60JWAVvma/4tdypwUKeOml5WLD0yyOXn2YFL0A==","shasum":"95a2fac1d57f7b53dd4b882b83c0f33f72b09cd1","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.18.0-canary.779853ff.0.tgz","fileCount":16,"unpackedSize":48637,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKEfqCRA9TVsSAnZWagAA800P/1FEV3YIlFijjf8z/vJ0\nqEyh/u8eFVO0kN/9Z+9MrY9mwXfVfHIXwvC1AbiEL3PePpyCSkaCGokxCnKT\nt4wcmjBUjrbE2dffZMxY6ROtCoa9kuxD0cPMcpbAaa3V2FNLn1EomHAoXL88\n58DO1pElHjtl0gY9HQP8OAgtdGLrf+BB1F0Rq/1bCnOfS5bHAR7UUswcML9J\nSFek1cwJLJL1yYnvbGdNEIya3Pihj0ZdweTtphj9Ffnf+eZCjX77kgsPbLTG\n7dNphV1wXMPoWovXBbTUxIGbr+dDbOqkM44SHJcQcmNhedO/91b2Jgf+D5Ll\n61mk9BeVRhKzioNIGsV55fq/0X2amzVBe6v86kUJ6yIT1hTuTlSw7TjnAyFO\nxoi9LAl5m9VH2wVx352TMk01gg2AKBNGficzY+5h+774BKHd1rm+bf5IRcZJ\nrdntupHuMS5h9v6D1Y2ypjCAb0l9lYvWLBrDVz+A4T+EsLkcyckUN5CU2tph\nUfHeTz72y0q5tciuQxH6fYUd5AS6ykvewbwcB9cpRVI80zExF+soHjI92Qfj\nfeGe4rD7Tuj9iBhyGzBb+YQJwFsxueAtdrB0VaZz07zcqCh+AgXmWxcC4hrH\nNW8Mqk0vBwbthShwbTPV61kUYrRW98mADVfTwmL8FMV6TB+4eLfGm9cDxASe\n68be\r\n=7X/m\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIALLwJYJJze2OJOnY1mc1Ve/Q7zD2c0nq/CvEltjBYQhAiBLLncgkkuBZAk/tGnLv+73K4aaEKfZSJzCrNNwSQ2Wag=="}]},"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":"sayrisuarez@google.com","name":"ssuarez"},{"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-formfield_0.18.0-canary.779853ff.0_1596475370306_0.5183994948358526"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.8aaf270b.0":{"name":"@material/mwc-formfield","version":"0.18.0-canary.8aaf270b.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=8.0.0-canary.74839da7b.0","@material/mwc-base":"0.18.0-canary.8aaf270b.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/mwc-checkbox":"0.18.0-canary.8aaf270b.0","@material/mwc-radio":"0.18.0-canary.8aaf270b.0","@material/mwc-switch":"0.18.0-canary.8aaf270b.0","@material/rtl":"=8.0.0-canary.74839da7b.0","@material/theme":"=8.0.0-canary.74839da7b.0","@material/typography":"=8.0.0-canary.74839da7b.0"},"publishConfig":{"access":"public"},"gitHead":"e119651cfd9ab60def67a36255b4ea0ca1022d37","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e119651cfd9ab60def67a36255b4ea0ca1022d37/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e119651cfd9ab60def67a36255b4ea0ca1022d37/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e119651cfd9ab60def67a36255b4ea0ca1022d37/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e119651cfd9ab60def67a36255b4ea0ca1022d37/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n*None*\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.18.0-canary.8aaf270b.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-/wSB5fD0YOdwVYNerI55wlPdrN4flBPA7wr/GPJ4RHo8CbZlw0W/fNh/iRCF30JayFPypN16CDWES1JxmISjrQ==","shasum":"a01d54c43197b78851bc30f5c3dca55ca3d42898","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.18.0-canary.8aaf270b.0.tgz","fileCount":16,"unpackedSize":48637,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKFoSCRA9TVsSAnZWagAA2YMP/2fJyGkk/GTCLHxM4jki\n3/zaxVuTHKSD4y3iAovk6GRVjE8EpOk7L5ig8rYycupldkGXILQuAVRBlr5r\nMq8EAD19VddVnMVwFapMxsutYzTq7Q3cKvaHkLS+otlciPQvIdXdFdcW4pc+\nW9Emmdwy97/hzImLlZTab7uTI/51KIP6X7X1fZHgmKAvD6xFCDGSVHoe7JXc\nk5DvmFhMvdcwYi1QRlWUcXSZv4lWjIu1tyzR6Y2Rab9tkyx2/zuWvldTZn7g\nPL92z/TzkCAOdR5EJYTu5jiTTKITHIAjcb8SE+67EcUaVToOxytAKR24V0QT\niBuQSWG/sBI9P/UrB25B2kW73NZCbZtoZcG+LIJKixg54xqutsj7p//ahwwy\nk6Z7wIIpGPXKYGnMiRvQrmEXlqaVvVcYUerYJDlmN0phMrDABlkp3p5au6AS\ny1RzD3TG66h6iVSgrHuE+vxpmsGHtx2X/5T+dnZA8joZsguOUjaaMHfF89Yi\nXZuVRp8u+yYHqvZFh5JKhG+6GByHBPaKwAJ08joEiGYyeAb0Y1gaX7yGCMR8\n/XcGO8F4ItevqU9e2vcH/c/lOsPb4IM54nT8KuYiqqDDV2WlheQgVd5E6trw\nI3HK4es8scvjA3w2eivjoT5pKf6pvmxYAOatqVUfCqG3C2sQIJrw4YIm3Nye\nBX2e\r\n=ktIp\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDhrivRej8XjeWMiBmCfQsWx26T2MramT/fgPc9hEUGxwIhAO/pLG2z6WOxaue+U6LHqsJgry/CVBZbG/dkB7RSY24r"}]},"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":"sayrisuarez@google.com","name":"ssuarez"},{"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-formfield_0.18.0-canary.8aaf270b.0_1596480018570_0.6967710235496036"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.5cde9f12.0":{"name":"@material/mwc-formfield","version":"0.18.0-canary.5cde9f12.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=8.0.0-canary.5903d39af.0","@material/mwc-base":"0.18.0-canary.5cde9f12.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/mwc-checkbox":"0.18.0-canary.5cde9f12.0","@material/mwc-radio":"0.18.0-canary.5cde9f12.0","@material/mwc-switch":"0.18.0-canary.5cde9f12.0","@material/rtl":"=8.0.0-canary.5903d39af.0","@material/theme":"=8.0.0-canary.5903d39af.0","@material/typography":"=8.0.0-canary.5903d39af.0"},"publishConfig":{"access":"public"},"gitHead":"12da43d72184f78a2245a6686a1ebff3e7bb03e7","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/12da43d72184f78a2245a6686a1ebff3e7bb03e7/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/12da43d72184f78a2245a6686a1ebff3e7bb03e7/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/12da43d72184f78a2245a6686a1ebff3e7bb03e7/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/12da43d72184f78a2245a6686a1ebff3e7bb03e7/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n*None*\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.18.0-canary.5cde9f12.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-MkryltgrpVSRsowuLdoI1AoS6h1C8vJiL81xyRZcjZaYo4gPtrw9pp+Eq6H9quMgrFjdCctyysbJTJfuKaV9ag==","shasum":"7ae9519cb66b54cd9f7545f80731a267857d5d87","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.18.0-canary.5cde9f12.0.tgz","fileCount":16,"unpackedSize":48637,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKF7XCRA9TVsSAnZWagAASdsP/RCuuGRsMFr/ghRqEj5Z\nj2kC0jah/V/2xsv8iB8l95MjGRtVvmsVWYgNgg9IgnaOrz8IMKVnthYwrMFk\noTCSpoeu8Mwm5Fal8VYBgLOUWPbqjBAw065l59YlUW1zMC/gu57I1P0+bxq+\nOztq8sW8tkBuV4JuGjqwXlmIprIhBP/epZH7UVbB29UsMgxASZI4xNL3a/Yb\n857dU8BZbwG6/q/20HF99YQ2hiBb4iSZ7u7FCpSVht3pbXB/zffgqKdybH4y\nFNRH3Oc1/vDWCxNtak1IHja2hQ1daN70RFUdAHzN9MCRhjEx/l7RzCK/U7DH\nJYg42j8Uue05vjex4XQbvzb2HI/MyEwGjzsmctzZ1n4oRCM5BRl3g1WYm+xI\nHo6XfZY4zPK6NADW8xOu7Z+7IPez7BC08GLZs1yR89sPj4rbYMXfcQRlP52y\nxqRQDc2PZi3uet6B2XJZteDjiJ7OysTwDLtdnl/p+cnE8L60FYvS3PfI+9Bo\nrXOi9R4lwejIZQSwREcT+V4iiDqrSl8VMWMmvXC8lD9ECC9c/Ajw+BLB2JD9\nEC/k0evwF7p3NuDOpfg92xr+G/UgFg44vmUqjcedDm1QsfYUUGtEwqJxsXkh\nWPd9tnG/Z/n6XLW+4pWGu+9yQp42aE+WIBQpr6K0U/O2ogD00N9LQ9DUMUBr\nkwg9\r\n=Re1Z\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDn7JGfB8xDe+UmQnZyF+ohZhX0KjKVUsCUyM6W/cHCJQIhAPZvAD4Jcv5t127V2VDB4L2geILBP7FnHTngzR2KgTTP"}]},"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":"sayrisuarez@google.com","name":"ssuarez"},{"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-formfield_0.18.0-canary.5cde9f12.0_1596481238829_0.18341900438606107"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.1607ec53.0":{"name":"@material/mwc-formfield","version":"0.18.0-canary.1607ec53.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=8.0.0-canary.096a7a066.0","@material/mwc-base":"0.18.0-canary.1607ec53.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/mwc-checkbox":"0.18.0-canary.1607ec53.0","@material/mwc-radio":"0.18.0-canary.1607ec53.0","@material/mwc-switch":"0.18.0-canary.1607ec53.0","@material/rtl":"=8.0.0-canary.096a7a066.0","@material/theme":"=8.0.0-canary.096a7a066.0","@material/typography":"=8.0.0-canary.096a7a066.0"},"publishConfig":{"access":"public"},"gitHead":"0ed0cf9b8288929f621c044aaed573575e7f23ae","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0ed0cf9b8288929f621c044aaed573575e7f23ae/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0ed0cf9b8288929f621c044aaed573575e7f23ae/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0ed0cf9b8288929f621c044aaed573575e7f23ae/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0ed0cf9b8288929f621c044aaed573575e7f23ae/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n*None*\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.18.0-canary.1607ec53.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-O3RWQtcwvGB/0kIm7bMU+MbXxlIU29upmvl19/hdemslDmOkckfp0BOAWUpRqT//vh5nAjRzLm8lWvJqUpqzPQ==","shasum":"9b839d433e3aec67cb2e786e74958e1449079934","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.18.0-canary.1607ec53.0.tgz","fileCount":16,"unpackedSize":48637,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKGmJCRA9TVsSAnZWagAA48UP+wWcabRENuIQv9R2AKGS\nCUv2CeMZomQ5LN5cFvC92YZn2PCEQ3sYY+8/jznEn9aNHQcjz5VAKG+V7wKz\n54kYXqWoXSx1JNmE7MbhKroSr5KsRHnloB/aFxVUyY5HaYRtB6lxns29Sa7w\n/XZWn7nlkY3CkbOrqqgj0TMmUmThYxUAq9hc4AP+JOTenAYcmIienxaBnFDO\nbqSPy6L9ScRRlleH7XpQVj+WDwAgacjBrMS/GPwFsfwdIQowcZvUPgZbyM/S\nyT7eyPSWEJ3wQJr0yLbK4IWNczz61RX9NK4T5SLQyJFGOrQ7fkq9Fu6Hag0P\n5TJvJnZGetieainJvCXrICnEs9mkxGRrmGW+1vEwqTq0rCWVzG/I1wPnWHFw\nokruxWNs5kGqmruHUdALTO4dDfrQh80EyRFxFZhmEz8fuQkMWlbKhG4TFV+c\nE6d+SQwdI1TRiZLlWOXZM3CHPP8EkIryc6twYDFupjQkK9Y8XllldMm9CdwW\n+Pdkn49C8A3sNoZiFzKQjiup+m8WGvnZ4cLvZ5Ja1kXzE0r7o1uVh3/7GYCT\nkakEovkz3i3X3+63bWAOhPJ3W4IB8HIxDGQ2nkSMl3XqCuGmMVdaU+GNIhy1\n/B11y0dYw9KEItJMjkrKWHFaD1hYzGZRqC6Ki5iJfwxA+cSZ2paT7lYnrL7l\n7YL9\r\n=2PT6\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICaRoPeG5LC/229sIipd5nzPPn3MYckS3JaKyIQ2jWuFAiAJnEnfJoZq8+O2XCpn0TP5R5P8yTrPk27MpNro8J0J7A=="}]},"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":"sayrisuarez@google.com","name":"ssuarez"},{"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-formfield_0.18.0-canary.1607ec53.0_1596483976821_0.8607769318896543"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.678b30e3.0":{"name":"@material/mwc-formfield","version":"0.18.0-canary.678b30e3.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=8.0.0-canary.096a7a066.0","@material/mwc-base":"0.18.0-canary.678b30e3.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/mwc-checkbox":"0.18.0-canary.678b30e3.0","@material/mwc-radio":"0.18.0-canary.678b30e3.0","@material/mwc-switch":"0.18.0-canary.678b30e3.0","@material/rtl":"=8.0.0-canary.096a7a066.0","@material/theme":"=8.0.0-canary.096a7a066.0","@material/typography":"=8.0.0-canary.096a7a066.0"},"publishConfig":{"access":"public"},"gitHead":"53d3656f4039bb116e0f771ca0dffc41b500bb59","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/53d3656f4039bb116e0f771ca0dffc41b500bb59/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/53d3656f4039bb116e0f771ca0dffc41b500bb59/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/53d3656f4039bb116e0f771ca0dffc41b500bb59/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/53d3656f4039bb116e0f771ca0dffc41b500bb59/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n*None*\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.18.0-canary.678b30e3.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-AEoDBmJ21NpHn8Pg0QBvDX3RCf//YjJJL1M6h3oTaIpX0ifadIq1Wy/NxVFzwQ1L0XrWnve57G78YgZBsXxXkw==","shasum":"314953b116041d7a22b46a1a45bbbf1994629877","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.18.0-canary.678b30e3.0.tgz","fileCount":16,"unpackedSize":48637,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKGpxCRA9TVsSAnZWagAABF0P/3FYXSFLf6gx/86F6oT/\nB5VNDptfLtaR1js9+yaYHkH33OKwJ4qFdhaHg27hh7OCkmGY6Z2QEq1I4lht\npoeS+BIFi8fuRtbM2Q64H50jteDhkSssLWeia8lSvOUch2A8+aTBFWSeiQiN\nlLBUAqfX6v4q40A3ADnksQexrkl3+HAIqYLn2N/3IJjwdPHfcW+nsNG9Njos\ndn2AhOM/5MMey0CDnhfv2+JD1y5TnjBQj5Sxcxvtz9UIxkzNkZ7mid5kcAjC\ng7YKxGv0LgKeAytn84lja6jCmkcFSBlU8RhC5Yw8WYyf6VxhkMZzk9w9Tfwm\nM1D0l2AWknWr/Wab80ZnWCsFq7ud5+wm6QrH2oLVvKtTY2oc2hS0M7vfp4gj\nk2mwNbwmHy9x9nMyaVCpERpeMA/u9NjBpEWWqO9weCBofF4QwPRIqkjOnVoW\nugPZEo5BVlydQib5JKoyamHC9FK22FtWotQHLXfg3QSOPb2ENck1/2zhkJ66\nybuSjFxgY0LnSu3lRTzmBJmHrG0dY+tbJEGPa5asoD12cSB95cCSQphCNCP4\nQs7FqxUdPWx/qug5X9wzHf0G0XFGrNJXw3+CPNY8UHXkuDPWIhi+jqemhvQx\nNGUpZ4194I8Pgr8gksAuunc3/J00CzDRmgSBIgPMqQY4wHdvLZKD4IEHtjNf\n/6bZ\r\n=hcAH\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCv+BiG6mnWVrAxEHxS5sroevQWV5An1/9XQ5ukDq2V1gIgZwHfjgtLrXZZlHXlOgtCdR8ssD2S70UpoF72ztWBR0g="}]},"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":"sayrisuarez@google.com","name":"ssuarez"},{"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-formfield_0.18.0-canary.678b30e3.0_1596484208992_0.050825378637998186"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.21c55569.0":{"name":"@material/mwc-formfield","version":"0.18.0-canary.21c55569.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=8.0.0-canary.096a7a066.0","@material/mwc-base":"0.18.0-canary.21c55569.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/mwc-checkbox":"0.18.0-canary.21c55569.0","@material/mwc-radio":"0.18.0-canary.21c55569.0","@material/mwc-switch":"0.18.0-canary.21c55569.0","@material/rtl":"=8.0.0-canary.096a7a066.0","@material/theme":"=8.0.0-canary.096a7a066.0","@material/typography":"=8.0.0-canary.096a7a066.0"},"publishConfig":{"access":"public"},"gitHead":"65f46b7dbda996fd5cc43abfdb42943515aaca08","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/65f46b7dbda996fd5cc43abfdb42943515aaca08/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/65f46b7dbda996fd5cc43abfdb42943515aaca08/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/65f46b7dbda996fd5cc43abfdb42943515aaca08/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/65f46b7dbda996fd5cc43abfdb42943515aaca08/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n*None*\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.18.0-canary.21c55569.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-KDz4DnO2aHgHRQcPzvuJ41Fsf6yMVMaPB3sqQOG/PLHvao79jbDidVvDow518/I1s+vZzLFKXrNpnoLZdggxhA==","shasum":"48c9fa27ec7980266d9c28e193ac74eadf69ab1d","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.18.0-canary.21c55569.0.tgz","fileCount":16,"unpackedSize":48637,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKGvdCRA9TVsSAnZWagAA8mMQAJGGi8mIFq1+pbMr1oH4\nFaxKT0NaDmIMtTWuyQXqSF7p5Qi12nTUSnt+hA8SJyse0zLo8h/pjZPCqy81\nrsDQL2YDJoIiRb56q5YekIS+5J/n4nsnTfRTVB8MhPw7SLVVolmPr8iGHgOJ\nNUliIghXU8wxT5v8oCDMFFezTNdnH7ilspr2vJkff7zXxexmvfkKfctYqFRM\nhvBaJtBnwEvSlL2Ig1aF6uSX9mexOEribrf2OW7OFMxgg8AObhQdzNyeUy6d\npOMZSDpyKs/iJ7PwbgQcjVdP2Xfz/oyI+FzbgP8v79PqBMaJCV9Hh59/x3bB\nhPbyQytNuX0wyryZi8QDmsLkYmWOWllCeJubzo1kFXX6MCvoXBAcKtmAsdYm\nrHJ+vWNoYNBq/EGht6ULeoBS3HIcjAr/BCrRrmT0naI+Pk88Agsgpd3A53oH\nth3BpVoVzRL/gk/ANtoswLbC1KBx82pHSC7gj+XMLxOjq0FESbV/Otly393L\nfzO4ByJux17DvhFtnvefgI/vSYXrvrNGP99ZrCOJi21Lw19HBeBodsNjwR6w\n0K+SXxQAVCu2NweJ3k1fE2rseQny7xxRPzautSNhVgRSOlLYW3xlXOkAPzvb\nrK4ePE6gJgxApQHCn+LhzKlWR60lAKmhI/5EffmAeq4Bn+pbDXFQoKfHuuGK\nloKe\r\n=kQuL\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDKzIdYFysVZ1j6PgmnEnppwLqqQd0Uqicq2OIxv+Zq1wIhANBtzA5mlXrTKugS76Bz248gZ2w/6cRpZPdNtWWtZKIR"}]},"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":"sayrisuarez@google.com","name":"ssuarez"},{"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-formfield_0.18.0-canary.21c55569.0_1596484573548_0.5665246610581891"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.907d4d7d.0":{"name":"@material/mwc-formfield","version":"0.19.0-canary.907d4d7d.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=8.0.0-canary.096a7a066.0","@material/mwc-base":"0.19.0-canary.907d4d7d.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/mwc-checkbox":"0.19.0-canary.907d4d7d.0","@material/mwc-radio":"0.19.0-canary.907d4d7d.0","@material/mwc-switch":"0.19.0-canary.907d4d7d.0","@material/rtl":"=8.0.0-canary.096a7a066.0","@material/theme":"=8.0.0-canary.096a7a066.0","@material/typography":"=8.0.0-canary.096a7a066.0"},"publishConfig":{"access":"public"},"gitHead":"c9bc2fce8a40ef8eff9b7444030f3e2a62cc1d8f","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c9bc2fce8a40ef8eff9b7444030f3e2a62cc1d8f/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c9bc2fce8a40ef8eff9b7444030f3e2a62cc1d8f/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c9bc2fce8a40ef8eff9b7444030f3e2a62cc1d8f/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c9bc2fce8a40ef8eff9b7444030f3e2a62cc1d8f/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n*None*\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.19.0-canary.907d4d7d.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-Y8FnFzwmrlcc6/P77y/E/5QNunc3TjHm3RB8Oh6DfEssc5THfI8Fb1H9UpVtPqJxgJo8BwgaBj7ljpSFZP4/tQ==","shasum":"ad722e86f4baace4499b56c95fd88b5d89e0936e","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.19.0-canary.907d4d7d.0.tgz","fileCount":16,"unpackedSize":48637,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKH/zCRA9TVsSAnZWagAAwz8QAIgutZ9kH/HwrjqQOdtp\nCvwUQzqmvMgxsBySXDidpjFbyevyavzgiN/7fPRoE0SDpi4ZCnnbGL4gH4Q9\nWhNQ04zSTBDjLcZ8hvV8+hRRpqLs9ET6RXNzsfnwUrjEWKC14dacv3x882+I\nYmOS7Z8G0sBHWBF6oSD9/GerR3Wf3rUOpvIORC6Gnj8qGjyS44NzSr1DkoVI\noGJTxc7tatSZPvLxgAYC4z2p1ePhkB5gEqkjkCpO4P212ylCNiW5mMj+9X1x\nOpfqvJ/KSpvcFnYbHBhVPkvN6xEs395UOr8F/xU7TgcMOubGlt3fP5YqDK6u\nXONsczDhYMvklr3flWrF0rilYeBFQOZ8GGM9/IjruNZvZbodGVPov9tN2hsy\nLisco+Gd0L4yTUgVVxGaASBHBKaQhRkuwkb7EA8vYqPSJ/wB8tcWYS5MxNwz\n2LOpUlE7gJydkB42OvMHRTbJhpyaSnkxbVvLMUhAFvdzmgvWKUaYmprVNSbr\noJAvSN5k9noKqlxksLdp8HgnR4iVGpEG+QyyChdP6+nCzjDGK9tt4+TiYiEq\nerHVn+DnXHzbT0RmXYateTjfOIE3jcP349GvRxtvfLQaVTDsynJXf9GnIIQo\nf1F2vjxtQAIDA50nqM9HXbjujdSYkCpqmSUdUYLZUe/o1Vt3gqwZuadw/yLJ\nzayB\r\n=O0RP\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCnIPhb2FpsfX2JMYQxzlesAe4mcgRTgzoVeTLnOzL2AwIhAP8kAhtMfZm8Fp3JcPmBGDhb6sxML9JdGeE5AgheoUcY"}]},"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":"sayrisuarez@google.com","name":"ssuarez"},{"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-formfield_0.19.0-canary.907d4d7d.0_1596489714704_0.022161949510370205"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0":{"name":"@material/mwc-formfield","version":"0.18.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=8.0.0-canary.096a7a066.0","@material/mwc-base":"^0.18.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/mwc-checkbox":"^0.18.0","@material/mwc-radio":"^0.18.0","@material/mwc-switch":"^0.18.0","@material/rtl":"=8.0.0-canary.096a7a066.0","@material/theme":"=8.0.0-canary.096a7a066.0","@material/typography":"=8.0.0-canary.096a7a066.0"},"publishConfig":{"access":"public"},"gitHead":"907d4d7d7235b3a3256595bce22f0d7db165adab","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.18.0","_nodeVersion":"13.8.0","_npmVersion":"lerna/3.20.2/node@v13.8.0+x64 (darwin)","dist":{"integrity":"sha512-pyI3h9LF/Sytdf7NSl8fUQsbaxLSFq4/o1t41y9IBHy8tqUmaQRrFC3M0Ij8Btpf5pHtTgulFLLnOa9cWrsGNA==","shasum":"9c4f559f07ad72ab67106cc396eec44a33f8819b","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.18.0.tgz","fileCount":16,"unpackedSize":48551,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKIB9CRA9TVsSAnZWagAAmN8QAJf7MrPhawm+IMrKYi9x\nYM1xew7ChQRvjORO/6k518MivQl9tH996oeobiRKR3HFw9sKaoQ5TKBAjvwT\nar7B9LzbqudVY/m9ZVaT+AXk10VT7BsbObypYmWWPm7SGvgw+b4dpPmMrkCE\nRpHMWXSVcTgWYbO0uvFPp99UK5FRAvDXsGL+eEub3sCJW8z8c1rxr8MVBJjB\nOVrYFdxiGaqqlP2VElr5TjEynKh0OfZRyrw51O7P+Dpk2ZPmjZzZFhsfwOgI\nyLA9vzH6nwnKI3fXi6PqR27P0iNcHsSyNdHGtoopdgFNgycx9CdeLIAfO68N\nYE9ik+YDEPUYwBHe22p7HtBF0HBruU04y/kExR9D+EkUxMaR1epMPS2C6ZY3\n7PbX+UfnozYFmEN/9NtB8v40oE9Ud1HfLr9lVLjvU4C/x5h/2D1ll/Is4rAY\nOTHQ72Jf0YRVQC1clDBjQRUb8tgfBWETQ2iljV67CvFthN+MJAc/BgHQ8E+G\nJVW4ghCbnpXdeaAHtHHvo/xYrS5fTFC2VvgF21k8T0Uer2OC1DjGZ14KeSVB\noRS9gPHBwNT0RSt1Jv5KPszys+itJVhhT4mT4SFmRTvGlRtbJduh1IkuuG4Y\nnq+s7W4jh9krSsdEpQhylkQCauMcOfqidTFlgHRQh9AjmPHiUCH5euKFJHfr\n2Q3i\r\n=KkaS\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIB81ETsm4HsVjv3FDhDHRvEHhm7G+q12mr7h26TJiz/NAiBWisIurYVM48QGCR8+AgIzJH52XqnX04hZkGc7wopUVw=="}]},"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":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"emarquez","email":"emarquez@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-formfield_0.18.0_1596489852977_0.6956149586976341"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.f7958e4a.0":{"name":"@material/mwc-formfield","version":"0.19.0-canary.f7958e4a.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=8.0.0-canary.096a7a066.0","@material/mwc-base":"0.19.0-canary.f7958e4a.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/mwc-checkbox":"0.19.0-canary.f7958e4a.0","@material/mwc-radio":"0.19.0-canary.f7958e4a.0","@material/mwc-switch":"0.19.0-canary.f7958e4a.0","@material/rtl":"=8.0.0-canary.096a7a066.0","@material/theme":"=8.0.0-canary.096a7a066.0","@material/typography":"=8.0.0-canary.096a7a066.0"},"publishConfig":{"access":"public"},"gitHead":"814d7f99f2c2016c7d56a7297cec2ee04c29bbcc","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/814d7f99f2c2016c7d56a7297cec2ee04c29bbcc/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/814d7f99f2c2016c7d56a7297cec2ee04c29bbcc/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/814d7f99f2c2016c7d56a7297cec2ee04c29bbcc/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/814d7f99f2c2016c7d56a7297cec2ee04c29bbcc/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n*None*\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.19.0-canary.f7958e4a.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-pYQq/nQZgfyEd0hn4lwQ3DAfb3xktw6b/8PSkl5MhwMJtqAlErHjWBtrlNQwVo6/OLu7ZhgBhi8lCYZgkZI+VA==","shasum":"3d5fe96a155cdd8de09e9afed9bc3a6ac8f9ef02","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.19.0-canary.f7958e4a.0.tgz","fileCount":16,"unpackedSize":48637,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKMKeCRA9TVsSAnZWagAA1MwP/j5Q3/YAI9GYTX4fl132\nIcLW6QUc+4UHmPGvDaVLYzpGMRVvllXbficssQgIU0BogKkXJyz9PLO8xzbm\n3Bu96cIfOGRCwtN1QDvG0Qyo+jCziv/7aBZgT68bipve9mP0p7/NzeX4fMU/\npzhkzAGfBkCvamdsHO7G3t3U9lAidTYjYoWYekMu52v7PYIxFHnY9g1XcwZ8\nUFrQa/H2bHpw/upmNRf8KGmjuU1N7B3HqH9iJp82FuolueufaM9u0WcG4B1p\nwWWo19K+6Tw//HG4SIPjUFVgBYmC3Xpkbu1KnQl/6bSa0SOokDgN71ajXvNP\nmJK7zBnSCu80hb5IaftKbIwDGUEQWFG1U56VQzwZje/kZiaE5ljENYNZcl5B\nm5yF1j112/i3cKcSPrN5RpSMk6wEBZSmDF8ECY9aMDY+dVG18jTSu4Xt0qLu\nTIybosqI7Kna7V3URwRl/zYFa1wpXN4ZXOcfyCwjuOWxN+I1daxg+cbVB/xv\nDBL18104uhHg2RiFnhurM6gtiOkqsNrS2LBoOgTha47S3N6i0dBbYECeXLH2\niGWUxXXJL9/5HQdeUqweFSVMW3arrgaPbHpmexPxekDl3qumEjC+VygXEbHq\nEve8l56O/wj+xazDGAGYqFSFd5uP3IT2qHslcKx2jZt94XLJYPpcu2VHUioV\n15YD\r\n=pfKD\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD8rKOJEn7kanXVxEA9Utjziw+I29i5D07t5hqiblSzswIgAt+dQk26Z2qW6Pn51RKQvirwSHzil40iXUlHQ3qI/RM="}]},"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":"sayrisuarez@google.com","name":"ssuarez"},{"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-formfield_0.19.0-canary.f7958e4a.0_1596506781786_0.24237598540566907"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.f8ceaf79.0":{"name":"@material/mwc-formfield","version":"0.19.0-canary.f8ceaf79.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=8.0.0-canary.1b44b43c8.0","@material/mwc-base":"0.19.0-canary.f8ceaf79.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/mwc-checkbox":"0.19.0-canary.f8ceaf79.0","@material/mwc-radio":"0.19.0-canary.f8ceaf79.0","@material/mwc-switch":"0.19.0-canary.f8ceaf79.0","@material/rtl":"=8.0.0-canary.1b44b43c8.0","@material/theme":"=8.0.0-canary.1b44b43c8.0","@material/typography":"=8.0.0-canary.1b44b43c8.0"},"publishConfig":{"access":"public"},"gitHead":"a1435334692098639ad087e00c61c1190812b959","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a1435334692098639ad087e00c61c1190812b959/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a1435334692098639ad087e00c61c1190812b959/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a1435334692098639ad087e00c61c1190812b959/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a1435334692098639ad087e00c61c1190812b959/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n*None*\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.19.0-canary.f8ceaf79.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-VLT+HE5KfZFRLiP9ChN2IwvvniNoDffVJZgK6MwHxgz0EzBpLVyZN6zPS9YG3rlt4HN/k0chMzfQ89ECpN4uTA==","shasum":"f119d32c95611aa07101681f465f4c6c90a86b32","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.19.0-canary.f8ceaf79.0.tgz","fileCount":16,"unpackedSize":48637,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKbRSCRA9TVsSAnZWagAA970QAKPaLXr0gadpaoXS48RW\nEZT74a/aqVRpiawO5dphl4B96MprUhQfxuwx6LRyWGFTTjXnN7VojzkSJuT6\nxEiys1/Asi6LnleUGA7OQnKJv9fVzUAZiGiJYOmEA/KsE9OcRegD5rFxPn4m\nmIpYOwhgCH7p2/bLAq6SRToRUZ7zKSBB+nzD1M74n8Syk6dvt3/cVypPKuKL\nwPndcUNzMJuIupT1kFtum+mKdHQ6Ec4XaxRZ74DUpqtR/CuO//ZBHi1eGIhN\n3pCQNXQh906bMurGSM4cvsNK8V3+Fx2S0+CDqYYDVr4UDOKEA7LhynS0iNXQ\nGk/sHZjfEhv5YeWxXjgqGKI0y+qZjBWWcYtrjH29bhCnaM5nBM8LQRgz4B7W\nVJzZEcnnEGY+WcMHhKeumE4mO8jXB9Nuzt4y5Vvr9lSKaZTAOKHerwrUAVcl\n1PKJe9q+AZ3Ay0hzF1D/A9DbGluAZmRHNsEx/u7YvBbN/u/7L4lVkOlIk12g\nAzNsSqZ5X2wxl3uXe6V7Gu/Xu/hycfm+P1dBSlM/hD399+MJzwX5tvQdlAs/\nOW4xPLIWBhBZ2YgozlDnSsbOQYF/yiZgItfAj/qCSvoQ46D/wj2wQzwxHe8N\nZlGieLC34UG/4PNWcFg9z45ua6vI2KDJKBq35sd7dCKIb7YcacEkibvVqAGa\nXXWE\r\n=8VYd\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCnouDRPCeb6Yb8XkHlX6AbclifmgpPQM7QO+IA8sQViQIhAIF7ZTEC50tSisWRBRUvTngit3VmeSxT6QxiPf5gmHp/"}]},"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":"sayrisuarez@google.com","name":"ssuarez"},{"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-formfield_0.19.0-canary.f8ceaf79.0_1596568657675_0.2067644265674886"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.6b9e385a.0":{"name":"@material/mwc-formfield","version":"0.19.0-canary.6b9e385a.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=8.0.0-canary.1b44b43c8.0","@material/mwc-base":"0.19.0-canary.6b9e385a.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/mwc-checkbox":"0.19.0-canary.6b9e385a.0","@material/mwc-radio":"0.19.0-canary.6b9e385a.0","@material/mwc-switch":"0.19.0-canary.6b9e385a.0","@material/rtl":"=8.0.0-canary.1b44b43c8.0","@material/theme":"=8.0.0-canary.1b44b43c8.0","@material/typography":"=8.0.0-canary.1b44b43c8.0"},"publishConfig":{"access":"public"},"gitHead":"d264df08ac61122a6e48c33485335fe7444fbd09","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d264df08ac61122a6e48c33485335fe7444fbd09/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d264df08ac61122a6e48c33485335fe7444fbd09/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d264df08ac61122a6e48c33485335fe7444fbd09/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d264df08ac61122a6e48c33485335fe7444fbd09/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n*None*\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.19.0-canary.6b9e385a.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-g5MHW3uoVJHt1Rbl7QI52+9hIO6zcqN5P6CWJb2paGRwxn6HVsARa29DYxFB9TH+K02tHTh++bFceP4aB0gYNg==","shasum":"ce072ae20c25b02982a6ea3e3f3bf9d02e3da9e1","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.19.0-canary.6b9e385a.0.tgz","fileCount":16,"unpackedSize":48637,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKdMvCRA9TVsSAnZWagAAiugP/2GI+wqV+nl6Qcnvh+X2\nE8YofE9kmVRp1oovy+qafrmH+La5hT0PIVitUbOo43gF8C3QbhzZo0+PVleB\nvGDRxUYzmOQSLZf6UG4nB0Bz7j4Femp6skXKvcGoEY5IalNbIwRNp7tm7Tqb\n1DFEhs6lyOgBgM+gdqAWG2IeuOWKtK7p3liDNoQw4vMMoD0UwDAse/D0YkjQ\nJB1SBcOg8INS4NZLCXWKkuWy4y3052+c+hlwlzbUMux+YNCVExVJgHTziVWg\ncc2g1GiPzVIJfWuoeJNnxmpoio0cEFiYJ/Ijczg7uhilyREvDrg1eEJAsYiV\n0JChAYLzx8L9M7F5Mz5zpG9YXU9eY9iZ/GSXD/JvKxRyA0nHBED9qi2aDsaA\nH7GSy4eZBDk9dafg9f7BA8uCxQhnfoc0q3rDauKkNFJlSpNS4UyeI+AddEAx\nZM/qG+BlmZ0QmTUtl0F/emsxiYu6008/HpoyFnRMonIjgpt7e45smWYtxZYN\n/TWgMGQMbV2AU8OIvYCDQS7axt1DJxgEAbjlryMIN5EErcRbkHtp3M3v403a\nskDZYetvJ7/IaiCOOjCxz3eBeu5GTYDe3cSJmZAtNJF+kAyyMLB+mo0ONGV4\nm6/G9wB0fgn5WxGXkWrXnFSIfuRjLx8HYHL2ThtzsCHjPvnXdZao47V7AXaJ\nzy2+\r\n=9TD3\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDUe/MHfc9XqTrDg70bdUFQNNuPb+1SBGCDl/ZnUyvWAQIhAJRRwOTiTm0PGhtdeTFWdJsGGLUW08YsjFxF2jrirwSH"}]},"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":"sayrisuarez@google.com","name":"ssuarez"},{"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-formfield_0.19.0-canary.6b9e385a.0_1596576559419_0.7445225215714102"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.9a7e6d2a.0":{"name":"@material/mwc-formfield","version":"0.19.0-canary.9a7e6d2a.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=8.0.0-canary.1b44b43c8.0","@material/mwc-base":"0.19.0-canary.9a7e6d2a.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/mwc-checkbox":"0.19.0-canary.9a7e6d2a.0","@material/mwc-radio":"0.19.0-canary.9a7e6d2a.0","@material/mwc-switch":"0.19.0-canary.9a7e6d2a.0","@material/rtl":"=8.0.0-canary.1b44b43c8.0","@material/theme":"=8.0.0-canary.1b44b43c8.0","@material/typography":"=8.0.0-canary.1b44b43c8.0"},"publishConfig":{"access":"public"},"gitHead":"162d034ba4d899bea7e421640d7cab04f0130e9e","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/162d034ba4d899bea7e421640d7cab04f0130e9e/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/162d034ba4d899bea7e421640d7cab04f0130e9e/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/162d034ba4d899bea7e421640d7cab04f0130e9e/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/162d034ba4d899bea7e421640d7cab04f0130e9e/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n*None*\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.19.0-canary.9a7e6d2a.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-7F7aZlUjTy6t7M0m2MtRgTqd0pkO26bkrnD9NHUrnK9oVLUsZSklNGMPXcYOy62Os2v1qkRSc3fh7tSvt8VgfA==","shasum":"02fa6a06c7b46aedd1549e1ba7852db361c09cdf","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.19.0-canary.9a7e6d2a.0.tgz","fileCount":16,"unpackedSize":48637,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKitbCRA9TVsSAnZWagAASIMP/12D7r3GyE2k62WyW37J\nfycpQKEz93mkjAa7Jlex2yG2oYiaZgAH7YmJti4YeE4BIuu1KnRPhQCvDqsS\nha6ja7/z3BpAyC+0IeDwTFMwQMTUQjfGZHy6uZRPAcfYLvy5W5uIc0SFZIXB\nodbjRLcfU+j71VGAfNRi2zNhgcN2ckARETibM3hMYd2CuAsOn0wfPRC84Nwg\nhHFonSR0S7Ss1W/55GgrNJTGbMWvu8VPB+WCaJxyLlZqJuPrZ8aPLeKXtE7c\nCKlq1/Kkx53eGCRse27JGTE3TMfP8e1j+bzdejSiPsMKgQFY1sfYlp5/J+Bi\nlB3+Opp6WI7TJdZvCh3Ay0XhqyIAdezqxAEfYmaKDS/VkxqR2DgLXlgxax3Y\nHAM/Pd+U7U6eNuldxQJkYMsTiR29+Fdho1KhkGLtwi9yZrWpvN+ovxm0P71W\nw+YOISqKpOFfvOhyI9LUT+v6KD+YqMQHA6saEk9c17+i0X93yWz2PJomp9yv\n+yZpzVxX3Lqq/q9BV6XbB6SzKFjItWulEnwf0gH85Bg2D8QxmW6hfv41BQu3\n/7dnDDcdNStJfbTv3suZ//SXSqoZ+2eSFdogd0fdu70ZlFKevZmT7wteeJCp\nkM3quaivJiwPSEDHEcgQ+mX5RBS+DPVKGFQI3nv9Vhrc5Tm+34g7eQ1zP3ep\nGuLa\r\n=Cj2Y\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBi6VXkvoWHr1Y+QRELLhjZqJkUvjXDgmz7wvIePq91dAiADFY+Hwj5AkBCLK4bJzyFACLXPkNX5JhPFy06xCaGRMA=="}]},"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":"sayrisuarez@google.com","name":"ssuarez"},{"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-formfield_0.19.0-canary.9a7e6d2a.0_1596599131329_0.22782929515196004"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.188f3f1c.0":{"name":"@material/mwc-formfield","version":"0.19.0-canary.188f3f1c.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=8.0.0-canary.1b44b43c8.0","@material/mwc-base":"0.19.0-canary.188f3f1c.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/mwc-checkbox":"0.19.0-canary.188f3f1c.0","@material/mwc-radio":"0.19.0-canary.188f3f1c.0","@material/mwc-switch":"0.19.0-canary.188f3f1c.0","@material/rtl":"=8.0.0-canary.1b44b43c8.0","@material/theme":"=8.0.0-canary.1b44b43c8.0","@material/typography":"=8.0.0-canary.1b44b43c8.0"},"publishConfig":{"access":"public"},"gitHead":"200ab3c3186265d2084631aa4f47600057a574eb","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/200ab3c3186265d2084631aa4f47600057a574eb/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/200ab3c3186265d2084631aa4f47600057a574eb/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/200ab3c3186265d2084631aa4f47600057a574eb/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/200ab3c3186265d2084631aa4f47600057a574eb/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n*None*\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.19.0-canary.188f3f1c.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-AIkqyfOtDKjArCKq7pncUdg8zUw3EzY1BK/hB+ybSviYPg02nSmgX8SGXJlfc8lP0yc09wc2tW3dndQxFupV+g==","shasum":"4dc0c9ae8e73a82030adb1c6f1f02e1d024fc0db","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.19.0-canary.188f3f1c.0.tgz","fileCount":16,"unpackedSize":48637,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKvanCRA9TVsSAnZWagAAg7wQAIMgUgbtL2wj7L7fOXE+\nnyTaGBNqSokcTMDoV1Qza/HjR9gRTuBTP7OIo0zHpG2CXqpNSSPl6ClOg/8y\nez1oTqppSIxqcEgvjhakf/vih2k742ugEhrYqWQ5QZpR8/nu4xnv+t+dtgxb\n8fsXzy/QFTVH0LpSuhDG+tEBsIeyv5uYgeIUL6XJyEa6h7eN1Rci7jDINSH1\nc5LuHtvly63DuX5UlktisPxXhIe0rTVMQdYJtyCD+F1280yp8r78FzN/RIY/\n25uSKnJgI+O+Fbaf3tLZOGpm4qY7fkYRjnSg+w43QnJNs9Lnypt+8xfMJ+Cg\nghwCqVfEtLHKM6Xns/+B1oTU+F5cKbNdVk2Q50fdXJfsk6HhnUvO4I9NTIU7\nN0+pBb2KXmY0nDAEMbliYsT/dzPM1oHHYdV5E2XGmmCuDJN4wxTpODt8atmJ\noKQjARh53aBcXMAAICwKUC2NYaU5HQVA7u1Y1CgJcmWL1pcdsriX2kWm1Hg5\nZOiPopmGQzs/AtbKrW1hkX5n3/u93DoGem7A3yZKJwSWBODxYn5refm6JJNp\n9UwkjnwovgOSOS5wKWCSHXh+EdUtKJeC5Hr6WL/KRO7ROiKIXlhskoexDBP9\nAzHFvpSB9QQi6XJGbolD79t9wt9YN+15drRfxClguY4UK48b6F7PNCeC98qU\n+jVR\r\n=+y5d\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEGETon2QFa4elJX1/l8xLERkLOiEnpuUiEbJ1QiTsJDAiEAyTkyTVDTpAw+81S+TicjAPIZlx3H/e03+H9czbyZ7nE="}]},"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":"sayrisuarez@google.com","name":"ssuarez"},{"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-formfield_0.19.0-canary.188f3f1c.0_1596651175040_0.9454368439409917"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.b6106add.0":{"name":"@material/mwc-formfield","version":"0.19.0-canary.b6106add.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=8.0.0-canary.1b44b43c8.0","@material/mwc-base":"0.19.0-canary.b6106add.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/mwc-checkbox":"0.19.0-canary.b6106add.0","@material/mwc-radio":"0.19.0-canary.b6106add.0","@material/mwc-switch":"0.19.0-canary.b6106add.0","@material/rtl":"=8.0.0-canary.1b44b43c8.0","@material/theme":"=8.0.0-canary.1b44b43c8.0","@material/typography":"=8.0.0-canary.1b44b43c8.0"},"publishConfig":{"access":"public"},"gitHead":"9726e6593d779066f5b7158af254537ee9c9174c","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9726e6593d779066f5b7158af254537ee9c9174c/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9726e6593d779066f5b7158af254537ee9c9174c/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9726e6593d779066f5b7158af254537ee9c9174c/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9726e6593d779066f5b7158af254537ee9c9174c/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n*None*\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.19.0-canary.b6106add.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-ui3GAPCEMlXxJWQM9rwRGAn1BEPBoHKfRZsSlHIa83nyQ3kls4ssse+daDGfBex4CLWBjcRNAarGoa56L3sk1g==","shasum":"438f1b61d9575915bac55a3a30ceec58716706d7","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.19.0-canary.b6106add.0.tgz","fileCount":16,"unpackedSize":48637,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKxs3CRA9TVsSAnZWagAA0KoQAJzdX0jVq6UWou8dDXFO\nI3aZlVBTo7+EgGA30Fo1p86RpIWe9F/0dvuBXmd0SbtBnhr7xK0mngTBQm+W\ntoECOSO6LU1YCb5piDGuhgScvyClfEt4gMR3VD+mChaizGNEqiPBgNDKyDhZ\nipCYTaS5IJMpgkPnFK2gkgYHXylSLhlZdKaaOy/f9yKE3PP3DbsUrPl+BE5A\n6Qx7WHUu/GjvFRTcrY8OcjgNIcsqeN5oXdG5SG+hsMZb4BSIeG4Y4WL4lsbZ\nYWgMzSt8jAwkH1I4bGe9f/EroMuZM3iIdetIoujrCMefr5mw7RnkFDQRDuJM\nuQUfWv/7nPl9rg9C8vPtmSXVld+EDsRT1FM8ECkRuQRfwWGw4wmh2d+9XTKk\nqlmvpvLWyrxt7TEkbwgYeRMlKA0orZ1mbGVQaioJ6DCH6iB/0gXJsZRw1PXS\nZHM5bD/w1X1eee/0aim3WsWz1cOI8KZAnS9kwsCPxLBMtR+0OaSQ2gXZ+3CW\n8KACa7F28OFbwld35md+GGd7zQho0oXE6yv/Fr7J0FGapqVq8TPRJjaoC9jb\ncVVWcvaqU2qW24ZEuK8tnctRsZMz0+k0PszTDLgVjW1bNX85IuMmXnkH7cnM\nqU78ni30W0290ypNEorsYY2ZDYshNvBYx4wo5ox8Nwm88/rnO1dwuq9RrS9i\nMaGw\r\n=tdSu\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHnqe3g+qFcCz347+S8iNg/R7C1j3dF5+QWqKciHTQSLAiEA3lGnEyA0CngdKles5yRwVwioCiicgFmKmhcS+2Z0izY="}]},"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":"sayrisuarez@google.com","name":"ssuarez"},{"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-formfield_0.19.0-canary.b6106add.0_1596660535362_0.8692548224188703"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.ebb4c667.0":{"name":"@material/mwc-formfield","version":"0.19.0-canary.ebb4c667.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=8.0.0-canary.1b44b43c8.0","@material/mwc-base":"0.19.0-canary.ebb4c667.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/mwc-checkbox":"0.19.0-canary.ebb4c667.0","@material/mwc-radio":"0.19.0-canary.ebb4c667.0","@material/mwc-switch":"0.19.0-canary.ebb4c667.0","@material/rtl":"=8.0.0-canary.1b44b43c8.0","@material/theme":"=8.0.0-canary.1b44b43c8.0","@material/typography":"=8.0.0-canary.1b44b43c8.0"},"publishConfig":{"access":"public"},"gitHead":"6911337bd0577b48c85e4d3502ed5111b12a7b4d","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6911337bd0577b48c85e4d3502ed5111b12a7b4d/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6911337bd0577b48c85e4d3502ed5111b12a7b4d/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6911337bd0577b48c85e4d3502ed5111b12a7b4d/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6911337bd0577b48c85e4d3502ed5111b12a7b4d/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n*None*\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.19.0-canary.ebb4c667.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-w+LHcv66nb75z1kQ1geDTNa2xKJyct/IJF5/mq4UWO2xngZGnf0odvV2IlosEmmVYxxgBKjRdOs7Tns4cRTEew==","shasum":"38aeee5ac1f318bdb1ef96b83738c73b5f0ef5a5","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.19.0-canary.ebb4c667.0.tgz","fileCount":16,"unpackedSize":48637,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfK0xPCRA9TVsSAnZWagAAaHkQAIFSuzohR/din2YAbEMz\nNropvDRM5XtWp2myPeyzn7oinUXov/GwbCnQXKFjPMPFXKz4q7K6mUTm5WhG\nLLklI7/lBTyd8URxcR69V9Eac0xmR/PNzGKmFsS1JGS/SyF6pYEyd8/ZyRNm\n4k7MfXo0Hcdh/1xZ26yvn22UQZXg8q6YsomkxOOP5h+8fEe6fj7dXZPZuopZ\nGbU4dPqTWzV7HU6fMby6J8yrfb9it2JyigTqAPn9B6kOCPdxgJzwzfISmjA6\nlE1RWfnNL+BQYJ+aVGzdDuC0RcfCQj8RiWtXHqtGgJQgYcpkvLq58xWRbjXr\n18sum0HlzhTdSjUcUclqFWe3Wpn0mINfQeBcf+JSmbtnIN4KymFvJiNEVMJL\njpMG66Y/BqJ/TRyX7XO8QqfvTKI7tI9gaMPkz085AiapvP5OKKdY34BGPOri\nazCwofP2n3l0hK3WNkSFiLjN3R7e0E0mTLgwNgqQrcjsaD8ynIyE9LDap4tu\nxnWK2/GjZUHYuqhob3Cx0+odUR4uEzNmLo02B8nnFAlRPptrMrfIf2FWq/vM\n/tg/xi9SJjnBPEeS+L8C5XisHSmN/3LpOCe9tUIl07KUFdkn3H88JDkmCI8D\nxpHBf1Xs1EcNaUerC4l2MFCat/vd5CknQn7VbiT7LE45TjdLFdRfX4hRyso+\nfZEx\r\n=n+zN\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDTqdTbsfZi3ehKVACeMU+yFt9baEhXeKjw4G4qjHWThAIhAP0zMkGzsVULh/gtYL5rytWJQD8eKqEd/AWwWW16mHwb"}]},"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":"sayrisuarez@google.com","name":"ssuarez"},{"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-formfield_0.19.0-canary.ebb4c667.0_1596673103006_0.7191637002318771"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.aa44289e.0":{"name":"@material/mwc-formfield","version":"0.19.0-canary.aa44289e.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=8.0.0-canary.1b44b43c8.0","@material/mwc-base":"0.19.0-canary.aa44289e.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/mwc-checkbox":"0.19.0-canary.aa44289e.0","@material/mwc-radio":"0.19.0-canary.aa44289e.0","@material/mwc-switch":"0.19.0-canary.aa44289e.0","@material/rtl":"=8.0.0-canary.1b44b43c8.0","@material/theme":"=8.0.0-canary.1b44b43c8.0","@material/typography":"=8.0.0-canary.1b44b43c8.0"},"publishConfig":{"access":"public"},"gitHead":"4d74632e3e1fce6fddaefd045c8f0b6f026b4e4c","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4d74632e3e1fce6fddaefd045c8f0b6f026b4e4c/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4d74632e3e1fce6fddaefd045c8f0b6f026b4e4c/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4d74632e3e1fce6fddaefd045c8f0b6f026b4e4c/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4d74632e3e1fce6fddaefd045c8f0b6f026b4e4c/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n*None*\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.19.0-canary.aa44289e.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-l3jTEIlguCzMNmad7/tmJQwe03EN+SXW/evx8NWGjSNkLxk6JieMC4CPpKf/bO5xGKoIhq/Rk4O3cHuEsBcEHA==","shasum":"c965982a9ef150827015df50e033c7735afaca69","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.19.0-canary.aa44289e.0.tgz","fileCount":16,"unpackedSize":48637,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfLEtyCRA9TVsSAnZWagAAbpMQAJxT9TdXuYb+W1AnRpGU\ndjYxNIgpwiCkupNJcF1pY3D8OTkpu4gFoElzf05ezgmVW1X8LPm4/VkWYhvQ\nMn2fWQgMGYuy1TK2RJPKJdtCMT2tzv7jhka993tTk2MHh8tVmDgIyZt5HKur\nagF2lRWDfkYVbP50hEL+XzcBJoEt+H1eHYMfdmxekHW+YGy4VhQdB7DzqrHy\nKDPu0g3kwLho9jnF1ZMQT1oibbFVKsj00y763/FzZbdSnYj66G3t82RQ7vQ/\nCtBKOyZOrsHa2Ca+ZtxJpknbxNb7KC9ZXDv8mdlEjrChoj3o1fcfE279uMqs\ngTdF+5J9rvuyoO8wjCanRMHAoOza0bTBMdSJTh+TKR4doYvy9tHmop2ZCc4t\n+wDDj8A/Rc0+zWubqFHAhU6SR4c00Xd95p7A6a+IzDKlHNazyYYHpqoFnAKk\nrDFbLe8oQ8dAJ8b+T9lyTmoiQRc5Z6eBjYCDiPF5xbB3+JcB7kwlXz7H+AfP\n6+SRixQDPxbBzNd+2SPOHy37fxb755glzOlV+Z2gaHKRBVVs3LuDhIac+q7E\nVpleN5BNnbUdbwZ/qFAMBVZLDYRMAdgRWTEvnNtCCw8/HaQ2WA3VvisG+QlR\nZfRE2XHc8fQyR3w6nM0BuN5K5AF/ioqUKVTEfEJDE2fQX8hi5oQEFVgfqNOu\nezpa\r\n=Tk0P\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCi6zjmLXAfXESSVWoWKepMjriMWQXfZbQcChlcy17F0gIhAPJvccW2w7jd3stxzme/uX1RlpnvrxoNzb/ru8Y+lOvm"}]},"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":"sayrisuarez@google.com","name":"ssuarez"},{"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-formfield_0.19.0-canary.aa44289e.0_1596738418007_0.0987567226551389"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.e6b0816b.0":{"name":"@material/mwc-formfield","version":"0.19.0-canary.e6b0816b.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=8.0.0-canary.96a640534.0","@material/mwc-base":"0.19.0-canary.e6b0816b.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/mwc-checkbox":"0.19.0-canary.e6b0816b.0","@material/mwc-radio":"0.19.0-canary.e6b0816b.0","@material/mwc-switch":"0.19.0-canary.e6b0816b.0","@material/rtl":"=8.0.0-canary.96a640534.0","@material/theme":"=8.0.0-canary.96a640534.0","@material/typography":"=8.0.0-canary.96a640534.0"},"publishConfig":{"access":"public"},"gitHead":"b80bf3f3363af2f1b704d5fe2fe2852cd416b902","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b80bf3f3363af2f1b704d5fe2fe2852cd416b902/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b80bf3f3363af2f1b704d5fe2fe2852cd416b902/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b80bf3f3363af2f1b704d5fe2fe2852cd416b902/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b80bf3f3363af2f1b704d5fe2fe2852cd416b902/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n*None*\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.19.0-canary.e6b0816b.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-PSe1JXwj39QjwfthaqEGhJ/M6hqOqf+h9IjyfaEQPWNSbXr6iFq1KpCawBystlwAWbJqOag3zcwq3jvXelvdfw==","shasum":"57242cecd00b79fda8e3ff8b8ab8b2f3e9c5f7d5","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.19.0-canary.e6b0816b.0.tgz","fileCount":16,"unpackedSize":48661,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfLaDDCRA9TVsSAnZWagAAXCUP/RCPiFL8tefJJlTYZ9Ym\n5dtA6jqGDgpu7A2N1f+usCoqKajZaY73hrfRnQMqpjtRrV/ux5yCltBteZ7/\n6M1RwFojh9eJFJgy5IlmsG+AyiO1srXEav2HG4kf/og8872D63Qyc7INM/D2\nrkL/fNEBOwSwEA8d8Q59XSsOtqUp1DTp3Pku1elUgtTF+AbvjhbNuiJft9E8\n/voTzenS94OAH56Vdjx2n0uI5vqlz70fcxqgXPKZrAo9vFIeEEVKYUVQ9Og7\neupwtC1qNK7Fxu3CJgENgfGIxfj0ox/xOJD0HijrSTqY8T53At89KoGU7dpl\nEy1rRzZ3MRhIi4+rnCpxyHYaorTUbUtBv5/4g0fneklozKpsF3FLRr9pl4c5\n9P+SZMCeEEnfXsK+gWn0ACbuc15/4Debz3J/CIG9cbJgKWOmKcQmQVbWpJZY\n8oodkNuWl9Z7xa4aVlqATRS6ptLmhviV/ZgK675m0pELFSP0XxlGvuGfm0ka\nxTYIad8Pcze/yWv/9DPVVlbnzM18eKn8JzCYd+zbikZ/Z2RXEyESKLW9jj3n\nS42uDLvRtZdqrruUteoPFkyxEFwF3rxkzR/oTg79nmj+H3HtSWq5yFySPxcL\nd/j9tkWz/Axw1I6FKJAPrV+mT+8EFrpw2hu+kqjDrDqkARHdEQDawdcnYejW\njViR\r\n=RrSV\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFAlk3WrprjdqAAm9U5U2gL9K87ebLXC/bmve0J8aiY0AiEA9+1kluwSenYnnDFlrxoTyoBEqg7UjA7hFrvWhvhXZck="}]},"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":"sayrisuarez@google.com","name":"ssuarez"},{"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-formfield_0.19.0-canary.e6b0816b.0_1596825795041_0.03197923325068053"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.96d15938.0":{"name":"@material/mwc-formfield","version":"0.19.0-canary.96d15938.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=8.0.0-canary.96a640534.0","@material/mwc-base":"0.19.0-canary.96d15938.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/mwc-checkbox":"0.19.0-canary.96d15938.0","@material/mwc-radio":"0.19.0-canary.96d15938.0","@material/mwc-switch":"0.19.0-canary.96d15938.0","@material/rtl":"=8.0.0-canary.96a640534.0","@material/theme":"=8.0.0-canary.96a640534.0","@material/typography":"=8.0.0-canary.96a640534.0"},"publishConfig":{"access":"public"},"gitHead":"6e91207d87648ea038ff3d435537ba7b2014ec19","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6e91207d87648ea038ff3d435537ba7b2014ec19/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6e91207d87648ea038ff3d435537ba7b2014ec19/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6e91207d87648ea038ff3d435537ba7b2014ec19/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6e91207d87648ea038ff3d435537ba7b2014ec19/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n*None*\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.19.0-canary.96d15938.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-idmlgNlf9drVJFs47pEALzMsJqRc7cKDFWOESvQq00Fj/LGxoAM7+WoXRT1rq20xAPS9NW7l71yhNbBtDkF5oQ==","shasum":"b9cadad51be56b07d96031e8a40ac8ddcbd10d10","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.19.0-canary.96d15938.0.tgz","fileCount":16,"unpackedSize":48661,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfLblnCRA9TVsSAnZWagAABfgP/3QKoOCQBrb4pLxWBvUa\nIpLwMaM7BH2129h9eaxuP0m2rldy3xDuNMOy4NiNv3bZp7Wxu70yeT2i5cue\nv/1RCxmJCWI4AttWzSF0U67OxFnrMkkQvDhC6yGiWqIgRttOwA5ctOtwklrP\npUGxwgRlY1FdOUsEV4LQ0jj3Fyw6MI0vaxrmcHMmFSxIV3ja+NgiVn/DUfFT\nkrA5vKWtVSrllb+jihBSnqEHKaUiFVWT1I+rvd8rVGtADwSKGN+Ec3JakEPv\no7hXPANK142IqGa5wOGf7c2UUP8eGDKXw/88+HlcgYzx8pXZfi/NO+NQy90v\nEiOGoR6ENoCN3KYX/eAl4ZEgbz0YeRNfod0CIQiIDyYIJ4XTzQsm+jp74hp3\nvGgmdjP5N9Y10ldONJ0v4N1CFi3SUmvimhVRcxHLEIftUivagM78hKfm5Pnk\nringGepdIgM+qnB0th0Sxfal5TTLwdJucgmqOl5BI2nF0Y8JjuZKUgBy6S/C\ngG6rT3VcxvOAV4DLIwIYi6idSKDqQhoiPmZv7xpIPYkknaZBpGnW3G9mwfm0\nctFoAc+kuaxocbzZJPTbagOqsjJ7fxOb7eP3lKFww93QU6hApV2nn74/Hgxk\nLgNxypp86qKzAAITudeUwi7KchYSgucuzSRYwEL735RoeN2jphxm/rNIwEyc\nrTlN\r\n=apAs\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDQ9Uwocj7DaPavQkxUxQ3dp2m9nH6tHYiEn00kD4eQjAiALOc2dq1Arns1tZ2+awu9EiYXd2VNFvvkTJK7TQ/c1VQ=="}]},"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":"sayrisuarez@google.com","name":"ssuarez"},{"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-formfield_0.19.0-canary.96d15938.0_1596832103096_0.025704357065889694"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.9d991c8c.0":{"name":"@material/mwc-formfield","version":"0.19.0-canary.9d991c8c.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=8.0.0-canary.96a640534.0","@material/mwc-base":"0.19.0-canary.9d991c8c.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/mwc-checkbox":"0.19.0-canary.9d991c8c.0","@material/mwc-radio":"0.19.0-canary.9d991c8c.0","@material/mwc-switch":"0.19.0-canary.9d991c8c.0","@material/rtl":"=8.0.0-canary.96a640534.0","@material/theme":"=8.0.0-canary.96a640534.0","@material/typography":"=8.0.0-canary.96a640534.0"},"publishConfig":{"access":"public"},"gitHead":"b96115b555701f0a2fb8299279aa9dfd1bf6b4b6","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b96115b555701f0a2fb8299279aa9dfd1bf6b4b6/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b96115b555701f0a2fb8299279aa9dfd1bf6b4b6/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b96115b555701f0a2fb8299279aa9dfd1bf6b4b6/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b96115b555701f0a2fb8299279aa9dfd1bf6b4b6/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n*None*\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.19.0-canary.9d991c8c.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-QXx06vSCKUubQC82fmiLKRTa0pxU2D6+uMmo2k6ejvOSOlTx3bhQkGHoAhJYKuT2zQXRt+0w3JPpCuuFg58fSw==","shasum":"ca9c8aade4ee86ea3e870a3b5f921748d03d63a1","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.19.0-canary.9d991c8c.0.tgz","fileCount":16,"unpackedSize":48661,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfLdDCCRA9TVsSAnZWagAAGtcP/iKG9YX51DqtDVCHkuS0\nfWlYwLsrQ/i/ZjgOXbQafg2foAe/y2Hblkhc04ogiPM+qVNVaiD1Jkz8dMoE\nwFYqVHTLNU7OTTQ6s891wvzHERq/n7LczDCV655JVqrq9e0a6x0+wZvHpgQK\nPGpogKMIZBfc2GBp67N5j4m3+kpNkSl6cpvFu66A8LJXHIdd1ql2Q+VaH8aP\nRnyy4KO0eGldXuGotsHlBakj6l237/Xnh0SoCqJwIbKz18Sn/Gy+29cn57GN\n5DZeFd5aY5kLWFP9sL+2mwbqxiZ+k8pSQcfNry7HTctFjlKLUofkSjP7P0V6\nhSFJsnIru8fwrwzouu0Iw41eCk7fDhTJC2LRpQULNQ6wM0Nqxme19Td5aclX\nYVeqLjKgCuxe3AHQUzK3MRCuWSdWWR1qHOhRwrpor1rG33n+0im4EV6aYrOB\nlCYwl5JCHiKkYl3QaLiabYu2k6i20wCWDoOD2pR0L2hdG5mcSxX8DrM/XfpY\nhCQA+B5+/K2W+PdBM6ksdCM3+UD+Oi6euFQylk9WmEHX+5y8XviiB1WDrzmy\nfOkXqSkpifgOKBKr4xkQ8n+pn9YE6VPZQQoJvGTuz1T8HUOtYPnB8NG9DiuP\nOFzO0d6a4Nx+wwr3m44hludp03QOiky0022XaA5wyHEJJL8DIc+ph9yH6u5D\n/idI\r\n=h/Nh\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGmEkGdx6ezMIBXwzO4H5Zu7qP8/Gb/N5cpNTWqxzD2/AiEAtrYeCAmlefw7mBCswg5IA4RyQhgc1epvE2llWNyUBBU="}]},"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":"sayrisuarez@google.com","name":"ssuarez"},{"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-formfield_0.19.0-canary.9d991c8c.0_1596838082196_0.3692041552951515"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.13bfbd72.0":{"name":"@material/mwc-formfield","version":"0.19.0-canary.13bfbd72.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=8.0.0-canary.96a640534.0","@material/mwc-base":"0.19.0-canary.13bfbd72.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/mwc-checkbox":"0.19.0-canary.13bfbd72.0","@material/mwc-radio":"0.19.0-canary.13bfbd72.0","@material/mwc-switch":"0.19.0-canary.13bfbd72.0","@material/rtl":"=8.0.0-canary.96a640534.0","@material/theme":"=8.0.0-canary.96a640534.0","@material/typography":"=8.0.0-canary.96a640534.0"},"publishConfig":{"access":"public"},"gitHead":"801272b0ef15e1f90e0ba47c6a8d185052f8c48f","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/801272b0ef15e1f90e0ba47c6a8d185052f8c48f/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/801272b0ef15e1f90e0ba47c6a8d185052f8c48f/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/801272b0ef15e1f90e0ba47c6a8d185052f8c48f/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/801272b0ef15e1f90e0ba47c6a8d185052f8c48f/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n*None*\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.19.0-canary.13bfbd72.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-Rgph4aIsKsIi2/PLDhB+EdxS1xgrS0K0fEr2Cj6Vupvp4No6lwbbMPeTpw5YY/yETK8lKYBmOBlvGoE3H1yo7w==","shasum":"81c6ba76eba5ff7ba4312779d3c69b53e571dbc0","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.19.0-canary.13bfbd72.0.tgz","fileCount":16,"unpackedSize":48661,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfMZ+FCRA9TVsSAnZWagAAZg0P/0nytcQpbCgkqx0B162l\ntaiEcMSDArlzjeeeXGC7RFmVJmu5HIIr7DBO4ms5K42wYeyrJO7afqGPt5xJ\nKwy5ekPG1ISkSgjqfRvkontgaRyvfa4QtgRWJdOCjwPPbuYb2/GSprrdeO4I\nIb5iqsNEsArGWnihVJwE8DqdrC1H+XuBg/MDnK4cN9Nivqr39xEPTCkLQr6G\niiv2W6eJasFrxGStOFUPMs4wucNeRwuWGLTqyyD9O1Dy8BQfO0EpmxkQHrzH\nc3Ti6X6iqqi0nqwS0uwIwM1t0DW91fy434Eh3h8aIQYu4Y75O+6zUN8Cylew\nutsANo7gezmWMcWmxw+AphbuEuo0wxlwWP4VMPuT7568b1kvNQ6YIwfdyG0Q\nhHxdt13QVovorXcYf8Y7We0yyTdO6OrJHaCaOg1emmz+kKxEbUZ0piFG4+dk\npf7RYvdnwWY7OBkA5Twea0Fbu0nx2Bm6IhOC8qvsypPqt2HWrZq1UqOOWUtR\nroGrUKDymO2ekrrMrbM8ntZMXBLVAXyJ4XSsnTWDQrZKBQMzON+Sm/K6HY4K\n9qkmhPKcY15G5yBk2Hl+cLacfQUVuH/oxnjB3Thy6rN2x6BzX2CHSmkgxXjj\n25jwT45ErUT2osTls1zLXpTnrXm9+G4ZskF+zi9oC4TNlf2C1uE4RDbHKNMo\ndZEz\r\n=8sqc\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGL5qbt67eeNDPQW1sjWAWfihtPuXqBwxXWBxIMsxptNAiEA+7cEM9b94iPWwDQr52oOS7aHybs4QnliccWNcH0fnfE="}]},"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":"sayrisuarez@google.com","name":"ssuarez"},{"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-formfield_0.19.0-canary.13bfbd72.0_1597087621436_0.8457668070811533"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.30b1b258.0":{"name":"@material/mwc-formfield","version":"0.19.0-canary.30b1b258.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=8.0.0-canary.96a640534.0","@material/mwc-base":"0.19.0-canary.30b1b258.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/mwc-checkbox":"0.19.0-canary.30b1b258.0","@material/mwc-radio":"0.19.0-canary.30b1b258.0","@material/mwc-switch":"0.19.0-canary.30b1b258.0","@material/rtl":"=8.0.0-canary.96a640534.0","@material/theme":"=8.0.0-canary.96a640534.0","@material/typography":"=8.0.0-canary.96a640534.0"},"publishConfig":{"access":"public"},"gitHead":"e34fbf2f01b3504b83592cfdb8b30914bad24498","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e34fbf2f01b3504b83592cfdb8b30914bad24498/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e34fbf2f01b3504b83592cfdb8b30914bad24498/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e34fbf2f01b3504b83592cfdb8b30914bad24498/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e34fbf2f01b3504b83592cfdb8b30914bad24498/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n*None*\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.19.0-canary.30b1b258.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-xP1W7gGa71fxgrvvkwURCZz0hNPtn0VfCBeocLZxfABVLc27MLFzYEQgaeBqpQz2AaG1goaLHit1HWADTjMPQw==","shasum":"a40a050f5d6423c2622f9aa550b074d86af12774","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.19.0-canary.30b1b258.0.tgz","fileCount":16,"unpackedSize":48661,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfMajHCRA9TVsSAnZWagAAZDAQAIACT4grtlQWLQ1RYyoh\nNNPHMDgF3jV4aeIweIc6Znjdh6Emco80a1YjgJD1yrc4GSD0tExTnrOCi9bp\nRBqsqg9X0aaVNZp3piCkuiH9duThgt/9Ewliw2a3Fjq3kzYjGJXSAlCc+ImG\niXTNgAclcHQ4q9r8W/uvHJYtrpX4ehfuhd/EfVMiNqx1rjgY4Cnda+sYmZaZ\nqKysY4awf69NqhQ7+7hqeqozhu4MzFaUy0hgIasnLGjBMGjLEtrd2jVi0hjH\nmf+Thd614/iLol1g82U9pe+CGr4vh2y4FuPrg7HcF4jyxnkuTR4pLQH8iT3Z\nzavjAWnLDP8nIQglE4vvODgT/1YLspsuLhNKlpsN1K27Ptogrf0hujBHqGbo\nvM+ylfkqZToS6o+vKTErRXeSWGvlKlzeOK+6rmn1Tq3tsgBy95np8EG7Ieho\nlD+phBx/IUfrG/syXix8t7WGXHWnmZ0fmgAZrOpuatAfXN6q+RxpelovLpmO\nc9ftj0aIR34WxI0uYBc4qRQ76tapDYb154WvoQqeRQe4M1zipzqf4c4EZUfY\ndt7da75wDjyg2XrIWomYLdImNbGstwfbx36T3fv1O+X7UApp3kDSgElNTbU6\nOEiX3bpCPCQS9vsfr0HjLt16XiXf1DDhrSRRDolvzHWWS71HUKIVHM047VH+\nMPfH\r\n=Vjt4\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIF796aZY5JdcRZNt8EqApvfSBibekRPbi88j29SSfmlyAiEAzB81HUaaBicOL7GYwZqQT0Q1kAlNldHuBRbIPjNKGI8="}]},"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":"sayrisuarez@google.com","name":"ssuarez"},{"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-formfield_0.19.0-canary.30b1b258.0_1597089990922_0.9768320729844133"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.1583e263.0":{"name":"@material/mwc-formfield","version":"0.19.0-canary.1583e263.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=8.0.0-canary.85a5272df.0","@material/mwc-base":"0.19.0-canary.1583e263.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/mwc-checkbox":"0.19.0-canary.1583e263.0","@material/mwc-radio":"0.19.0-canary.1583e263.0","@material/mwc-switch":"0.19.0-canary.1583e263.0","@material/rtl":"=8.0.0-canary.85a5272df.0","@material/theme":"=8.0.0-canary.85a5272df.0","@material/typography":"=8.0.0-canary.85a5272df.0"},"publishConfig":{"access":"public"},"gitHead":"e9ee447b02f2731c33f126f2c3d32bc3f2808125","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e9ee447b02f2731c33f126f2c3d32bc3f2808125/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e9ee447b02f2731c33f126f2c3d32bc3f2808125/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e9ee447b02f2731c33f126f2c3d32bc3f2808125/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e9ee447b02f2731c33f126f2c3d32bc3f2808125/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n*None*\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.19.0-canary.1583e263.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-bU/ngYPNMAMiyyZn1yJsVfTqA17jbML0mlNb/ctaufVNtjL+9rfSeA/UGc64PKjYmhSv3IDTwJzjVVLfZ4A8kg==","shasum":"704685811c7e0b74f5fb16119b966f6e768f5229","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.19.0-canary.1583e263.0.tgz","fileCount":16,"unpackedSize":48661,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfMyVbCRA9TVsSAnZWagAAu04P/j4iBM6uqG7pN825gAVv\nYgukHRD+V4VI2ZFnbh4J0/OIRwqPIIbXI8Hdq1bJDpawIqumf+KHr2shk4kA\nmap1m1A2OW2Lpw0KNA/QZPRG0S4Mc2ce3XQqfclozUS6eF8M4kGz21GWJl5n\nFLGQg6+dt74ifKv72MwZlvzx8pQYWsuHLc/Q5j3dqJ2eU5+zgeloh+JFOHfK\nsZPWnCOuWbjO4Ef+AuEd9YLG8ntsJD1XgxPD/EHZFg/kTpyzCoWfnWEZt0Dd\nbGUaTxBZgPxrj4mYz+XqT2L0M3GYvn6sK96mv64uGzmS7I8FY1zPovuYJlfk\n/rRM39SDsdb9dxZVGtHZhbJpu3UVz8BTYSjD1de2DJZKZY/7UOQFcmoBF/r5\nxE7EMH5TEzCZx7SvZy/Be8/REC4+xtnMQyO9z3bvLSEQi9qlJpzMc8qcRekY\n3e2DjWfOETK6YDFhshKgMClkjkWO2ad9PYWew2gpAuW+ylqKS/hLJQGr7qdm\neOAhVmMkqb8hnVsUsoZNY7CQNjJwjSAAy9BtKuQ1+6PRo3ZPbSigsJC0VdcT\nXv913eTbp8rxfUa/JR3HL+LIRhj368QgtiG0XXAXQtEUiRRLNmmu3Wn+rf4/\nah6wYme8QZCqrqgW+52/keqodYEj13xVDHHEOfDuHKdCgYUyDnuYwjouAMiu\nI5Zf\r\n=Ppmg\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHN17vTz8IB51yrEN0BQj8EynP0T1Oo6LyJ0xFFzrOy+AiEAtMQjoXy5q15BASAyZus6nz9ID5VqFycog2/YjrD1e2s="}]},"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":"sayrisuarez@google.com","name":"ssuarez"},{"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-formfield_0.19.0-canary.1583e263.0_1597187418834_0.7042451775343872"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.fefb1a93.0":{"name":"@material/mwc-formfield","version":"0.19.0-canary.fefb1a93.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=8.0.0-canary.85a5272df.0","@material/mwc-base":"0.19.0-canary.fefb1a93.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/mwc-checkbox":"0.19.0-canary.fefb1a93.0","@material/mwc-radio":"0.19.0-canary.fefb1a93.0","@material/mwc-switch":"0.19.0-canary.fefb1a93.0","@material/rtl":"=8.0.0-canary.85a5272df.0","@material/theme":"=8.0.0-canary.85a5272df.0","@material/typography":"=8.0.0-canary.85a5272df.0"},"publishConfig":{"access":"public"},"gitHead":"328a8921a50cd0f162f89703f12a9e58406fd111","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/328a8921a50cd0f162f89703f12a9e58406fd111/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/328a8921a50cd0f162f89703f12a9e58406fd111/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/328a8921a50cd0f162f89703f12a9e58406fd111/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/328a8921a50cd0f162f89703f12a9e58406fd111/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n*None*\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.19.0-canary.fefb1a93.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-W7yCNFomKrhJpvBCI7VwhdEoZC3fV5Alz6Pm1wdmCTbm51iFiVwzs0GZv1ZURjGIfdlXHDYA3GNj3E8MZ68ugA==","shasum":"70fe712a8e6332ac3a980f2696dd4e8879274053","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.19.0-canary.fefb1a93.0.tgz","fileCount":16,"unpackedSize":48661,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfMzbNCRA9TVsSAnZWagAAb2kP/1ORiZ0FG6zYf5d5+Sgf\n7GU+xUuP/7sKYr5oaGFmoBbSZ4L5s67x8vv3uv3m8N6HrOYDR011hXF6ASNP\nYF0RMd+t/hARVdwXQp382Xo1vyJnZDi8XPk+tk+JsjcVzCP0O7AZ7oZn8dhI\nLCCEZCJvlOH5cuRKyO+IyiT7cCCckn//vICCe9XC8JwX/75AWygDBWo2Khob\nf2QQB70gO/pM4RgnHZkO5z+GMAKxG+8+q0Ag/6DGhlKFigbkTUWAsAhTu2gX\n+l7z4a7TpWIlnCaXCsQbx/zJFYZgD02dW1QzJR3KTGmE7cGc8mEK5rJpTWHc\nb4hmxSE7LZ+O+xmOKnV0huWyvs+75T80QK6nrFAK14mqLNzrIEzMmXS2QWSK\njFpdKtdDnDpOEvcqOvWwgCB44EjwQ+7sVqNfnD/HWlON7Ut1Tg5AcrRva7t5\nnC2Y48sUwRzgnEsjU1KkDhUWaz2TfYQL81q6uFifXEB4zAolBdScf8kf6iFs\nGljeK1OYCIKqfzZj8695Y35Nmz/IgQ1bctffFPZHghIQMnEd/Fw6FSL9Yeqo\nvktlSzj5UP8GzsWaMy7VD3AYn9rKxJwmh8iPYq/4n0jtqBGXcRX4mWjfTx+1\nXuw9lGExzmLj+rZAhdbP05WBDafbn8J0mfrfIYSIRjWHsFXruHR+Bc1a3OQ5\nrWVj\r\n=pkLe\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFKQROLUyQGxubxJ803R3bYxNSB3cd76yKm5P9WSZJfjAiA4+Ffz5zjMzA1fTzu9rfGOw95QjDu7LyB+Lksj5w4zxw=="}]},"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":"sayrisuarez@google.com","name":"ssuarez"},{"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-formfield_0.19.0-canary.fefb1a93.0_1597191884785_0.9342281955005154"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.1ac5b9d4.0":{"name":"@material/mwc-formfield","version":"0.19.0-canary.1ac5b9d4.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=8.0.0-canary.85a5272df.0","@material/mwc-base":"0.19.0-canary.1ac5b9d4.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/mwc-checkbox":"0.19.0-canary.1ac5b9d4.0","@material/mwc-radio":"0.19.0-canary.1ac5b9d4.0","@material/mwc-switch":"0.19.0-canary.1ac5b9d4.0","@material/rtl":"=8.0.0-canary.85a5272df.0","@material/theme":"=8.0.0-canary.85a5272df.0","@material/typography":"=8.0.0-canary.85a5272df.0"},"publishConfig":{"access":"public"},"gitHead":"33bc5db0b752b7e0d3710150fbb0449121619692","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/33bc5db0b752b7e0d3710150fbb0449121619692/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/33bc5db0b752b7e0d3710150fbb0449121619692/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/33bc5db0b752b7e0d3710150fbb0449121619692/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/33bc5db0b752b7e0d3710150fbb0449121619692/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n*None*\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.19.0-canary.1ac5b9d4.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-z39fJzHaGgAKIdK/ttrE/MCBRoJLtMj+lxvtgSTR8NrrAH5PWTlXf8UuFwTKbYzD8Tlj/hzhU6YlzsEAiTio/g==","shasum":"0cfb46b96dfdf21c8735710eda2cd14c16ef4b50","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.19.0-canary.1ac5b9d4.0.tgz","fileCount":16,"unpackedSize":48661,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfNDRwCRA9TVsSAnZWagAAG7IP/3/A5own2GquB0jmIYdC\nwbpNa57vO0M2onjajnADfQ/gGNqVVqTYPjmazPfCX0KCrbIGdtxyV8aKYwiv\nb2XDlMd3JoCM9LrtZdhEEv26zuOkqm6KCYXv4izvkRtaUbXhGIblMQZoPEp0\nMrE+m5mNqiMhCjiHIPVVaGGfinRE6xmZa1y5YBj+Ma6QwMwbyThekF+z37MX\nA7LOoF4bDmqYbryWmWFh97u/JzYN6n/i1ZvFT4LJnwKowOUx8NmSHXsZ/3zt\n/Bu2tEyo3LYh9jPgm0HzzjY9Nk7Fw6jsqU2itv81ffLPp3AsGbHja86n9Lr3\nTMVoG0P6bNgwntH76UeCKIla571liOhnZ4gFcwhQ7l+UJyWzz0vFbssKQCsa\nCPrm3HPdP7CtzJh0KvwDWurFH5xcQyGAE8FmmpZFaB+WGQ0PBTCaXsxx4cZv\n3EkSRSwmxXxk5emf2JqwI5/hapAYSGH4wiOT0/NfW5W5s5RM580bDeXQcTHN\n4R5NYIlc1sJUa984eoTVmTPHqb30kaIh9kv3vYH3xwr9RHOeZqO9om0Iwlmq\nCgHezc7oXctCW5wO5J5wPu9p2tNtdky+hQBC3oj8WT2ESRPRR2mQa1UPDDhs\neZi/5HDpcVXrfn0ewDhDeSYay0cOMGUfOGukfovxUiG2PcoqwS164MaLkKdM\nb1CD\r\n=nWJx\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCBtz9+jgsmvc/usesi/YGAuiv9OqMEaqqJCGpZhBumEAIhAOV6PWYf01ZeT6ujF71K07LZpj0sSgxDrlAuClqzL+qd"}]},"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":"sayrisuarez@google.com","name":"ssuarez"},{"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-formfield_0.19.0-canary.1ac5b9d4.0_1597256816344_0.14453046428555116"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.f17f5052.0":{"name":"@material/mwc-formfield","version":"0.19.0-canary.f17f5052.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=8.0.0-canary.85a5272df.0","@material/mwc-base":"0.19.0-canary.f17f5052.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/mwc-checkbox":"0.19.0-canary.f17f5052.0","@material/mwc-radio":"0.19.0-canary.f17f5052.0","@material/mwc-switch":"0.19.0-canary.f17f5052.0","@material/rtl":"=8.0.0-canary.85a5272df.0","@material/theme":"=8.0.0-canary.85a5272df.0","@material/typography":"=8.0.0-canary.85a5272df.0"},"publishConfig":{"access":"public"},"gitHead":"837a87ef49533f905c92ab0aa9faee12e51ea3da","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/837a87ef49533f905c92ab0aa9faee12e51ea3da/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/837a87ef49533f905c92ab0aa9faee12e51ea3da/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/837a87ef49533f905c92ab0aa9faee12e51ea3da/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/837a87ef49533f905c92ab0aa9faee12e51ea3da/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n*None*\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.19.0-canary.f17f5052.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-WwyjoY+tC5L+eGDQTrcdr//3ao7lMwwaqCcyM5nMvzlE+9C7s9uch/nuygd+ggOKBan7aa6yywee1E/tv3wLHg==","shasum":"229b3bc470ea259caf1fa166b4b7f119fb51ba4a","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.19.0-canary.f17f5052.0.tgz","fileCount":16,"unpackedSize":48661,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfNXTgCRA9TVsSAnZWagAAA9MP/RpxN3Hy8wBYyx3AUlGb\nrrrKoPVoVne2KlqNv1kBY2w3oYLG5i7K5CE08rs+LV7FtTTYbO8dJ5+Krmdz\nc2kWbW9zc/iZBKfzVTMH09GAtvLZ5/DPyrtQAlrMYKFZuYaiyo0JKbPakS3a\nXambp6G7gwiWUlXe/ysHvaZpPX+pmussffhV+9cVyKvFmaygYloPnF9OzHti\nivvE3zoFRZhftmOq0S5ff+JmfGPhtgsa1iuX5KXTlInLu6fGReYQCYw/JdCY\nGZU+ob/AEA9vktID+1FmNLWgUsA7JstPXAGMX6E0NXH4KaEqV7yjL0zotNGF\n8tmM0RXoELFoTBI4RxZQxdKfGBY3cBh5QeB4F9cbLHH272wsO2hRkSRpSrxw\nvG/0Zxw0G2ea1ml/fZp1j8fXDKXiHqgPg0V+AZ883uzum4KWKVu653Sx6lSG\nFvgpNQGVF3msrXPj8Rhabt+I7huPD+ulWm8TcWZZ/4u2HGKaT/xaTo/MdmdP\ngYKyg+lRCPmygeiZTYH6Y5++cgjFQRBNeiOt5yvKXxsenKiohZwEfKXi/HUi\naxGpgLgXZoPoH8JS5D/EHGRrKte0NESfBxaSH0eueuxAtsLoGPPHzVkpLXro\nX9SePHMg3OKUEKJ5OKPVQWG1amsbL5UfHGRkFbxMom5P5tfPyeVYypiOgsUQ\nSZdF\r\n=yJt3\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDhEXKIZ5FBCrrHsa5KqjBFHG2FWVTTZrM3t5PL6dyYwQIgLg+JOJKS1AQqDAC6oYyAkiY3yRjbUtE90VLChigkIaA="}]},"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":"sayrisuarez@google.com","name":"ssuarez"},{"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-formfield_0.19.0-canary.f17f5052.0_1597338847497_0.19733213085049028"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.80b5d20d.0":{"name":"@material/mwc-formfield","version":"0.19.0-canary.80b5d20d.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=8.0.0-canary.a1dcfe97c.0","@material/mwc-base":"0.19.0-canary.80b5d20d.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/mwc-checkbox":"0.19.0-canary.80b5d20d.0","@material/mwc-radio":"0.19.0-canary.80b5d20d.0","@material/mwc-switch":"0.19.0-canary.80b5d20d.0","@material/rtl":"=8.0.0-canary.a1dcfe97c.0","@material/theme":"=8.0.0-canary.a1dcfe97c.0","@material/typography":"=8.0.0-canary.a1dcfe97c.0"},"publishConfig":{"access":"public"},"gitHead":"2183b66216f3cc82a57427b3aa805795f18e0925","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2183b66216f3cc82a57427b3aa805795f18e0925/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2183b66216f3cc82a57427b3aa805795f18e0925/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2183b66216f3cc82a57427b3aa805795f18e0925/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2183b66216f3cc82a57427b3aa805795f18e0925/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n*None*\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.19.0-canary.80b5d20d.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-LivhCpuDWpqOLtlhSKk0PCxm7yHMSmFHA/lWCKbFggVZ2Yr0zCEleWYCWxtFn888pxFpCHtkjj2N4tyeTvsCiA==","shasum":"980689a10569cb7a0d475b1363fd4a9300c4529a","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.19.0-canary.80b5d20d.0.tgz","fileCount":16,"unpackedSize":48661,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfNYOUCRA9TVsSAnZWagAAv60P/3h6BZkdP0OuPXHyqaYd\npNxVBKV7Fwzs6T8jBmCqIVlkkTsQ4sMumAB24n0GTsKwZKbTUj4AOVG9JiH/\npumM8Hr9g+Xh5SDEcjzjzfMjujnDycH1W1Ab003g6bXYK+zPF4TrTbbu79HL\n3hwwQKDxhCKmn2Ibwl0FUUagT893tT4QGN/kGgUSSZiMQO4R5woYwUGyzrIP\njMiWCLrCcP+Gtqvb8eefprzYq30QXb/oyHaz8GiG7he9FBz65rokOLb/eMEA\n9+2CgSFChnQzLv13Jlkq+Duq57L+fheKG61331aCl44buP+Y9SpogHbImv2e\nROUG0EgEGw0SKYk/VCE/1Wld1As665ow6zVn/Ia9aqPl9bBD24426NTD++cp\nTNajHslbb6P7O9VUEnsbxe2aGy89ftqiCnVlvbt/UXA2fan0WcrA1jEiNUm8\nyiypflflkQlwku55GiGIMTHiiGMkIfgsas/gnvQYN3TvB3D3/D0JPjX35v11\npKS1pinWqlapj/MQlmLAoCv+KDetPpeO66GBVtWVgNlMcaqoifVT7fuW1GjW\nQidIYSr7M2+PenB+MM8dCcVhmmhyNDj02qpXg2v2jYG8HeZNGIx4bv349vwe\nzJ4f4KOt4qtMqoCobs96uKHy+MDCrws30XtDAFkSgbGelIf0QRoygXT8tUFJ\nEHZc\r\n=KUku\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDMgyBkqNIfXjB3JODUr3aDF5BCMTjZjLBObWt/1jbIQAIhAI/Qnsri/jEHC/43l4BXFodg5jFRaSp0I9dwNnUEz1zf"}]},"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":"sayrisuarez@google.com","name":"ssuarez"},{"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-formfield_0.19.0-canary.80b5d20d.0_1597342611501_0.8166943005351135"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.758635ed.0":{"name":"@material/mwc-formfield","version":"0.19.0-canary.758635ed.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=8.0.0-canary.a1dcfe97c.0","@material/mwc-base":"0.19.0-canary.758635ed.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/mwc-checkbox":"0.19.0-canary.758635ed.0","@material/mwc-radio":"0.19.0-canary.758635ed.0","@material/mwc-switch":"0.19.0-canary.758635ed.0","@material/rtl":"=8.0.0-canary.a1dcfe97c.0","@material/theme":"=8.0.0-canary.a1dcfe97c.0","@material/typography":"=8.0.0-canary.a1dcfe97c.0"},"publishConfig":{"access":"public"},"gitHead":"dca431ba367368af1f858369557a0bc5db6783e2","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/dca431ba367368af1f858369557a0bc5db6783e2/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/dca431ba367368af1f858369557a0bc5db6783e2/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/dca431ba367368af1f858369557a0bc5db6783e2/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/dca431ba367368af1f858369557a0bc5db6783e2/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n*None*\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.19.0-canary.758635ed.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-q+rXI0UV88JRGdYinBTpb9Pg8Ce+Osn+Kao70/7cYiJyqBa3tW/f5cSgL9MRSwp1MktS3M8cfzIWvtqH3bNzrg==","shasum":"aaafdb516b46a8478680f1899ca19506dcc907ec","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.19.0-canary.758635ed.0.tgz","fileCount":16,"unpackedSize":48640,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfNsbYCRA9TVsSAnZWagAAp/EP/ie1PoKzOuooqEJ6Ocnm\nXxBsSzFhrDnSEb6aF+Yte3AB17gD6f/QNS6c1llCFJTAT7zrPmcYAyvY4Qov\ndIynrpBRU039RBUzH1VbB12R2Bk5y2SpjlmrumU3JBnwsiAhOAELyF1E4mHG\n6b5InSXvpOyWDR1eVdXXjOJcXRqzIrSfmrZZO7ZHX5u/syaoVAYGXKpOG9fN\nrfeKHUabOmxP/Xsig8INsPPB/9svVsHk3xIroqhz6i1Vb5IhAohLI6sojhZF\nI5yYvd8tVyFFpZVPLlizIjt7hmq1ja8cE4nHHiH1PU3qvSuGY+iJjnqqGI6p\ngVODOww1gCQzz55xXLGoXbKKTvgEtsgxdyNot1SxEXtuYmJsodT3LxwHFVR5\nG7wwoU+Zfw1SAkyjBH7mzD2oEr/q8HUr8Wrjk5Om92+i/8YbsAmPMWHBD0Jo\nCf3e855E6izazbveVNAIyF8mRnpofnsy3pyfSgxiqdpZ0cVHCmX+uNjxkMhQ\nk0DUomp/q2KiMfGRZ3x6aAyslaYc37/4EF4e7oW48lkwPlNJARXACrYZEZMI\nQvhEAZXGElEu3zbnidMXOQuKDQH03dCrnNPVbmWI4EwH2GpNxZ58JIjJ13h1\nZ9Q1x7nAgpY3/oSZ904Y8IIzEGcRUNxtjfA3DnOcAITQ4CroJxAMO4jm8alb\nLe2N\r\n=CZDk\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFWlh3lzwXmcyi7nbUKIB1rj9XpYXvxdxLcG7J6YixTDAiBdV61YQnRoXKpJj0miSAqRjf3yZ+8emhnH4D0vzoyecg=="}]},"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":"sayrisuarez@google.com","name":"ssuarez"},{"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-formfield_0.19.0-canary.758635ed.0_1597425368512_0.7296143743022263"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.18d6b808.0":{"name":"@material/mwc-formfield","version":"0.19.0-canary.18d6b808.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=8.0.0-canary.150f427a0.0","@material/mwc-base":"0.19.0-canary.18d6b808.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/mwc-checkbox":"0.19.0-canary.18d6b808.0","@material/mwc-radio":"0.19.0-canary.18d6b808.0","@material/mwc-switch":"0.19.0-canary.18d6b808.0","@material/rtl":"=8.0.0-canary.150f427a0.0","@material/theme":"=8.0.0-canary.150f427a0.0","@material/typography":"=8.0.0-canary.150f427a0.0"},"publishConfig":{"access":"public"},"gitHead":"7eb789f1eb17355bf97652cfec031e407c9e2fc4","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7eb789f1eb17355bf97652cfec031e407c9e2fc4/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7eb789f1eb17355bf97652cfec031e407c9e2fc4/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7eb789f1eb17355bf97652cfec031e407c9e2fc4/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7eb789f1eb17355bf97652cfec031e407c9e2fc4/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n*None*\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.19.0-canary.18d6b808.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-NjRGaqCYE7+xfFVtzN8Q9b2+ggAt+IwqelBVY+rhD8zYTHBxH8DW8reAT8/sfnknL+5LMryQ9G4Pr00eQaIxRA==","shasum":"74d8beccf4fa9ea2d179ca044aac5d9be88b4d6b","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.19.0-canary.18d6b808.0.tgz","fileCount":16,"unpackedSize":48640,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfNxk8CRA9TVsSAnZWagAAt7gP/Rab411BoP9NHAr+tgZ0\n7hVJ/CgK/J08x/qNQ2ouRBg2Q1tXbx2+7qKRGx6x/VNkAxkA0PMwY9ITECSX\nPqcpatTw/nt1Rlt7M00ptWNvpFf/k5W8eQXQDbaZkXSCbykaOpR0ApBlYjpC\nD/AYkOp4OFBPwfwZx84XyNRs3xSNkQ+3wvKDagXz7RC36SbtD3JbHpSsQU1h\nx57rYq3aeBj3D+JCxcH3DKb/ZjbiWGwjttrmeNBkXH1j5bU9WROed8VQm5ZV\n4UfK6oLXZowO//87l4Goay0qIWYO0XrNci//9RUIFZsZ1pxvS4LfE94pgUE3\nPUV0OqZnUdsjRs8gQBeSzOmbHLZoyAEKtF5s1qW13D9MZATsC9vPsuKJmvAH\nuU2CcTp9o3D6g8OGrCCAe5AEr6W0il0HPLIym46AqmEGEaEqUNgDPKvCvrlX\nJbIDerC7rQacxs1SBY4VKgb4ErUg3c7kRWVOPb3kXhA4FOBvWhOSE257Ys/B\nrtFiJ3QV+M9JY/KmTUad4cKweBmV2Dp0icYGc3tKfkyJyZk6aYf7Y81laaLI\nLn+JUk+brpnLkaruNr0wcOSSRjKNRftjN/Lu+aK2kOsHpADz1XFk9np8lgwP\nKi8Rllj3ngRcayAriqpQZvzOjKyRma6AV9KJz8N3BNCT2yO+M9KCdJAzfgXL\nXmJN\r\n=iT/D\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIF/5jTgBOhbDnogIpXipZPfYlC0QK5y602xvSYExW7IeAiBE0iGEogYxywt1KzJyuFSCmVzWtlz2tn7HpoRD6MuPZg=="}]},"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":"sayrisuarez@google.com","name":"ssuarez"},{"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-formfield_0.19.0-canary.18d6b808.0_1597446460159_0.7559043326573862"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.5f8ffbd1.0":{"name":"@material/mwc-formfield","version":"0.19.0-canary.5f8ffbd1.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=8.0.0-canary.150f427a0.0","@material/mwc-base":"0.19.0-canary.5f8ffbd1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/mwc-checkbox":"0.19.0-canary.5f8ffbd1.0","@material/mwc-radio":"0.19.0-canary.5f8ffbd1.0","@material/mwc-switch":"0.19.0-canary.5f8ffbd1.0","@material/rtl":"=8.0.0-canary.150f427a0.0","@material/theme":"=8.0.0-canary.150f427a0.0","@material/typography":"=8.0.0-canary.150f427a0.0"},"publishConfig":{"access":"public"},"gitHead":"c230db638d0171f7a47ff1f312ecc123b9bea4e3","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c230db638d0171f7a47ff1f312ecc123b9bea4e3/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c230db638d0171f7a47ff1f312ecc123b9bea4e3/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c230db638d0171f7a47ff1f312ecc123b9bea4e3/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c230db638d0171f7a47ff1f312ecc123b9bea4e3/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n*None*\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.19.0-canary.5f8ffbd1.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-5DwRHihyOQ9EtE7iUvSBA5mzqRGURgphO2YPg+MVAw2+Pg+Inh85bx9gQ6CcSwwFzw+jwURRZPUpqQ0j2yA15g==","shasum":"040ddd08ff581f33c49b17e9571749419c17be38","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.19.0-canary.5f8ffbd1.0.tgz","fileCount":16,"unpackedSize":48640,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfOwFpCRA9TVsSAnZWagAAbeAP/RiaPZavhwjg7BVSxeEF\nG0F+uuAIIn6NM7Wg0smKVDS2GQv9LF/orgRatbNRdgoyYuJJfoHG0rKXrwJ1\nUoxPqiBafXNqD1wTSWE63b9D8hIXN9Zwy+cmR7rrmg6GJ5rX5KkkGkRpKhLi\njyFA2mkyIVRIGPTsyDkjrIzXq2z3hXvEXWXUCAXu0UGrwRzbyw1jnp8NbAy8\nyj43iFeYwMhPhT2pXF9FO6qQIoja120FuA2YSqLe6teQSa/xMZBBCC1fluB2\nHJjhqkY0FjI+OuuCBOV83cfcWdfkFmmjPXNCzp1sD0CvWYEiSYtgsVhqtGKV\nZbsen6UChy7H4o4nGyAPrCuFHgGFPUplV4P86YyyyRlW2foS9fn/UBClPGB5\nU7WRo/p5lEShh5i24ziTfr9yMLHau4BZR2Ogv92c3nytTT0QXqAfHVPkHJkT\nCt5pWp3X85JGRUlEa6/t9tQY2P46KjmIGhwOmM9tl9Q21sWjvC7afpldqjv1\nNCcPqzt0XIMmux7nvYzzgeSBfFy3KcGAgqbIw7zZO78vG25RoU46koCvazaE\nUVKituTxgTtVzpX3v9VVZpZth1G249LekYXn/V6ccJVdprQq/AcLZ3x66wXT\nY1bd4MgyxYmNbXlo1L9se6/Wv4uS9ygKKCqMHJ7ekmEWr1TpFO5MpTMH5Ey9\naiLA\r\n=pqIQ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDGxcTXLFI1PCgzANG16XyUMZFaFxwH8USWPqpfeWTYFAIhAPIq2yPema/RU0PWHxhPfraurUJVA/dKUIVJy5xps1qH"}]},"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":"sayrisuarez@google.com","name":"ssuarez"},{"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-formfield_0.19.0-canary.5f8ffbd1.0_1597702505149_0.7722079675718079"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.8604d59e.0":{"name":"@material/mwc-formfield","version":"0.19.0-canary.8604d59e.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=8.0.0-canary.150f427a0.0","@material/mwc-base":"0.19.0-canary.8604d59e.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/mwc-checkbox":"0.19.0-canary.8604d59e.0","@material/mwc-radio":"0.19.0-canary.8604d59e.0","@material/mwc-switch":"0.19.0-canary.8604d59e.0","@material/rtl":"=8.0.0-canary.150f427a0.0","@material/theme":"=8.0.0-canary.150f427a0.0","@material/typography":"=8.0.0-canary.150f427a0.0"},"publishConfig":{"access":"public"},"gitHead":"6b87d240089846147032623e302121a478088f7e","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6b87d240089846147032623e302121a478088f7e/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6b87d240089846147032623e302121a478088f7e/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6b87d240089846147032623e302121a478088f7e/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6b87d240089846147032623e302121a478088f7e/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n*None*\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.19.0-canary.8604d59e.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-MK0d/uSzlDfZZxAkd5JzejYGbrwfkDEUQAIGZN4GsFCvwI3Pp5sp4Q0aQIHwBwMn1Sg+uJz5dyaPR0hzVCa1NQ==","shasum":"bac14d649e128958af5b07aef085f5756c8c9fdd","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.19.0-canary.8604d59e.0.tgz","fileCount":16,"unpackedSize":48628,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfOyiBCRA9TVsSAnZWagAAiGwP/0HhTRnwJ/doXb0CUVbG\n7MyL/i1WXW+Or/Qn7mZaU8FzctaIKBWk6nK20pxq6YFQP3y+qsuCRurI6IZV\ndre9OOAPmNkyktswVDxIZ/0PmPH3DNkKyvBpSCB6DdkmMy3DTkkmCyKWuwfU\nQTW1GeAyvlwOaHZhsZu7LxEe0XIdR9w4WgTUgg2W6PCvzulGAARxbiNl9pBs\ne4m3JLgk4c696kD5VRoBBtbNQtJtXaGTiYeSK94B+KxKEF2f6caZ4aV3HUJF\niSEthtan5l03PihQ10aLfo+yJH9jVo1eO3IZCs3a//LhFiU0feuQUF5CQ2up\nkEIaxzFxvxIkP4V4HsyYDiBzRAj/GoxYg2PicqwQBMUk/rLSuKsgcOuDnstD\n3VHE+6IeJWXUNrDlxPqqO7fiqUZjAfc8qK0xmw6x4pgpPgu0vGV8abgMl/Vc\n+LweBJwtXX/qxLDleGqZfOVHubt/neCmXOg9tteyYrCNewNELqNyJeZ/vrlR\n1uXiBJLKX11Ht1DTqw5i4eX4Ee/DtSNIR0UTwT43uXokYlQizYaVxEpHer8J\nta44eXXDIsiIWE2UpTdX9Yo91HPIU31gVG9LRAn13t6JZaFYN18WP18olKKr\nZ/lE34P3C/OiXHn9jZQ2hV3COV6q9+X83tSLvryB46X+9ugYQpWHJgq85VNx\n4ycS\r\n=ldLw\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCID4M4eyDBT3Mp+/kHo1Ku9sMb/4zOUfeCFMfedrpVLd1AiBQ9ovh5z0FfGQrZL2knoiI/efyBLJvaWJY2G//CRMMVQ=="}]},"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":"sayrisuarez@google.com","name":"ssuarez"},{"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-formfield_0.19.0-canary.8604d59e.0_1597712512612_0.8926304918463561"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.1d7d5e34.0":{"name":"@material/mwc-formfield","version":"0.19.0-canary.1d7d5e34.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=8.0.0-canary.defa599a8.0","@material/mwc-base":"0.19.0-canary.1d7d5e34.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/mwc-checkbox":"0.19.0-canary.1d7d5e34.0","@material/mwc-radio":"0.19.0-canary.1d7d5e34.0","@material/mwc-switch":"0.19.0-canary.1d7d5e34.0","@material/rtl":"=8.0.0-canary.defa599a8.0","@material/theme":"=8.0.0-canary.defa599a8.0","@material/typography":"=8.0.0-canary.defa599a8.0"},"publishConfig":{"access":"public"},"gitHead":"e5b1904570278e726a75457dd1d8c9a30c98669d","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e5b1904570278e726a75457dd1d8c9a30c98669d/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e5b1904570278e726a75457dd1d8c9a30c98669d/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e5b1904570278e726a75457dd1d8c9a30c98669d/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e5b1904570278e726a75457dd1d8c9a30c98669d/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n*None*\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.19.0-canary.1d7d5e34.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-Z7tPLHN1Asf+HW1Fgg3vPLKt3CCuMGhYnpnn2+l6fmpUv3prNblJW0bG46T2++E3yBiK4U6gjz+/qXy+V7uSZw==","shasum":"f65b571c0b244d978eacdeb4ae8745116c15cb4c","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.19.0-canary.1d7d5e34.0.tgz","fileCount":16,"unpackedSize":48628,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfOyoQCRA9TVsSAnZWagAAwqsP/iLwREORw+kh+THffEr+\nf67tXrrkUaJIYoSmyID+fBOgUAh7fiRIKDZvFUALCmkRUndIWXUgQfx4jP7M\nqIXgefse+GQPM5dEoJYpJmRjPQJUqhfSLPUrJVZz0Q0GqHnsNjWz+1xjc/UF\nWRXmTlMbkmKZK2xIEhPj+TjHYiXg/I5e9D7EgQAJtCxo7mNZivxg6QqkL2ou\n5B1sCcoDNyIZHXxRvAg7YHmXwD/9RBLXbGkKUni7/H//ICS2oTps7PaKBFGI\ngkaM9jqImAPjPYelmbYKGuGkLGgTtfLtJ2+d3m47Qg5fw95YWNUbUtBLXdhW\nnFEagtejTpycNt/TpOPilHx2JnZKkBSfFGoo0nmIl2XNOUxSf8dy4hQ8bHTg\n5u9Y0SkZB6KenwBqDcAkPmeFQERRDOTeDv+/2smP5MYaFYjfhhOSP9BN/6P4\nnc7sPfxg+H5mfnR07KdomF7Y4okSzSpLEVBbaU6J9UxOLoXD9QaI779ON6/w\nQqJ7uY89oOY8Atlo5ii1+EPhqoqEYJfSsZaBrWR/ygYM70W/U9HcT88EP2vD\n2nWu1/e94ydP82eDUneedbId89YZwjndtKwAdD9YE41GS+B6sMRsrmCsgV1B\nNTmEDGdVHGETJcA4U1qpsGU2ED5cEOENkrubhWMY68MP64HiSeYEmGdKsUAS\nW9Iz\r\n=m3cx\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCYbwbfHYEiPLOv9q7ysc7ORfqABU60A5/eH5QRsBXA3gIhAIMgQJPBjdGQWI+zjnZSBPnu8v8i/QqAh4ZNn9Iao4VZ"}]},"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":"sayrisuarez@google.com","name":"ssuarez"},{"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-formfield_0.19.0-canary.1d7d5e34.0_1597712912443_0.7325404217196698"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.9cc95c07.0":{"name":"@material/mwc-formfield","version":"0.19.0-canary.9cc95c07.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=8.0.0-canary.defa599a8.0","@material/mwc-base":"0.19.0-canary.9cc95c07.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/mwc-checkbox":"0.19.0-canary.9cc95c07.0","@material/mwc-radio":"0.19.0-canary.9cc95c07.0","@material/mwc-switch":"0.19.0-canary.9cc95c07.0","@material/rtl":"=8.0.0-canary.defa599a8.0","@material/theme":"=8.0.0-canary.defa599a8.0","@material/typography":"=8.0.0-canary.defa599a8.0"},"publishConfig":{"access":"public"},"gitHead":"48f9adf6b09d7b2532669f3bb466d2dbc3970990","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/48f9adf6b09d7b2532669f3bb466d2dbc3970990/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/48f9adf6b09d7b2532669f3bb466d2dbc3970990/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/48f9adf6b09d7b2532669f3bb466d2dbc3970990/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/48f9adf6b09d7b2532669f3bb466d2dbc3970990/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n*None*\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.19.0-canary.9cc95c07.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-d7ri60vXsqgEyPoHJdK0c4ihH0AZSobHCzzdgBhGnxIVOZD83zjrGiU93wxY/NLD8LjWq2yq3OmbKyC7dCEM2w==","shasum":"29d7c47d9e4faf65f2d821396b3b2ea7ca3bd8a7","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.19.0-canary.9cc95c07.0.tgz","fileCount":16,"unpackedSize":48628,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfOyvbCRA9TVsSAnZWagAAxY4P+wdHFt/Ih6KT1UZNoD11\nW0E/8VarQkA8ngN54BtcAjZwtopbVhWntYyc9wVitOlj9ErKyUB37GGPIT0P\ndYMk+4jXANeb45iVukFIEkrahJUlhp5HYHzar+/pclI2kTO8F/A5z76q/lW2\nHes9HsumLJxPr8Rr1VpFAAj+rZYPvDGJTr/8fBR8H30QCZTE6DQFlgpx1Nai\nUCPTeYMU4x93tc1xTAVonTyq0EeXR7D8xGs/pTS1T4qIv9HdaqfvM8v8m3yZ\nsY9RaP2KQdvQh8dsw98L/x1b8PlTrDUeRgocdFGxCK8BP8VbhoIIElEkPVBT\nOM1f5B+zX+6PUAmLGk9twGi3RsyhKp++9QhuDVKEojcDl4nazIQh2ZYYKDZY\nC9J+rqU1rPuOFEw+RxPgINGPTYekPIwdCIDkD6gsM6C5y4tTm8u1qGp6YmAo\nlf3dpaCvi9lNA5s+hJ9eAGSAswiBOXSN4wh6ik9L/CzagiPasvoKv9bZc5TA\nNVvf4NVMTobYglvWyQAmQUuS7Zzf/GcM3PWiILwLr6NsEVi07KQBTHpxZ3os\n1mGQTjr23EFZp3loxtgsbnGNRiXd8mWDbw4JOA+5I7HMK8ABFcnG/8EUr19S\n77LKcTOVkCsbvXz3GD6c4FaFdo8e3lc4gGDmbkPBTzmkhEmGB/ZZ8GvklZU3\nNVCG\r\n=EBEn\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC4SnBV3987Fo5fs1F2MPbsBubiuTZDrvLqihmc3GrsfQIhAN7BxNea1VDJs0YLb8XkwPL+JrInVfj3Y8F3lHhaa5oW"}]},"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":"sayrisuarez@google.com","name":"ssuarez"},{"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-formfield_0.19.0-canary.9cc95c07.0_1597713370504_0.6937567073322237"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.9f65ced3.0":{"name":"@material/mwc-formfield","version":"0.19.0-canary.9f65ced3.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=8.0.0-canary.defa599a8.0","@material/mwc-base":"0.19.0-canary.9f65ced3.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/mwc-checkbox":"0.19.0-canary.9f65ced3.0","@material/mwc-radio":"0.19.0-canary.9f65ced3.0","@material/mwc-switch":"0.19.0-canary.9f65ced3.0","@material/rtl":"=8.0.0-canary.defa599a8.0","@material/theme":"=8.0.0-canary.defa599a8.0","@material/typography":"=8.0.0-canary.defa599a8.0"},"publishConfig":{"access":"public"},"gitHead":"5aed2922c67f2ad7133772e74310e121b406dec1","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5aed2922c67f2ad7133772e74310e121b406dec1/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5aed2922c67f2ad7133772e74310e121b406dec1/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5aed2922c67f2ad7133772e74310e121b406dec1/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5aed2922c67f2ad7133772e74310e121b406dec1/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n*None*\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.19.0-canary.9f65ced3.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-jLt7Kt02dwHhoJ7Rt3oKuUQb4wHkTsNk/Qt5OYY/5osJTIocoeLMUEE1ZOTB+LGRWlGNbSRE7lHVYIrIjIrCDg==","shasum":"aacae39eff6026d83ed6fdb145c92ae1693c0b67","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.19.0-canary.9f65ced3.0.tgz","fileCount":16,"unpackedSize":48628,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfPDbsCRA9TVsSAnZWagAAMp8P/jj5yubRwSkIoC/9fnbg\nSKb9GsXY1CjBLjb8aTWN6Dv/kKT7m2oEu1QQrv1jbYpuQvQBGlBYoC00dAKO\nQ8wW7fMHbYXePvb7SwIPMjiFsgA2Kvje3V1aTshGnxyTMe2DJBnoabx8nvoJ\nfzawSQk5IhI9I03h3342X93QAtEX+4m8yjTRa5d95Bkd6SExiu6UZOyaID9B\no45LI4cO3kA9rabIVVGsKMg87D0Hw+usg/3qgddD+T1UcZsRK1FSqGVK3gXb\nImhzZpRdzt/lI7K6miSw/FFhIu0I1MT4PiKZXDLGXmDkS9A7vSDZyVEjHgGU\nWl5Se1Uqd5lwB2DEPr3auCFX5panyTgm/OlCimqidE3rwt+8oy/59mpf9KBY\nwYvq1heIQzZf3EL4ohu+Kh9P1mUtVmUQ51fwTxXvpkT1K2yG89J4ki+k+Hlm\nV4R8R4wRIKtC63pblyhAMqxHxadUVzfyGQRQiwB1yMtZo/WVXeu9b05TKyOV\nnQgQd92N1Sgl7GmVFmn1UefiLsqg7Dl0pWwr6Rvloh3Y+JfgZlRhxOajlLKF\nT/fTECSQkcCzokBaG6h4eCQygpjSd8Eu75PvJTzAVNPSDz19Mj1fn0yb0Pm6\ndVJnJJ/MJO8M7EI6cr8sBTfS8aCgmw1l1tqUuJSdHu2staKCqU1jGhzoOr0N\nOV+X\r\n=Ulch\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD+gm6RnxSWKgoGzjpMlH7baTQZFZEm/afnA0jd4ZwhhQIhANYSlsq1wjbya5mBDMeU0aBX019n57hunHIMLbLOBfs7"}]},"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":"sayrisuarez@google.com","name":"ssuarez"},{"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-formfield_0.19.0-canary.9f65ced3.0_1597781739779_0.5715389008552747"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.5962b365.0":{"name":"@material/mwc-formfield","version":"0.19.0-canary.5962b365.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=8.0.0-canary.66b8ed7e6.0","@material/mwc-base":"0.19.0-canary.5962b365.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/mwc-checkbox":"0.19.0-canary.5962b365.0","@material/mwc-radio":"0.19.0-canary.5962b365.0","@material/mwc-switch":"0.19.0-canary.5962b365.0","@material/rtl":"=8.0.0-canary.66b8ed7e6.0","@material/theme":"=8.0.0-canary.66b8ed7e6.0","@material/typography":"=8.0.0-canary.66b8ed7e6.0"},"publishConfig":{"access":"public"},"gitHead":"454d30885df0a3162dac8184409307ee571c6215","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/454d30885df0a3162dac8184409307ee571c6215/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/454d30885df0a3162dac8184409307ee571c6215/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/454d30885df0a3162dac8184409307ee571c6215/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/454d30885df0a3162dac8184409307ee571c6215/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n*None*\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.19.0-canary.5962b365.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-P3k5P8Nzm6LEj/3tkwGDapfSgENzcns+VcSPrXvzaMnD7uIMxZoVjOf2blv133OxB+m142/n9WBG4ObA0EKlig==","shasum":"ad0b6c51443326555b22ac56c961783b939351e5","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.19.0-canary.5962b365.0.tgz","fileCount":16,"unpackedSize":48628,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfPYtjCRA9TVsSAnZWagAAWaQQAJIFyQ+7OjMpui+1O0+X\n/XFzLUOJz37mR51fEzMVl5fHgHnXd9j+vUPtbSWM2slOmfvU11CfUoEx3OI7\nVcNggmmmyQWhsKUuWACMqh5H1Ulmt+bYUsz236Rc9zPpUHVABQ1cpFTMMu0F\nG97i4AmX6tm6QWxA0iay7R9pVM1AYSkve2jxPx0afnEf7IpU7Mx7qBgER0l0\ntsy4rh6qF/9U8M1mVVrjchga3z/EiIm6WIcIwNIWEB9tGBcFAbLxl5Ys8pBe\nUtejVm5Aa5lA55Jx8aO3WN6tg1tOCrNEwnWNHPwfwSH5vJZR67p4u3yiydM6\nYq6iTo/E1Zd65hvIdAJs4aaio692OwwATBMMTVgYpRX6hRtkDnZNXofe5210\naXZsvQ/sudxoWTKde79L+mFlZRX9kt2PQXmxa6TM8MlW9UIIYuHqdA0X46QD\n2Bx1U3jfWTUoqvS+I6jieqV8rteh5KMTQwmteYm36oIlpH8A+1q3WfaCmTBf\nKL+fCkqIqxBjv+d/G7EFyo1kFwT1sw8hZXQFdwmeYhqC2Wm7Hi8tjVy/G9w+\nzyFJ2+RdSgKk2QbYpt51Qneklt6vOw4VpxEIkGrZV09s9iQosmA5A30Ja0wm\nLr66YkDyBi44GvOPd+Dsimxk8znq8azy4MmV7bmgWm1srHgBskyThaxNyogK\nbphH\r\n=wViy\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFWRIXPa8Vy8TeEtFiH5pBrx661LDzoya6SKnGqDo3SWAiAgb1UYPzsmc4IfwYPAa3lINTeeKVXJATuVxDpPw/IxKQ=="}]},"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":"sayrisuarez@google.com","name":"ssuarez"},{"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-formfield_0.19.0-canary.5962b365.0_1597868898899_0.7475323310054767"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.9c9ec756.0":{"name":"@material/mwc-formfield","version":"0.19.0-canary.9c9ec756.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=8.0.0-canary.da72839f4.0","@material/mwc-base":"0.19.0-canary.9c9ec756.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/mwc-checkbox":"0.19.0-canary.9c9ec756.0","@material/mwc-radio":"0.19.0-canary.9c9ec756.0","@material/mwc-switch":"0.19.0-canary.9c9ec756.0","@material/rtl":"=8.0.0-canary.da72839f4.0","@material/theme":"=8.0.0-canary.da72839f4.0","@material/typography":"=8.0.0-canary.da72839f4.0"},"publishConfig":{"access":"public"},"gitHead":"4c887788f2cb30e8b788a5cb0a1a13dcb78a0961","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4c887788f2cb30e8b788a5cb0a1a13dcb78a0961/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4c887788f2cb30e8b788a5cb0a1a13dcb78a0961/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4c887788f2cb30e8b788a5cb0a1a13dcb78a0961/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4c887788f2cb30e8b788a5cb0a1a13dcb78a0961/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n*None*\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.19.0-canary.9c9ec756.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-siPD6s/DlGdojA5bGvahh5C5YhTnvGDAQPoiIyCjyBss3PRpME0rseypONsQ6461jbY9XgDJ820aEtjjQamEPA==","shasum":"c4a5ac24afa0af831dcb0ce64de0ae988b26ef24","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.19.0-canary.9c9ec756.0.tgz","fileCount":16,"unpackedSize":48628,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfPscfCRA9TVsSAnZWagAABOUQAIx3/HUkYRvz4TGkdULH\nzG1A7emzLI9/bCa8HA+I3C6qeq1NQZ7VhKuIkauFAbsuXJqLDy88jKpr/n6X\np/UeWFjtPHwV2n8lwQd2BU+yi5B1k0LTQWy0QxBzPRIIoPI9v1zGZSOu+7jz\ni5+1kmu+9qXkIpQXzkEUYoTPV/Kf7sI/QA6oTM+yMofjVEn6nJwaUYNfMGP3\nHlygjUAIeUcpcGqI6DarUvABRO4OrIfa01V1IdVaoe5N1O2I8mrdwTEZc0Cu\nRZqR2f5V0ibgJqCiORZuf9PX7L+y/DhlMI9bM7+JN7UkuK+uH5OTDeJIgEiw\nlTvN9ELJg9sJGRdnjV79nGsfkbDtwarCvs8n7gJNz/mFVE3i1D85g5sfDe3i\n3DHtDtNEAxhE9sIHDkrBOq+GcLz2SdFHgvbX8W1xUHYeiZWv44g2snuYmD+w\nCxxHPwj/fsvrYHmm6VCyCG1HdgEWF80ZYiUpFLwnJTcONw9Q+J8i/qWcJbJ9\nSypNqUNXB3rxjaDYNLrN9XWM3NXeGe9BZKTyjM03Q5wLV72YtNzJWREshxnV\nqHe9mpmtfoljwPfBuZtWxykiEjpJ2SWJChsnnqcvIckDdl56fJx8GcyBpS3B\nhRGNP8VuHKlpRLoBjvr8RVzcXRy4Uowq0Ki0VAcY2R4ByJ5UsMte0ID7ZxZP\na+R+\r\n=OCzO\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDcmYFgMOUlJ0YOovVV3FuUQxrODByS9I6Vbd48TW8hKwIgVoCA/y9ADbda0/O8KBwZlyafc/p7hvqq7p+GfsJ1z8s="}]},"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":"sayrisuarez@google.com","name":"ssuarez"},{"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-formfield_0.19.0-canary.9c9ec756.0_1597949727222_0.7136634058202196"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.fa0ad66a.0":{"name":"@material/mwc-formfield","version":"0.19.0-canary.fa0ad66a.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=8.0.0-canary.da72839f4.0","@material/mwc-base":"0.19.0-canary.fa0ad66a.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/mwc-checkbox":"0.19.0-canary.fa0ad66a.0","@material/mwc-radio":"0.19.0-canary.fa0ad66a.0","@material/mwc-switch":"0.19.0-canary.fa0ad66a.0","@material/rtl":"=8.0.0-canary.da72839f4.0","@material/theme":"=8.0.0-canary.da72839f4.0","@material/typography":"=8.0.0-canary.da72839f4.0"},"publishConfig":{"access":"public"},"gitHead":"d4020241262a9309827adc8467ba4c499bfab71f","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d4020241262a9309827adc8467ba4c499bfab71f/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d4020241262a9309827adc8467ba4c499bfab71f/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d4020241262a9309827adc8467ba4c499bfab71f/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d4020241262a9309827adc8467ba4c499bfab71f/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n*None*\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.19.0-canary.fa0ad66a.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-54OBnq3bLbrBCy/2C+bcfVJAy4jjsPidn8uBPE3cXCg0y9eWOIVL7T/iChUCbvf1rPePHK4ButYG6cvm6zLprA==","shasum":"274d5c05ef189947eb55d8181e2f00df5e9a6e9d","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.19.0-canary.fa0ad66a.0.tgz","fileCount":16,"unpackedSize":48634,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfPt5dCRA9TVsSAnZWagAA5LwP/R3Lo5Xik0oSfL7a3LsE\nlkQiUk8WEdK+2jMsNdV9GbttoIdVOY8dpkrDZRJm4YdR24eR65LAniK7yCxK\n5zg+jeWO8jdfRjQKD3o/mNCLp5D7ir6Cwrf6P8Q8C9GR0Q4wfUxsgJcmYgoR\nZDZnJcx/8OlDCkHcypEYmYJg5xPpm0YkGLjvcUILslXpLxV+1ANEv5+RpnCx\nxgl8gc9jZuglvQol+fa+vA2tOUYuPKOUcol5IF00FS9wMz3Xze50qLVB6V96\nlVLorDEk/qaSjJJSZHCSDkvJ7cEQv8lXoZ5JEf2arX57goLx35U2Wc3wS63t\nLV5Hbq1d85kGic6JpbxsJrllpCb1qJqlejinwwblItMjO0s83tEM6M2d9RIe\nn+wi7L9SVxtYb+eLn3mAY12MZhAdPirg6IsENcLI8d6BxaS+SlIkhNZ10AeU\nYKyVqIsIPByFPlJrBSxe70fOs3SX2TMuWynJpaq3liDUphMvzU2YwsX0szA8\nsSrxUAyT/yw2/uq2tk1fqO2OJrWE92x2IF0GBxEx4c1dKFm3lL9CZcl+xQH1\nM6piNFYKYuLDkEIf+QicJLev8UFbDafObbQV2wWRZluQHYebeDAK86HJaTti\n2pcS6hpCAkkHcWyfKV4XrAFlmib8AqGrZsSoadAqqTdseVZuFIZC2wJWyiyS\nA0k0\r\n=3YLI\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIG7octMQERANB7oAiytT9bexgyJJhW4+VoKLhepHdA+OAiBrbdsCJg7X77JLkezkCCsspgcC/fA/xgPoZtmA9biJKQ=="}]},"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":"sayrisuarez@google.com","name":"ssuarez"},{"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-formfield_0.19.0-canary.fa0ad66a.0_1597955676539_0.6135414411546993"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.06ecdd6b.0":{"name":"@material/mwc-formfield","version":"0.19.0-canary.06ecdd6b.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=8.0.0-canary.da72839f4.0","@material/mwc-base":"0.19.0-canary.06ecdd6b.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/mwc-checkbox":"0.19.0-canary.06ecdd6b.0","@material/mwc-radio":"0.19.0-canary.06ecdd6b.0","@material/mwc-switch":"0.19.0-canary.06ecdd6b.0","@material/rtl":"=8.0.0-canary.da72839f4.0","@material/theme":"=8.0.0-canary.da72839f4.0","@material/typography":"=8.0.0-canary.da72839f4.0"},"publishConfig":{"access":"public"},"gitHead":"35a2331f3c8450d35506d4f0b54075d121a2670a","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/35a2331f3c8450d35506d4f0b54075d121a2670a/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/35a2331f3c8450d35506d4f0b54075d121a2670a/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/35a2331f3c8450d35506d4f0b54075d121a2670a/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/35a2331f3c8450d35506d4f0b54075d121a2670a/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n*None*\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.19.0-canary.06ecdd6b.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-BCUsIwifG1t85rUJ1sKWQ74TrAls/xQYsDjChfyWicARCaU5YCP2MkwLHkbayI/fKwRrxBF1zr5FNhaVVnoxWw==","shasum":"c22702b9421f9e650ba50b341f55860cd90490f2","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.19.0-canary.06ecdd6b.0.tgz","fileCount":16,"unpackedSize":48634,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfPuwuCRA9TVsSAnZWagAAQfgP/jRE6oB+cFgXGpP+gN2E\n2xmJeD1tNsHfpONQ0HhUcyo5JbG0uJLu0m6bC4IDeBwMpwnUowHypova2CSz\n0JAbaY60e1WMZtG/vuKbGUseQmxQbmxYz/GgZrS6ehlOXbKVgdFjXITKKlfv\nSAVFfDzGBNN2xxkcMtOeI0GDn2o3T14r9kxk+JihkbSJpZCxn/6/yUuyxZ2M\nI3aLyVfPDsjCWg+0r/ea265QgN4VNgY7NiUtwmtDqeI/d31F4p3g9Ll6PcRO\n5JXkASdahHpft76SeiPUQ9wcaISS1tjU5EYH36vfbgsW3/x4FEWV9cAHIwJ/\nTCCJTj8y3WDBO3zntWhRJsrSAU6mQqi8ZmY2WB7lCxNEKje8Db4iDkqpr7EC\nnnP8W+klpgEmsMUgBqbU0REer7ntbXxgvYQFJo9xRWZZKmhBx8dVZT5ZoG8K\nr8cbSBEDEIwbdew+shpicMHdpvZ+umILivmfbLbbchc1+7dJYgagVVYaUCSM\nmtfmscyTNQ/mP2q4wcHOm5M+f8Bxaq5wDeEoQqwR3s1A0dwWNI74q9TYiHti\ngIoLN5vZoCkDICEwrshDMK/gO16ylVi5lYjWAlBYsCa050u8fp6a9lYf2cr4\nn2zN+sj8rFekvCxemP+YA8KviBwazO5mVJlCr6nhyjlQ6YOjXVUznsTjKYNW\nXUYu\r\n=TMzd\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICUSkKgI0zvM1Z2/rFHBQj+SKZK48BtYJzwK5o3N9bXyAiAyBQzPjs3sufSiElLwgAbEUOD+75g4oLsmgvd9O6kHxw=="}]},"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":"sayrisuarez@google.com","name":"ssuarez"},{"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-formfield_0.19.0-canary.06ecdd6b.0_1597959214031_0.29051611617521744"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.2bca2318.0":{"name":"@material/mwc-formfield","version":"0.19.0-canary.2bca2318.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=8.0.0-canary.95e4eeea7.0","@material/mwc-base":"0.19.0-canary.2bca2318.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/mwc-checkbox":"0.19.0-canary.2bca2318.0","@material/mwc-radio":"0.19.0-canary.2bca2318.0","@material/mwc-switch":"0.19.0-canary.2bca2318.0","@material/rtl":"=8.0.0-canary.95e4eeea7.0","@material/theme":"=8.0.0-canary.95e4eeea7.0","@material/typography":"=8.0.0-canary.95e4eeea7.0"},"publishConfig":{"access":"public"},"gitHead":"2e3f0ca806ce8930df2251177b8dcedb9deaa8d7","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2e3f0ca806ce8930df2251177b8dcedb9deaa8d7/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2e3f0ca806ce8930df2251177b8dcedb9deaa8d7/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2e3f0ca806ce8930df2251177b8dcedb9deaa8d7/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2e3f0ca806ce8930df2251177b8dcedb9deaa8d7/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n*None*\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.19.0-canary.2bca2318.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-uKXEEU3DTe15Z5MGwc9byf/fxffePAEXvymqvNwLrHem4CWlmnvzzrcRyYqq+KI2Rpaeu2n0oldchpIfgnHvlw==","shasum":"064d4a58b324973d16d0e852286de4f3992cd115","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.19.0-canary.2bca2318.0.tgz","fileCount":16,"unpackedSize":48634,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfQAm/CRA9TVsSAnZWagAAoQEP/RtDdONElCbkXK+H09x9\nfnDHeg/wO8cin4m5cXP77GD8FzKdh++z1dznnDCOAqD1ehZoJrZnMPbSUAND\n4GN/+UcJA3VZ8KNs0v/zjXbMQXYqTOLTRI1x1xV0ljtE0IJOMOKOAH9sGUtK\nV4XZZ56PkqicjctVoMU3H6vQFemuG1bC8Lpvm5DcKN91G75QhKKy7MhlbSZe\nHsOrMtd8XonkNtQX+8DboNku+SN0PZXIZwk84lSUK0/efO7EuCkTMNbfM91j\nRyZFjIRV7Lw8aoYMmFQ5GtLNGCgIS55gaLOvANt9TYofnNXjDG6w70ek1Xem\naH3AfQ5Jyn1c5A5bKgFGcGaOaX5aAoEWKxydOluz77tS468iE8CWWqOOBXNC\n4jculJFcF8EGW8nHoqWUkhwxNeN4X7U0KtUu6XM1cccva+7n1NJUCsNCG6GL\n+1nRQ5pii331yIU5QXU5WGtHtIxL8DAi7SmmUNh4EbXmp9XdBF3Pb077L/9A\nEBUC8w7xLul6AF0VJQAhyP2is3uACLZCNKTMjTmNmenMEy1rAWH4+uEkGHHZ\nQa6vkgPkxEWDIssQr+US03uAsO/gV3gbbBzjBDg6PTFzLJxHZocnLE+d8WYX\ncmz9cGWvjQhrsFAOetRmX5V3BuYYGHLk0lJk175yGpBQvJdpANjoiAncvQFT\ndHM8\r\n=e8D7\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCDPKsOQ1FEh4tp/oWMH9w1papD8IhXC2ql7y0f+6ZGogIhAIQCGnczAUrQZP2G4m3vM82AGqY41JEr6qNJyoVRhYzp"}]},"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":"sayrisuarez@google.com","name":"ssuarez"},{"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-formfield_0.19.0-canary.2bca2318.0_1598032319169_0.31940327282555736"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.6aa47265.0":{"name":"@material/mwc-formfield","version":"0.19.0-canary.6aa47265.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=8.0.0-canary.95e4eeea7.0","@material/mwc-base":"0.19.0-canary.6aa47265.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/mwc-checkbox":"0.19.0-canary.6aa47265.0","@material/mwc-radio":"0.19.0-canary.6aa47265.0","@material/mwc-switch":"0.19.0-canary.6aa47265.0","@material/rtl":"=8.0.0-canary.95e4eeea7.0","@material/theme":"=8.0.0-canary.95e4eeea7.0","@material/typography":"=8.0.0-canary.95e4eeea7.0"},"publishConfig":{"access":"public"},"gitHead":"f13aa269065b757dd289dd89367756db80da1596","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f13aa269065b757dd289dd89367756db80da1596/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f13aa269065b757dd289dd89367756db80da1596/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f13aa269065b757dd289dd89367756db80da1596/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f13aa269065b757dd289dd89367756db80da1596/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n*None*\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.19.0-canary.6aa47265.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-3k84DtfEBnAH8cU+j6UbKd13+mWY/YgD0GumHYtmFUJHz+nl9ydCf/RWpznLiqxLRPNoXQLgsHW/DreRAW0VSA==","shasum":"1f45d76ee5250aa1ebdbf468beefa4d1e3b7d6a6","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.19.0-canary.6aa47265.0.tgz","fileCount":16,"unpackedSize":48634,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfQA9NCRA9TVsSAnZWagAALgsP/R1pLfLzKg6d3PJ0WdaO\nP8fCh6HEdcsgDuOnjHgxhCpWETFCLlv3nLsStlxA5aqg/wW8c/hDt2psbnuI\nN94Sjko1FhGLrlssH0V4xensz1iDZzgcNtYm6gAnsZVAW6QAPqJSPlCuzZkt\nPZ1vuzpWw9k11ypHtGt/IhufCivxIiyTJGOhfuWtqZX8YsGt42wLNEUWGRje\nr3zeHM7zwETTovGjg+yKyQgK7ftJUzZdtS9wfHLazuZJt2T29WCns1zZuFo9\nnaLjQAsw3aKVsnTvlGsFl+BC28LJhL2+Hpj2yuMhQGiTS+Dm3R3pvG/zoQxI\nT5QYUK0THF1bKfJW5L2MJAurWfAMYTpoAKo7w6Dt1vV4XMednouhvyo1BBkT\n5fXrTvWA+GqPIH0vs/JAtH4w69Bo6d8XtI9JOpO/T51xLtozFWK+weX39GrM\nfB+gL+MBtoYI0y6IfFzrRifw/VxPhO3heTPE6L51XwCsmgJWFTEooPtzR9En\nuGTg9/qmmh6dGK4dq0HFbx55YS+pNUY3k+lRgqSDxTuFjxqWABkvSj8mIVoq\nSaFJ3DGtLGMDdjx0vMeI09dACJbUKXW1nxN2A9xcb+dlmx0beQqlrnq8jRSt\niYMHDgAKvALKpWwDHRyY5SuU22Lz/7sdERe2eu9vjSmAl27BOOl3uuWREg8k\nyJhN\r\n=2srn\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHdACZR9rvDZBqiMHJk7TcXrcpK6SzSip8BMBJeuPIHKAiASdUF52ll+fAq0cs+1VxGMoestYyG2k4OxhocAaiVX5A=="}]},"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":"sayrisuarez@google.com","name":"ssuarez"},{"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-formfield_0.19.0-canary.6aa47265.0_1598033741147_0.1454485040385789"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.e7202a07.0":{"name":"@material/mwc-formfield","version":"0.19.0-canary.e7202a07.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=8.0.0-canary.95e4eeea7.0","@material/mwc-base":"0.19.0-canary.e7202a07.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/mwc-checkbox":"0.19.0-canary.e7202a07.0","@material/mwc-radio":"0.19.0-canary.e7202a07.0","@material/mwc-switch":"0.19.0-canary.e7202a07.0","@material/rtl":"=8.0.0-canary.95e4eeea7.0","@material/theme":"=8.0.0-canary.95e4eeea7.0","@material/typography":"=8.0.0-canary.95e4eeea7.0"},"publishConfig":{"access":"public"},"gitHead":"9c2f6251cc1ab7c3f27cc51409b86305fd50bd2c","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9c2f6251cc1ab7c3f27cc51409b86305fd50bd2c/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9c2f6251cc1ab7c3f27cc51409b86305fd50bd2c/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9c2f6251cc1ab7c3f27cc51409b86305fd50bd2c/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9c2f6251cc1ab7c3f27cc51409b86305fd50bd2c/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n*None*\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.19.0-canary.e7202a07.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-eZQglck0NSvh18y9bWWBEm71vudkkmBBwqQqaXkxXcKoqdP65ShnDR/emYjMii3v8RUu8jsTKFJ8ev9xO5+QgQ==","shasum":"0a3be1f27ce20ba0117ddd2a0d14494fb6535e88","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.19.0-canary.e7202a07.0.tgz","fileCount":16,"unpackedSize":48634,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfQB8aCRA9TVsSAnZWagAA/DAP/3UeLZA5/ykOGn77NBVn\n/FA6yDLytFh8ECF48Bl08SXy92myHCIlv9nhFlAGbN63vgpIpgxnxP69vlqB\nefIhzbWaqS4X8pRAvSiTYUw4aAMVXvcbMORNS/QJPuQ97jlo93ZFbql1p39L\n0vkJ8qTQoyGm3+vGbCA0S1/w9fE+d+irwOLEsuJslJeoKBQB95f98xiR3L6d\nwEXwnr4Agx7vEf2yxr8IIjJ4yN143NcMOP1kWyzagAnADjaN5+IGaYYrlmNF\nz3Fojxzx2eq488+1+p2rl2KUe9JQlS+A+19LRkSqmGNlI4dLU4AAeUp7gd9g\nmgvjJ6D0raSFEVddKi7cbAFpzW5iynGfVZgUheNkvcZYAcv8rlquM8BVJT5L\n8uYJf5IzaoTitdj8eDRdlr9dDvOJYrnr6OYn2eeYFpeJb4INAFlHU0dpKn9v\nehANvhE8i6moHZS/xE8ITmzuN3TznT70Zk+ylRDvkmBXd7P/E8bB2FGRZ5jh\n2VyNnVFgxeVGAZ6ypQ49J3rvs1ClMHKigoHyQ88RcHbdh/0dzlPl2EsrGFc3\njsuEDUSy0d6blJYPgOyBEmxuAWU+jtF6jTKJ54VYw9UGUWbeZmt1i45i5veA\n2UARWbFLOE4P4uNhVzuYXCEPZDhESVCb7ZS6wgt8gJd1Qkua7rLTIupEQHpx\nsYF9\r\n=sDCk\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIE4kJVr2Ca/84joEh78wbDRf6xdXTaRspqYBpjIdTixZAiA+JYKjBgRT4DyzRgo1mwfTOvdKN5qqFNILkCtxVEHh/A=="}]},"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":"sayrisuarez@google.com","name":"ssuarez"},{"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-formfield_0.19.0-canary.e7202a07.0_1598037786346_0.6203299708268943"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.f208201e.0":{"name":"@material/mwc-formfield","version":"0.19.0-canary.f208201e.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=8.0.0-canary.238216fc4.0","@material/mwc-base":"0.19.0-canary.f208201e.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/mwc-checkbox":"0.19.0-canary.f208201e.0","@material/mwc-radio":"0.19.0-canary.f208201e.0","@material/mwc-switch":"0.19.0-canary.f208201e.0","@material/rtl":"=8.0.0-canary.238216fc4.0","@material/theme":"=8.0.0-canary.238216fc4.0","@material/typography":"=8.0.0-canary.238216fc4.0"},"publishConfig":{"access":"public"},"gitHead":"c666b3346918d8521008d20fa3c20b4cfe3ee481","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c666b3346918d8521008d20fa3c20b4cfe3ee481/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c666b3346918d8521008d20fa3c20b4cfe3ee481/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c666b3346918d8521008d20fa3c20b4cfe3ee481/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c666b3346918d8521008d20fa3c20b4cfe3ee481/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n*None*\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.19.0-canary.f208201e.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-ljTB+WkCVh42C2uoIRlmZjtTfeu6MwCGjPjPDPw7CVmAxWfRDp9i9U/KD1Me8qaymb2r9Xbq8vXwoQMcV5FLUA==","shasum":"571d661835e0e013228848cf061861837e1f1290","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.19.0-canary.f208201e.0.tgz","fileCount":16,"unpackedSize":48634,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfRA7XCRA9TVsSAnZWagAAsSIP+gOHE2gLKQadwzXk0k6p\no0UOH0cIHMVGQeq+MNdaIbec2UDDa7kk7ugmgPiminKEvu4d45VH2tp9d0RZ\nY/8qi5v19GqCXkaXgwkZguzM35HYtPN2KdN0uDRVF1MiMcd6Zj9wSbvmtUXL\nGsiUNJweB9zYatZWTf/I8nwyAhkaJRiH0cHHT4WD+JIgpdB4uwXHGZtvNcCc\nodXO3hlmQo7YBkrgfA4Nfoadb0/6yNW9ibRGqYV+2Tl42n2Z8Fjrz+QRQhx5\nYZgKHGdSG3Y47YP2qDN4Sn3kMBk47ymu0zof95QadnZ8p2rxQ5v2UeKhlK/+\nkooPW6O3bgDWd6nZlAxf2u6nOx/tN9GOb+zxLt0QstZ2qa47ayEP/LAiYFmK\nlxucEspiWnKkLsf3cwUwNIRM7B3Arfzgz2/HC9WWhFo42tdGeU4PWCBozozC\nD7mSnJUADrkHzzNYIby1nhrHsqyShGgrXutqcw2moT5qUMCzEjmajWZZiVQ2\nu81vMQjzHa7F8cSxOvRWfozf0x86xMAznxDTQwwkUJmsy/hVQLenwPOrWYZw\n8GOqlS9TIwKWMZupn9ANhxVdQf38o30yM4OiGcQQbLmP9dvkjm2kZDlRR4TR\n2a4uJWhidJn5bWvO5SBjV6bUTPRSsUTvWUP55X+/5orKpGQ6IRlepa9n9qdx\nMsso\r\n=lteU\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDkXBV1d69HJQpCg/HaB7DaTnaq3Z7zr12qgbv82rWtsAIgfdOvwR/Q1LPkMMlIidhUX9czhZAkTL0jmKyQx3HCBbI="}]},"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":"sayrisuarez@google.com","name":"ssuarez"},{"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-formfield_0.19.0-canary.f208201e.0_1598295767237_0.5568383460035904"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.14a172db.0":{"name":"@material/mwc-formfield","version":"0.19.0-canary.14a172db.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=8.0.0-canary.238216fc4.0","@material/mwc-base":"0.19.0-canary.14a172db.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/mwc-checkbox":"0.19.0-canary.14a172db.0","@material/mwc-radio":"0.19.0-canary.14a172db.0","@material/mwc-switch":"0.19.0-canary.14a172db.0","@material/rtl":"=8.0.0-canary.238216fc4.0","@material/theme":"=8.0.0-canary.238216fc4.0","@material/typography":"=8.0.0-canary.238216fc4.0"},"publishConfig":{"access":"public"},"gitHead":"dae488440593f3d8bdddcbf01a3a6b5343d88761","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/dae488440593f3d8bdddcbf01a3a6b5343d88761/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/dae488440593f3d8bdddcbf01a3a6b5343d88761/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/dae488440593f3d8bdddcbf01a3a6b5343d88761/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/dae488440593f3d8bdddcbf01a3a6b5343d88761/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n*None*\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.19.0-canary.14a172db.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-JSUquU8+riIIwKfoEDGqJ5XNCSagJlnoRsxaiZHYelVl8VeQ+fbt5kjecGRH45d2IzukyqOR64DxlsCxNkeiOw==","shasum":"17337c4b35b44515cc647dfb9f97ca9a19e139b5","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.19.0-canary.14a172db.0.tgz","fileCount":16,"unpackedSize":48634,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfRWrICRA9TVsSAnZWagAA1lAP/Rx8aVVc7o7Wq9rqBOke\niJKzRX3VGHUkoRQ8s4i52gtGzos1BWmaWWvqv9YtfMpyKmcicgN3ZCr5Hzb0\n0b/cEcgMBDTyVo5Ilg+KcOcge2KIcFds7Y9QrlimiwahZXAI7OkYm6YIbfCu\nriBkeT82MADMH4NdKqbxz2KYmEsWjeDReCDjDYNTuNA3vg2pHcXS+zO3R8W8\nbZQRQzuKTtZpj5mXMZmqidQALMQIyoz6b2jIb6FTjxpP8CCcv+IWeXoDjhEF\nlO7uaw2XYb1Y5dboH99HiMgUidKGYL/Pu7K+ZWIBGb/XTQtZLKjsKcHcyruF\n3NDxOdlCd9/aHhhGVa/nOvINIzsHqjjjHZ/4aW3T2fvwKC279Nw0ZPFevBKJ\nWeqCTxMJZ2mWAq7Nk/4zqAoFTYJkOAV0L4qs4kyPbh7iWQe4alCgxxZvjTbf\n/h0s6mEdD4J58PAQ1RSpMH1vy54SbVDVhjP+3Tqao4HNobv0nR3ln5/9+7xH\nAKdt0Ju3qTW5yY/w1LYWlEAkEmfYOzmHtaR+Y/l/jyD3Ec4ymR2jcs594tCC\ntjCc2fGGHOtj/+23jvLn7mI/W+mzSDijoKiNA5iN5XIJ1wVTRaGbQTo0fjcn\nmKJJxwouh7W3Bg5smAWgA2uDAdvlYth8XSmYi4F39Om12e3v0Yi9Gyofnfoz\nNsR4\r\n=A8cs\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCDZ/RthwGS/q/WYQyFae7kYURfSWEC95dhqpdBeR++CwIgNLL8T8EnwiKxMxjQN4T216vPYuFEZTTxiHs9yXT/NOk="}]},"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":"sayrisuarez@google.com","name":"ssuarez"},{"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-formfield_0.19.0-canary.14a172db.0_1598384840238_0.4386556338036871"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.e6c1038d.0":{"name":"@material/mwc-formfield","version":"0.19.0-canary.e6c1038d.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=8.0.0-canary.a1c65593d.0","@material/mwc-base":"0.19.0-canary.e6c1038d.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/mwc-checkbox":"0.19.0-canary.e6c1038d.0","@material/mwc-radio":"0.19.0-canary.e6c1038d.0","@material/mwc-switch":"0.19.0-canary.e6c1038d.0","@material/rtl":"=8.0.0-canary.a1c65593d.0","@material/theme":"=8.0.0-canary.a1c65593d.0","@material/typography":"=8.0.0-canary.a1c65593d.0"},"publishConfig":{"access":"public"},"gitHead":"6629a242b77f90688959f5a54abc55be3a2dae2a","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6629a242b77f90688959f5a54abc55be3a2dae2a/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6629a242b77f90688959f5a54abc55be3a2dae2a/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6629a242b77f90688959f5a54abc55be3a2dae2a/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6629a242b77f90688959f5a54abc55be3a2dae2a/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n*None*\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.19.0-canary.e6c1038d.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-BFtnyaub+Z0hyYalnaP2qD3Sxz9AR/mSJMB0lWXe3ffqFWPVb3GEtnfUzTT3ws1mHRFX6OXkdtuc+QmIwXcadg==","shasum":"9a47df61f097ee04d5dbe83cb6bf20f7eb3c259d","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.19.0-canary.e6c1038d.0.tgz","fileCount":16,"unpackedSize":48634,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfSAtGCRA9TVsSAnZWagAAzRsP/2w4lcM77H0BEYTWOrmr\ng1Le1dagUIdkIk20GtjVPbw+7pQFF4ZjahmKwKchFBfpXhClo7O5J89TqFeL\nNavS8Qj/2Mo5rpkRNCIUBViDUZdo45VCVxu3jBaMudnhPYD8RmvgEo5hBZZJ\niAEe8ByP0izafZ0sE8MJQXYDqjYHKcJDHFnXehTPIoMDv3+BmTlCR/WUZrQg\npMvtQucViGhKPOo6+YjuO6/w0/PPptPeU69Uy9O+iIdMAoiQQYHW4OD4pkjm\nTbXBn/r27sWAtyxMSz6jfAywYYHiz2BbQ35WD9uOdng1y7ZlDF94qsBGAXJe\ncUIKVhS2Reeytbo506Yb8YBtwLfz85juOY0OWRU15SMrkfxx2XRy/AORi+7R\npA726k83PA8pA3MpSAHWsvWZfhNJb2RQpEFw3FDC+qY1oTiTYLxfy+OZhZp0\nYu+GoTZ5BjbWR6cFeNT1VAv0/yYPl56wkuKeP86AYUHKJhVGn2nL6s0AVIcH\n822cc10eBL6sgXeJ9C+CBONIaiPbVrF9KO+N+VO8hzCn25euPxuB6E/50RSo\nwvfXKs4/wdu9QqrxQBaXUxCN4LEzZKDbY3rqjO9REInhDv4jB45E3WFpEdfK\nWZZB6f3IC9/k6Eu3UgcuAsIf5816s50TIvbQdBnBv0TAtZYtLcARP66xYAcl\nNF2/\r\n=vTEB\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD6g9lze50riWFkXf0PaAvwPCyGMi1v9/c1Pqep3YkYJwIhALPeJsKmV3xaHRkwo5OmkCQ0n/IIFsB3h3GhBB/4blSg"}]},"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":"sayrisuarez@google.com","name":"ssuarez"},{"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-formfield_0.19.0-canary.e6c1038d.0_1598556998408_0.6557291756432007"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.34012082.0":{"name":"@material/mwc-formfield","version":"0.19.0-canary.34012082.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=8.0.0-canary.238216fc4.0","@material/mwc-base":"0.19.0-canary.34012082.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/mwc-checkbox":"0.19.0-canary.34012082.0","@material/mwc-radio":"0.19.0-canary.34012082.0","@material/mwc-switch":"0.19.0-canary.34012082.0","@material/rtl":"=8.0.0-canary.238216fc4.0","@material/theme":"=8.0.0-canary.238216fc4.0","@material/typography":"=8.0.0-canary.238216fc4.0"},"publishConfig":{"access":"public"},"gitHead":"2df5ccd57b9ce1a3c2b3ddda99e7e7d8b185ef26","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2df5ccd57b9ce1a3c2b3ddda99e7e7d8b185ef26/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2df5ccd57b9ce1a3c2b3ddda99e7e7d8b185ef26/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2df5ccd57b9ce1a3c2b3ddda99e7e7d8b185ef26/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2df5ccd57b9ce1a3c2b3ddda99e7e7d8b185ef26/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n*None*\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.19.0-canary.34012082.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-9jYYK3dgHPBubC7MKl+9bHRUj2sH5jdW1DTCVxdprEoq/70dqSQXSCp62zJt3DN/d7m3JuSscXS4SRyGD5lgyg==","shasum":"f34318d17f617f6b7c1aced954303a6c0be7d34f","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.19.0-canary.34012082.0.tgz","fileCount":16,"unpackedSize":48634,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfSA3hCRA9TVsSAnZWagAAcpIP+wbzk2LlDyL3VxovVl4v\nXMJuhXacqSbtQC1MmL0TZe+RcmapwhRF+VJWDhdbJvtRRVCoD1XF5e/BSbXj\nN48fP77gftQejVmw+H4TGSJsxD1ZAjCPh0Lo+M3+D/ipJS7CQEqK4H85ma1h\n5IDDYbeNiChoUtNtfw4As8sH4wOwFNm1OD6bxiNdRT5loknVB1v1T8uDJ5bV\nvmtctPB+x0agXzYuYocRxXJ5/kuLwVEezWU5beCAdpi5glZB1y6LkAXGz2KR\nT1gBOWRRsoTJyFmCJaeg1DVeTsPhx6Q10gJb9XxVo1RWK0pq9D2zYub0cZy2\nc5gbgOdR/VYdg0Z/PZCIsEk9Jd8hKIUKEYvnSiatqtYqEPWAG/zhpaVkVjXv\njstg91okjxTC2l7NZb0txoXD+Yh4MYArOIpdDNua7nS0Nyx7Flh6EiWu7eSd\nmpGWV8zMBh7xF4LyjG/tH/sa9D25GJLLaIXsIUPyDrhnlg9fiWs483QEMCKM\nrfFHWq2U6D84Kof2rJ8FOJSzIUjYawCS7sK6fxDoThLS/DM0aSqDsygjE1YG\nHUX/BrksgCdyLPcx6V+1MDhSjAhrDmrAFspYSwX9ed52m5DBRStioGrdgxBW\n1YJxvBck9Q0x1HsFziV6Ly7ZjDi6Qol3jls7A0cov6MYnD2v/stUkVQO7SQu\nCZjJ\r\n=Zqfm\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD9QWpT1xlaYdLScdaNOjSA+DoFzQoUmLnbozUEwPvYYAIgNK+bwCrARDRV/2R5MjD3CYf6gU1ZpZc4CJmNDaphxM8="}]},"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":"sayrisuarez@google.com","name":"ssuarez"},{"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-formfield_0.19.0-canary.34012082.0_1598557665353_0.9247661069188837"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.c073f7b8.0":{"name":"@material/mwc-formfield","version":"0.19.0-canary.c073f7b8.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=8.0.0-canary.911014711.0","@material/mwc-base":"0.19.0-canary.c073f7b8.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/mwc-checkbox":"0.19.0-canary.c073f7b8.0","@material/mwc-radio":"0.19.0-canary.c073f7b8.0","@material/mwc-switch":"0.19.0-canary.c073f7b8.0","@material/rtl":"=8.0.0-canary.911014711.0","@material/theme":"=8.0.0-canary.911014711.0","@material/typography":"=8.0.0-canary.911014711.0"},"publishConfig":{"access":"public"},"gitHead":"e16d759d8a3de4908c04fd08603483dbc37b1747","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e16d759d8a3de4908c04fd08603483dbc37b1747/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e16d759d8a3de4908c04fd08603483dbc37b1747/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e16d759d8a3de4908c04fd08603483dbc37b1747/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e16d759d8a3de4908c04fd08603483dbc37b1747/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n*None*\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.19.0-canary.c073f7b8.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-QpMIPlSp48mqXVQWtYnJoIAhAIfMFjqy+W2KEz+P+pme6ylBiAd4jO7UWL/ITSzqg7LQJIwMnobVrn2nHL5JKw==","shasum":"00e7b148304df89f42a383d56a0eea761a1fee10","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.19.0-canary.c073f7b8.0.tgz","fileCount":16,"unpackedSize":48634,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfSTrTCRA9TVsSAnZWagAAMyYP/RE80fRxYEUgnoxfxnv2\nHxSiA5FeeL7YZD+JNOYQCTUszMkBPsywYGnMWa2UeDVvmK6kJgDofSTWn/b3\n6LAPgMJZ6hDwEsJKHdko2ymhIE99ZOmQVSave1OdEZW2Q3DDuC5XjGpLOI6x\nPVImBjSopVGle0FGmU5TGm5C9AYzNhCn1mKvmVuilso/yQKyrkNiemzY9x3T\nffoYlhHyccAzz0znC+QXWcjq59oD+hap+n3siCHhXw6LvJkBwSurxa3NG3t0\nlYkh1oJ1HAf98/jHdBnBaQpRetICmszYUpznfp7KgWpsTVvsYYhzr+M2nU9q\nnyvqXvwRVyLxCmEN+z9p2W1PqBich9z08pE5iCgsbSvHGGmRyIKnd3zmnpu6\nJGJGLt0sLoIXbMiWLwz1QTwHezmpNglZCcBVWUzQyL0wzFt+o3s/NNQ/38NG\nPfDqgaRiFQAlQyy+TdGItVuGzCPrenc0fDABBOb3T0vc1yht+850dq+7BPYx\nkFxH37o1pnBvYPCmKGUB0OPXzDG1PJ1E5BNU36hdZjcL+VDpydYJXKOC+11I\nbrxTQsS0oSQMq0DSS4UmV0llXATeMBzZauwdXzNl+ERSbPg0X6Q3zO2h5Ica\nNYj9F7qMGvj0CCZmlGrQLZIWtS/SvNXK2HB9UEpCy0dOm/Pd0zVPjJKrSUBf\n9lqw\r\n=4OjK\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDM8hR5tbt4r3ZMCiIjTg92oxooF3vPK23MeIMQO7YRHgIhAOy/R28pMdlaaR5pe9DMGE6qOKr9gQV4eEMrjj78VMWR"}]},"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":"sayrisuarez@google.com","name":"ssuarez"},{"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-formfield_0.19.0-canary.c073f7b8.0_1598634706693_0.9421526150774651"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.b7ae68ff.0":{"name":"@material/mwc-formfield","version":"0.19.0-canary.b7ae68ff.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=8.0.0-canary.911014711.0","@material/mwc-base":"0.19.0-canary.b7ae68ff.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/mwc-checkbox":"0.19.0-canary.b7ae68ff.0","@material/mwc-radio":"0.19.0-canary.b7ae68ff.0","@material/mwc-switch":"0.19.0-canary.b7ae68ff.0","@material/rtl":"=8.0.0-canary.911014711.0","@material/theme":"=8.0.0-canary.911014711.0","@material/typography":"=8.0.0-canary.911014711.0"},"publishConfig":{"access":"public"},"gitHead":"2065ba1bc7a6ad7aa6a2c0404136a31018fba984","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2065ba1bc7a6ad7aa6a2c0404136a31018fba984/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2065ba1bc7a6ad7aa6a2c0404136a31018fba984/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2065ba1bc7a6ad7aa6a2c0404136a31018fba984/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2065ba1bc7a6ad7aa6a2c0404136a31018fba984/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n*None*\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.19.0-canary.b7ae68ff.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-JlrGOF78N3FjZ0KgLPOPmHF2cV7/JZaiyCEUoZ/eQ/r4Vf1jVqVZbedD56OpoU0dtcsTAxFETDVeABJt04QMJg==","shasum":"4fa8b31a2715f2f38a190638003021ca089dafe8","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.19.0-canary.b7ae68ff.0.tgz","fileCount":13,"unpackedSize":40286,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfSa7SCRA9TVsSAnZWagAA8foP/RRc/na8FckR87g2doGi\npAVEiY0gBG44Gr9su1JI5rxjS6XBFzYneqHD6EobPuX5216eeFClaNw56mD/\nfwbxPMe9G0DlPvpwrRM/LXfkQ0ne2/P46QJgTWix9DD45PaoXW9jQW6fqdVD\ny5BMTkCJJg2ifPYk1UeaRxMg4flrdB0dTd2UbpL4Pq7KZxbDNH6MKuqF9HMY\n8DxiFCirilJtVfTjnETZdaeY6wxG3qVGSLqO3e3vQiqH/HtJG6qSawQBB22/\nZtLMGCZ25a8+YrCyB0k56vUpG7dbtd/k00mEY33Wopcqt7GEw4cKXpneQjly\nOkyS71LVXsjDo7VzRN1V9QyiGWAzg1FAOj4h6LPrpfezaZcZEK8HHMytZXVh\nd2ruyIk1Kedrz3tJlcqfW6hZfZXqU+Cm+hq7YRLjrxjwDLtaoE5+H7i7pUSq\n7ltzxY/RKnjneIgnwDKc9NQP5v2AiFFbTgM1aawlMUZ/PyBYBmmmBR6huYmx\nmVGBhX+roqjG66kXQRy9vsJcwtWmqhEymKJFg/KXAQ6C1+n2U7rRwV4jvwzG\nXjNZ8ICo36jt/0PQrul3JuKw0L+6DjGih3ZytDENTZrOfie0Sl4BZGkeTWH9\ngK8Toqad3T4/J69Xl0hX6q+zLskBJV9KVZkQFk0QnPjrlb5nSLP1gBILndkJ\nGkis\r\n=rPJl\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDfDCmx9AReESu12TYg7Y/YFqlJ6Yw0KWHPuu0BT6HooAIhAOF3U0FUuumejfLOEn4FAYZSaoZsAk7VxkmhxcT/6Hbr"}]},"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":"sayrisuarez@google.com","name":"ssuarez"},{"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-formfield_0.19.0-canary.b7ae68ff.0_1598664402315_0.037530474462546426"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.697e3879.0":{"name":"@material/mwc-formfield","version":"0.19.0-canary.697e3879.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=8.0.0-canary.911014711.0","@material/mwc-base":"0.19.0-canary.697e3879.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/mwc-checkbox":"0.19.0-canary.697e3879.0","@material/mwc-radio":"0.19.0-canary.697e3879.0","@material/mwc-switch":"0.19.0-canary.697e3879.0","@material/rtl":"=8.0.0-canary.911014711.0","@material/theme":"=8.0.0-canary.911014711.0","@material/typography":"=8.0.0-canary.911014711.0"},"publishConfig":{"access":"public"},"gitHead":"beb4a106ec95684b6ccc8c4af64c083d8462c917","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/beb4a106ec95684b6ccc8c4af64c083d8462c917/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/beb4a106ec95684b6ccc8c4af64c083d8462c917/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/beb4a106ec95684b6ccc8c4af64c083d8462c917/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/beb4a106ec95684b6ccc8c4af64c083d8462c917/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n*None*\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.19.0-canary.697e3879.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-qdl18VDWhqQH6u/afxvgapILnAB8pdNObxfJhMRi8ED2ERY+eGEA+zSyBRAhz8B1qXMdKm3WRj38deJyyLgKBA==","shasum":"545e24337777a05f1116a83ba4d6eff62139377d","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.19.0-canary.697e3879.0.tgz","fileCount":13,"unpackedSize":40286,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfTuN6CRA9TVsSAnZWagAA3qgP/i/KE1QCnnukKo+KkZ8h\nyouqBiZag3bSDKPwb89IeoZLIY8GM58a9F65lCTptDhXP8qYUTKfDBPg7Rgf\n0VT1Nc+vuudHe4OERqafvMOmAqFCqBMG5NzM2kM2I2ee4pIEGwo1e3OVNyeM\nb/qoduc1qcFHncirv94povpNODUnTjBnPdthnsbPI7wm8V3HI94GhL1MkzAk\nL2Wf8J/CPYD4LL9gynTu3J6JtViIPdgI65QTvgfKMJCs4yDNyhYue9Y1K62M\nXwWWZr/ghwbSsCT0uBiINixryaONbskApRI/rXgyOttnJ8DNlo2KesDtCYq5\nGLC1UlLnGzAY9PZIvnddzNv8G4pInk/CcOzMZcsgU4Y5AEo3F1VHNYUUyfV8\nFQxWEhgq/+z60ptavfyCEK428sZBn6W4I+p3Owa8ga6IW768r1LbYxMcu1c0\nzRH+Vdbl0orb1Yj3+LDca5IAZw5XYM1wN2RU8QFHmQMGyJZVS9kdI/jTGqUc\nxtszgRL0lCMDeRCci1h5hqQaytgnBjIWVszNL9EZC0hl4YcYsapJ8+8V32g5\nJrRW+V1LVo2IFwysK0vbcNhuguAky1ITAxY+D4g3n+Kvxb5qpi8jWqnK+Hhf\nkvPMO8WwMXIgb/g1cGobgFnZv+JtRRtfkTpzw8adtWQmPow/REb0KtBIMMuO\ndVzj\r\n=OgJL\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCQiIow8jOwrk5o899b8JDBCzVQOy4q4E3L9v9u67XepAIhAL2hJvJXr6QWXijyY5wdBGDGltLw1Na/KNNr8IR8OSlp"}]},"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":"sayrisuarez@google.com","name":"ssuarez"},{"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-formfield_0.19.0-canary.697e3879.0_1599005561778_0.39401441006385785"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.eafb7991.0":{"name":"@material/mwc-formfield","version":"0.19.0-canary.eafb7991.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=8.0.0-canary.911014711.0","@material/mwc-base":"0.19.0-canary.eafb7991.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/mwc-checkbox":"0.19.0-canary.eafb7991.0","@material/mwc-radio":"0.19.0-canary.eafb7991.0","@material/mwc-switch":"0.19.0-canary.eafb7991.0","@material/rtl":"=8.0.0-canary.911014711.0","@material/theme":"=8.0.0-canary.911014711.0","@material/typography":"=8.0.0-canary.911014711.0"},"publishConfig":{"access":"public"},"gitHead":"98841f8d9a2c624210fc6f0bdb87082222279e38","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/98841f8d9a2c624210fc6f0bdb87082222279e38/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/98841f8d9a2c624210fc6f0bdb87082222279e38/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/98841f8d9a2c624210fc6f0bdb87082222279e38/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/98841f8d9a2c624210fc6f0bdb87082222279e38/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n*None*\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.19.0-canary.eafb7991.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-6Ud4UwidT7iGys9gf+sogB3UpIkAO+NOLf+BrplKGh0BeF+7ubemdJzsLCa7s1JKAHztfgjFGkgP9w+iOHtilg==","shasum":"68e014899bdcbdd35f39cf69ec609acdaae8da48","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.19.0-canary.eafb7991.0.tgz","fileCount":13,"unpackedSize":40286,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfTwDOCRA9TVsSAnZWagAA+18P/Ruaft146uYPwYVqyWmn\n9hp0rChps9EU6wpfecDKXv/hKMorrjIoh+b0P+6Fl5hWU+DCpX6qyenV+pr1\nLGelYPNP0RuDtnWHPkLDJS6yp/q2BqPPnp9tXYhwPYiPrsGAh1DG/Bsjydl/\n1LiyCiPbVGvd5rZ1ePDDMClh7PVfwe4UG+RovJm2b1X4kJg4PXGS/C4x37be\nW3APPPcAfiK9J4/5E9WodzJ1VWhriJyJIv+LFQ0/isyahJUIjI4IPpaa8M8+\nz80FOtWVayMv8NmSVt94XoXawtXFzzQhQqmF0MQ+552pJmHhIuxtJsZFqqf1\nTgDsQv45uxDkjqWEypzfShmoO1X4pgF0Qrkg0DytnNKJK+egnuYS/sHnDUL7\njubcYRE3AitksUNGQzKR7q9QM24CGmwr+wyE3Fo/KTOZEeybgOA55Pl/Q+YB\nTDjbWljAfhCNmXn0W2UxsSJtld/KNjebOy96iYeQkooezjE+yxOue4uPVpgS\nSBs95Yaabjjk986I2E5TlNDLdgBBKSmbzPu8dZ4Lamp08+7v4ZFZsmrHYUlM\nGjAbC/CQssFjrgpjhCwFG0P4HrC4MkusssAvRhfkktvyu41RzoSQzdnxguWv\nAixBjZehzUeTaZuyG69aoP9A5uZlkRJwlkglo7sZkz7pE4qtwcCwrAZc8mKV\nf4oU\r\n=pvfp\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCp+UdC4Z/qM1SrRFuB+/WL778erMdVAnuo5UwgSeMFDAIhAM6SbAlKSqguMRxhnb0cngnHllMMAz8jhgtnXrQWs4WX"}]},"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":"sayrisuarez@google.com","name":"ssuarez"},{"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-formfield_0.19.0-canary.eafb7991.0_1599013070086_0.9065340379452151"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.606642ec.0":{"name":"@material/mwc-formfield","version":"0.19.0-canary.606642ec.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=8.0.0-canary.911014711.0","@material/mwc-base":"0.19.0-canary.606642ec.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/mwc-checkbox":"0.19.0-canary.606642ec.0","@material/mwc-radio":"0.19.0-canary.606642ec.0","@material/mwc-switch":"0.19.0-canary.606642ec.0","@material/rtl":"=8.0.0-canary.911014711.0","@material/theme":"=8.0.0-canary.911014711.0","@material/typography":"=8.0.0-canary.911014711.0"},"publishConfig":{"access":"public"},"gitHead":"e02eff9a35c3b9c054d88cd2c45d44ac7d81db14","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e02eff9a35c3b9c054d88cd2c45d44ac7d81db14/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e02eff9a35c3b9c054d88cd2c45d44ac7d81db14/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e02eff9a35c3b9c054d88cd2c45d44ac7d81db14/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e02eff9a35c3b9c054d88cd2c45d44ac7d81db14/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n*None*\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.19.0-canary.606642ec.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-4uOATyvvKJI8JCdlSFAdGc1A5ovOIpPo7++UaDT9jVI20775cSKv4FNkZPYJJ+/CDAcG9/5IHwY0bc63QpXc5Q==","shasum":"c7f25d87d619e43897c427f8c8c4cb763446da8e","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.19.0-canary.606642ec.0.tgz","fileCount":13,"unpackedSize":40286,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfUBALCRA9TVsSAnZWagAAhvUP/jzgMiTdh0aTVMT80MH4\nOl6iavxsNkTbqyeCsl+xucxUI1snG5z7g7LUz2PgZ7RYS2IQG9pdgWa10EvU\nRSHBiEmYdnZ4AjvBPOe8hQSq0y/Pr4luBBPdAz6E/prxRvA888EHgIrb+eUG\ngaCItzdkwCyN5Z93rnA7oxdmSKaE4rXNLINND0ATihMU5iKZE4eAam+Z8ysc\nqqr6CoTmdudKD3UeWvAtzzKYfz0PNybikwvhNEdVCHb+mVsHsnmYbaHZjEwO\n/WfXOV1SiEoyDvbUpxVIgGd5RoBTWHRb6Czv5DTRrR5c2CcuHsXxqgdW2qBu\n4w4pD0q64tPE0ZeLjJaiA5Kp6MYXkAng2jiu4UR9y/28fSRYt1ysqa/EdR7A\nZeQzVXvRA1eHOrLxPT9ebG+UO1tVwkvIILiFMgz3ARpAUWpqCw1j/BNupejL\nycJ+RluiiAJfPpujalAq7RSQg/CSQeOhbEp8AYXXY12iy+n+FDWZxXF3hL4I\nZ9dEdO2kK1E2HdoFSLmkuqKwNjcHsc9Bli/N1lN4N+skbeOHeLYxUCvuCXTq\nedoZYuf1WXdQzvCbLRo6PRwEopC41tXT2x+EuSC9rG2huxrAov29Ra+o0ta2\nCy5fYwwQYGYafYeUfskOKQZWpW8ubqVjsUC3F06qH/uWUQmHgm1yakKZOj6k\nKIoW\r\n=gN6c\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIG/DT0pdZX05JO2UA6XiEJBN3T25oCPkko3Pqe5XHHwyAiEAyUrYDStNFIsFrlpOteMQByyL9k3w8JJajbFlu+iI9QE="}]},"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":"sayrisuarez@google.com","name":"ssuarez"},{"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-formfield_0.19.0-canary.606642ec.0_1599082506342_0.8742340139167928"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.ddf05c42.0":{"name":"@material/mwc-formfield","version":"0.19.0-canary.ddf05c42.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=8.0.0-canary.911014711.0","@material/mwc-base":"0.19.0-canary.ddf05c42.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/mwc-checkbox":"0.19.0-canary.ddf05c42.0","@material/mwc-radio":"0.19.0-canary.ddf05c42.0","@material/mwc-switch":"0.19.0-canary.ddf05c42.0","@material/rtl":"=8.0.0-canary.911014711.0","@material/theme":"=8.0.0-canary.911014711.0","@material/typography":"=8.0.0-canary.911014711.0"},"publishConfig":{"access":"public"},"gitHead":"1733e660bd96fac32b417696613437f27b2841e8","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1733e660bd96fac32b417696613437f27b2841e8/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1733e660bd96fac32b417696613437f27b2841e8/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1733e660bd96fac32b417696613437f27b2841e8/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1733e660bd96fac32b417696613437f27b2841e8/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n|----  | -----------\n| `--mdc-typography-body2-<PROPERTY>` | Styles the typography of the formfield.\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.19.0-canary.ddf05c42.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-fH7+9UK4kNJmAhuZsMVZjHZ8vvhh+GbiyNd2G3azs4mihsb/aQoyaXFPkuGQ+k7yyuvT8dFoSV256pLQjpgVDg==","shasum":"06e10aa3d2f749451892c4993d8e8bd419c2e59b","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.19.0-canary.ddf05c42.0.tgz","fileCount":13,"unpackedSize":40613,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfUPUnCRA9TVsSAnZWagAAuckP/RYiGPA5EZNhMEPmfoD5\n0PEUNv1SIg/vT/ABmTjCwhwMpRDwuXihg/4zOcjScLywDybVUN4XX2x1KGlT\nCZTUp0AAWiOPXMZ7AccwbRqX2OwUsLHQEdtVyOdxmsoNG6Gfbjv9HmGTqDQz\nVYPPX5hUvMksYHTPX07T4904dSCN5egUwhkgxtHQ99TDWPJkng/2/IR5Y1H6\nRcAxg98lS+sz/iaWsslKgQZg5A0bHvOf5uJQp0BgHrxGVtPrUtvuW8cXZBc+\nCs2U38sCXqAdyQ4GOR5MXBh8viT37bRvkSp0ozATaKudGp7Yj/Huz5nhvrVH\nxIZHX5y3ZO6NPtcDEtxdnllUuL1OGhJyF+EPFhGFuoECm6E8Fvu78a4wv5yl\nX1owLVUnNl4FDkiYlMIVaRpK22X4Qq+na/WFyAXIFqeZgAtzHKs4mrqsF3r/\nSlaaYOc8AO+MZxiLftF3vZLp91oJIH0Jh/ID9sUAuQbZt79HFYGH2czHqSvG\nK44qATJHrr5Njqz0eTs+h3cKFCXqNK8J4X6G7T3AwRxxx4yQKVArap2Kt40p\n+7TJv8bxM/8iz2+Bt9F5e6RE6vv8IdHmDvkX/4kOWUyHyxA7owIuw+AZR5pk\nCWC2xbVKmjVc69UkHw+Gap+MKQgmOiv4c1gVuhvtbqr88NYYC0U2E8EhK4DH\n7YFX\r\n=UELc\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCnXllubHHHiGutcP6zmRCwu/ZeMkUYLOQAoXwXWL89igIhALET1HkojhzcpAkCW0HJzv/dSVh+aqCWlg84xWmhYX5v"}]},"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":"sayrisuarez@google.com","name":"ssuarez"},{"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-formfield_0.19.0-canary.ddf05c42.0_1599141158789_0.4793459769361743"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.b889e6dc.0":{"name":"@material/mwc-formfield","version":"0.19.0-canary.b889e6dc.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=8.0.0-canary.911014711.0","@material/mwc-base":"0.19.0-canary.b889e6dc.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/mwc-checkbox":"0.19.0-canary.b889e6dc.0","@material/mwc-radio":"0.19.0-canary.b889e6dc.0","@material/mwc-switch":"0.19.0-canary.b889e6dc.0","@material/rtl":"=8.0.0-canary.911014711.0","@material/theme":"=8.0.0-canary.911014711.0","@material/typography":"=8.0.0-canary.911014711.0"},"publishConfig":{"access":"public"},"gitHead":"9c47011345ccf89ec21a35053b80a0901ab1d6f3","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9c47011345ccf89ec21a35053b80a0901ab1d6f3/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9c47011345ccf89ec21a35053b80a0901ab1d6f3/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9c47011345ccf89ec21a35053b80a0901ab1d6f3/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9c47011345ccf89ec21a35053b80a0901ab1d6f3/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n|----  | -----------\n| `--mdc-typography-body2-<PROPERTY>` | Styles the typography of the formfield.\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.19.0-canary.b889e6dc.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-TkzRQjhW2+rC+Z7VRjNgjagAt4ne4ESLwfCjDgGHQothVMnWu6IFA4xCdRp0TepQlPOnbzxpPIG6oo4aH3jTog==","shasum":"fb22b961df22382990052f9fbd0a87c2533a976b","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.19.0-canary.b889e6dc.0.tgz","fileCount":13,"unpackedSize":40613,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfUPlkCRA9TVsSAnZWagAAGQgP/jjhOjxDfB1y58vjPblv\nmPUew6hqLobMNxKl/NhszWWYdI28JauqmPaX9HjSK8+6YDEsZbAlcmMpTUpY\n+jRP9cqpbgG7TiDlEGQSZ4FAl1Y/BGeXIuMi6V+35P58QhX5N5fMFuAwW2tY\nuotgVj4ch24fr5S2S2TSXFIuhAe4keQ6rWz/nPa9YRT4AkCRl9fNC7YufI7S\nLi8sh7wqTgU43Vw+5yaZIwhB4521bdAzRO6aNM638mzYcH38gjt+a1a0edc9\n8UiSAHOGODSjubru8duPUrK88/diHotykoqEBJkDKovb/DVgK2pO2s3ZnB8h\n6KsNHZS9W7iQzdPX6sr8lJmoGK1fAJ+m8AluF76w8pcyxYr+D+6RGM2xlhQg\nXMz6pozn0Er6qixbeAfV4d3NACgs47aiyEsev623nHfGZIYxUMDl+D1ecFXG\nXHDilzTlZ06m+h70mTTizXJtMnNYCBxoUFC9AxD5+u2pNQrndr1jnzPaFvzs\nyLhOb1UDGh30QZlBFRqULHK1yyhyYdjXWamppdTccT/FwUjVtHodaKoP8+Vb\nRzciwpdknwGZofByfhSnEwcW8zlL9QYY3xjxV5OoQUgOS1Fkrsz65hkyv5f7\nleDQnPwCgh1gkaRwPZX/UsfEcwryqXLDEmP4vsMBIJsdhqtDDyH9HsYMgqA0\nKbSH\r\n=rV9U\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHtAG9dqpP9+bShJfKJUynKQ9fFrfaof9k32NUqiwATtAiEA5GCmYOhSRs5qSfB3ciebORgOwlzkE+78eu1e6LjehPw="}]},"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":"sayrisuarez@google.com","name":"ssuarez"},{"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-formfield_0.19.0-canary.b889e6dc.0_1599142244176_0.020849370320713323"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.aabeceb0.0":{"name":"@material/mwc-formfield","version":"0.19.0-canary.aabeceb0.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=8.0.0-canary.911014711.0","@material/mwc-base":"0.19.0-canary.aabeceb0.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/mwc-checkbox":"0.19.0-canary.aabeceb0.0","@material/mwc-radio":"0.19.0-canary.aabeceb0.0","@material/mwc-switch":"0.19.0-canary.aabeceb0.0","@material/rtl":"=8.0.0-canary.911014711.0","@material/theme":"=8.0.0-canary.911014711.0","@material/typography":"=8.0.0-canary.911014711.0"},"publishConfig":{"access":"public"},"gitHead":"f699717c41dd2fd6f77fc62da010cecb621e6991","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f699717c41dd2fd6f77fc62da010cecb621e6991/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f699717c41dd2fd6f77fc62da010cecb621e6991/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f699717c41dd2fd6f77fc62da010cecb621e6991/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f699717c41dd2fd6f77fc62da010cecb621e6991/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n|----  | -----------\n| `--mdc-typography-body2-<PROPERTY>` | Styles the typography of the formfield.\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.19.0-canary.aabeceb0.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-OKyYlgIWa0TQfBWpT2sDxzxWOHvUjr2DUbroS7nORbJ9cchtM96J6SKSI51NISrLqjFFZkRS3u4NKRYr7Af5tQ==","shasum":"e34b86faccdbad29bcd54c317a88d8fad1de674c","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.19.0-canary.aabeceb0.0.tgz","fileCount":13,"unpackedSize":40613,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfUUqQCRA9TVsSAnZWagAAQz4QAJGbaTbbydchpYtJNFCu\nvbMORZ+9EwlipmYMdUxpgopFZuKlwEM2EF2o5fns7efACFV813uwN5nMFKmH\nBFXnaxfNlImAm9RNONubomMYS2P46J43+/hSpEGGEw40pKyPXGX9wKfud8iw\nQ1fi1BfXVMYaPFw3d/1wwsDzAzCBv1qcFOEZziLmUemoetAuSuTXXA7LRu7Q\nv9s9nbfIUVQVIFz5vYFd3OMdGmG1Guz5yN+j2UtxfCg6S8/mPuQGqH55NkFI\nqbkkptXKRLhA8aKm/lP3qMV8josWF44BpvrtCgYCXO9kO1U65D3ol/FVMgnw\nQ4rBTn96rxbxvbCBi21tYL43F0WMX4BP+DQUQrP/W/m2zJu5eJ9FnkGoCRNJ\nvu1MJfk3GkEtbwRr/RRZVswSZNJ6spttObx1xhfMu7BSKh+SStahdLHwlGYg\n6NRusoNvRKZS8ldqPyw108RoLJ8duNB7PJdTEXU1SYn6Mc+mweQnxjJ/lxSH\nNcqVV0l7R43DLONo9AcWG69054Ctq3QQvGQtCIcvzrsipCN+Er7IumGxomWc\nxjsi4ku1IrhCE1FjCTVCxKQvCaP0nG+7aN46nvG+nMixVPURiyex/Xwv1EsH\n3AGCH9RgPU9xtpVFACW06pUhnfi9FasRzb7rsFR0gTxqncW/bJdh69hhM4Ho\n40tA\r\n=qp/7\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDOo1FlkO4o5Sm+pD7uySVbNz5HSsQrja3CRNa1eorwOwIhAKgGgZdLOHztV4Rm+YEcHdVFX8cVNOqXky6qXzM5tycv"}]},"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":"sayrisuarez@google.com","name":"ssuarez"},{"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-formfield_0.19.0-canary.aabeceb0.0_1599163023993_0.26186845046258433"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.d8cca3a6.0":{"name":"@material/mwc-formfield","version":"0.19.0-canary.d8cca3a6.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=8.0.0-canary.911014711.0","@material/mwc-base":"0.19.0-canary.d8cca3a6.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/mwc-checkbox":"0.19.0-canary.d8cca3a6.0","@material/mwc-radio":"0.19.0-canary.d8cca3a6.0","@material/mwc-switch":"0.19.0-canary.d8cca3a6.0","@material/rtl":"=8.0.0-canary.911014711.0","@material/theme":"=8.0.0-canary.911014711.0","@material/typography":"=8.0.0-canary.911014711.0"},"publishConfig":{"access":"public"},"gitHead":"db99eec046a418490ab66f7fa667607aefc5b26c","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/db99eec046a418490ab66f7fa667607aefc5b26c/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/db99eec046a418490ab66f7fa667607aefc5b26c/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/db99eec046a418490ab66f7fa667607aefc5b26c/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/db99eec046a418490ab66f7fa667607aefc5b26c/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n|----  | -----------\n| `--mdc-typography-body2-<PROPERTY>` | Styles the typography of the formfield.\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.19.0-canary.d8cca3a6.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-r1M/FjZFWzZYSOglCiVPGHQlmhm9Kxifj3RuK1phTWhulJTe2zxNJ3/VkJ9tZBEPItdC0HX3TdFQT1Ju6Qe7ag==","shasum":"0160b63327cfaf6e41474110a0c20128bf1b9dd2","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.19.0-canary.d8cca3a6.0.tgz","fileCount":13,"unpackedSize":40613,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfUWCXCRA9TVsSAnZWagAArMMP/j73SIXFumacwmQ5Zy4N\ndO4cbCwPde8uAD7UOjx87zYXawbA0IQYNGTpe9zDQtq/Pn+W0wD+c1l8X9tn\nbVgRBtwm8yH7E6yXwCGUuM1oOQm52RfVQM3KG25IHqycAkNGAgNdB8LHjzPe\nKmELlETOUkpRlgowTyPPybLzHydAGSFsxmvYaG+yz8ylF3HoYHTPHzclR0qx\nRSZEiL7x5yw0KVqj8PCsG6+cxS0/9cyMCvdlSbOmyzEZKlH+DwWQhHbMsZZi\nfL5XBR47IJrphNY06H7fm59Ah4HTdTCyGPJulDHXiUIzILEyVSDeYEIksLQ5\nVeY48Yic0stkriLbya88VLGb+QC2H8PR+XTcLoxbnIifAPgWKy/XvKP0O0sg\n4KA4uN3PS2JNiQ2caBobNyrHnCfO8fkKJRKilnLy2RmiA7e9N/6V6i7xQJW1\nY83X9aaSCfCP9E/qctbMjxWOdbbNahUSax2lv4X9IvXgI+9MhkpyNWFLnDqY\nXJ1KNkPxIl8WOgCbb0SHgxaPic1Lhb2rOvdKK7DrGuLPuH5Im9Cq4rP1CBIM\nMvkPQm+rFVKS7woryPiUvdOhawH9wbVh10rg2vYW72fxBoTE9tR5S6oXJbSZ\nysejEbIGWMYhMz/FfwneuVPu/9msl1NUvmfXHPFRAH+Es5QTtjQjGT+17CH3\nXdps\r\n=b63f\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHNojH3OA1PPY96JKD6RuiWe6Gm9fcLworaam1Z/OqaiAiEA3Z1I7Kcvs6Cv2BRCADd/r5JIqtv1PtBpPK/fVTsA5tI="}]},"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":"sayrisuarez@google.com","name":"ssuarez"},{"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-formfield_0.19.0-canary.d8cca3a6.0_1599168662841_0.5996723744779131"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.26d34b2e.0":{"name":"@material/mwc-formfield","version":"0.19.0-canary.26d34b2e.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=8.0.0-canary.744bfe5d8.0","@material/mwc-base":"0.19.0-canary.26d34b2e.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/mwc-checkbox":"0.19.0-canary.26d34b2e.0","@material/mwc-radio":"0.19.0-canary.26d34b2e.0","@material/mwc-switch":"0.19.0-canary.26d34b2e.0","@material/rtl":"=8.0.0-canary.744bfe5d8.0","@material/theme":"=8.0.0-canary.744bfe5d8.0","@material/typography":"=8.0.0-canary.744bfe5d8.0"},"publishConfig":{"access":"public"},"gitHead":"52bb6b8fb277d5ec6b66932a0683e4f2fdeac872","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/52bb6b8fb277d5ec6b66932a0683e4f2fdeac872/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/52bb6b8fb277d5ec6b66932a0683e4f2fdeac872/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/52bb6b8fb277d5ec6b66932a0683e4f2fdeac872/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/52bb6b8fb277d5ec6b66932a0683e4f2fdeac872/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n|----  | -----------\n| `--mdc-typography-body2-<PROPERTY>` | Styles the typography of the formfield.\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.19.0-canary.26d34b2e.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-SQP0HMFjXX83jaSpV6TB/Tav+7BCy/ksESIzGye0hZ5BNvXn6lPTgnYZV5dDbBrzPLYZL8SKQvv9ZnQDWSjIBA==","shasum":"f41edc23a057ffb7baa9e25d5cdf630a2e461f14","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.19.0-canary.26d34b2e.0.tgz","fileCount":13,"unpackedSize":40613,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfUWaJCRA9TVsSAnZWagAAqFAQAIAqOfcvfRROR2UqNz3G\nszKJbdx+yGamie1Kal02Dd1Huxm1Ilv9jt/kHS8ju+qXXxBJOReYRI7skq99\nnyaNEaFWu2TwgPBRI1KE4b7eMESGcOq08R1qMcR3YjhthMYnzlppfi183/qz\nHaHSCW1l7A3URwAdgtgIUmgXerpO5G/bXf7yRdHqVf8ccM1uVtywXBevA1nJ\noey05ETMelUXZsPUaTKPqAHh1bxJRIXcFrXHcTLPTFDFJr33bRIDOfgw+h+e\niesISaLU1SvI6XvFStm3+4jPEMjGcVwoV8KLMDc+EPH6MzzzK8Uye/8gKkif\nAkNP90XVyqmZJRUhq/tdMOHzhhOuLCUiqga1556SLibyvOpLwNydyzOIV7X6\npyC8xkEiACXEKwfu3Hxv0PQgvAU3OvkzDd+wXrtWdh7D7DVAMXQYeYcz1jgn\n6lEl480WomrZthRW6e+VUQcPw+5nb92YRJNjDZx5uhfSLOPCheWL/phDCJsZ\n+/TYOXJ2gzz279o8Z0EMjxfJoOYFAvHkMh2FTDF2R2uGZMu8fp69od8Q16mB\nYrbt+glMg+j2IkYXpS+b8oHqJ8r9mFoQ/+5Q8lx5P6qtH9NU3HpyMaBJVUqV\nz/Y8mWmUdb4y7fkD+G/6C7Jd9EdAeC9Bg/JKdjKt6KyWaTZPVSQsEZOVsYSx\nuQ3g\r\n=netg\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICeKBwcmt1YoR2586thQSnMf+wFJ55tPWF8L9IJ0o7RmAiAjZflgKnp5K6nzFmSoE6eeO/g5edWZGbzkMU35hPFogA=="}]},"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":"sayrisuarez@google.com","name":"ssuarez"},{"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-formfield_0.19.0-canary.26d34b2e.0_1599170184746_0.05912575286971844"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.a1c44494.0":{"name":"@material/mwc-formfield","version":"0.19.0-canary.a1c44494.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=8.0.0-canary.744bfe5d8.0","@material/mwc-base":"0.19.0-canary.a1c44494.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/mwc-checkbox":"0.19.0-canary.a1c44494.0","@material/mwc-radio":"0.19.0-canary.a1c44494.0","@material/mwc-switch":"0.19.0-canary.a1c44494.0","@material/rtl":"=8.0.0-canary.744bfe5d8.0","@material/theme":"=8.0.0-canary.744bfe5d8.0","@material/typography":"=8.0.0-canary.744bfe5d8.0"},"publishConfig":{"access":"public"},"gitHead":"ee68077e51a883c9a0728019c33ed96d4563758b","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ee68077e51a883c9a0728019c33ed96d4563758b/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ee68077e51a883c9a0728019c33ed96d4563758b/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ee68077e51a883c9a0728019c33ed96d4563758b/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ee68077e51a883c9a0728019c33ed96d4563758b/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n|----  | -----------\n| `--mdc-typography-body2-<PROPERTY>` | Styles the typography of the formfield.\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.19.0-canary.a1c44494.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-EBJZPpADlHCsqVvJYRB+sF70hETF/r2pEjnG/6ltI08sU3u4Lor940RIhgYKmVC/NtfGOB4L/sSvw7/0OEyPlA==","shasum":"9786dee7ce2c318ceacddc2a14b930c2b5ac1d04","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.19.0-canary.a1c44494.0.tgz","fileCount":13,"unpackedSize":40613,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfWVIACRA9TVsSAnZWagAAApkQAKT9bGREncOB5scHSslX\no7VsB4KKiCnP8sP5wgiyoSXBxIO1ldLTFgodehgbsCaZAgLZaFviCb1KTU9F\ndD0CQ6FZk1jIDti0xBndlMdES9KnKURxFAzwxiOFeF5xJsFG8yGm5Vdycxht\nMIUqbA9/tqeYotcl6+NPOyvx72AKbzpb1r0eLbwaL6r1hy/JwJkxgxFkpg0L\nzYYFNt3cP6RRcWAzoWLH/dLrV86OmYJTPkX6jGpDkYLsxjuWbwdCifd3U6yG\nmCPP4C9jgRHQqTZchwAQdlJE9px2gj8+LQxP8wM+kaSAraxIbNiSoktKL6Ds\nEr4xCJ+LGcprUwp8k7gCQfpIBb6wE0jmXrNH5es7yvemJ5+JB/fuNGQ+d0Hh\nQVgSdCdSenhDcwS2avN5ftZoeb8dADwDmq5AzWyYEB+VdbscjMMyleLV4tj4\nwFLrdxpzjM1nRpZXUzdyYeKJv+JrCRQ9OhEG2hT53K64tlLsXYYOYmikb2cL\n6H9etpgnz5Bhgn71kG0CYhMW358gTqfYMTAaJvQ83Hc2hHaJRsO5ZgHqX7jl\nUQhkkw/8uDQDEZX4nvsHRuTlILcGCRxVaagy7Py3VKcRQOLG7CiuvLdhwzz7\nQ5wQUrJWQXCny+nQUcxsAa7MjbOs7CzzpOdBDRN3caH3Mj9uuqbg76L59NZC\nPqvX\r\n=nW5C\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDpWknra0aIfBbCButSdn0dNHepZf5CJ49RtDG1Ter1VQIgLxZe9NYjTKHK82k+tDDJ0wgaXlvqK6vd9TzvP7gQ+YE="}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"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":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-formfield_0.19.0-canary.a1c44494.0_1599689213571_0.8987243272731706"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.be1cd1e9.0":{"name":"@material/mwc-formfield","version":"0.19.0-canary.be1cd1e9.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=8.0.0-canary.744bfe5d8.0","@material/mwc-base":"0.19.0-canary.be1cd1e9.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/mwc-checkbox":"0.19.0-canary.be1cd1e9.0","@material/mwc-radio":"0.19.0-canary.be1cd1e9.0","@material/mwc-switch":"0.19.0-canary.be1cd1e9.0","@material/rtl":"=8.0.0-canary.744bfe5d8.0","@material/theme":"=8.0.0-canary.744bfe5d8.0","@material/typography":"=8.0.0-canary.744bfe5d8.0"},"publishConfig":{"access":"public"},"gitHead":"e4ece959ee320d67e92b5c9add79f6f7eb4b2be4","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e4ece959ee320d67e92b5c9add79f6f7eb4b2be4/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e4ece959ee320d67e92b5c9add79f6f7eb4b2be4/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e4ece959ee320d67e92b5c9add79f6f7eb4b2be4/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e4ece959ee320d67e92b5c9add79f6f7eb4b2be4/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n|----  | -----------\n| `--mdc-typography-body2-<PROPERTY>` | Styles the typography of the formfield.\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.19.0-canary.be1cd1e9.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-6kkt5rCv2YKxeKen9JlPK4wdO+9hSCtdF1/v+p7Zchax5OEcw4fQwU7rmialssFu/nSLdnGHBZo3tSzucPammw==","shasum":"8f34699f33f097886246149caeb5c943301458e3","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.19.0-canary.be1cd1e9.0.tgz","fileCount":13,"unpackedSize":40613,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfWlcCCRA9TVsSAnZWagAANKUP/2MMbkh/0/1Zq88BSNqJ\n2feuH0Gb3DFgKSma43BukUJKDK6GL4ZvnIJIiF3P/tVM9DrRRnhHvxiodrBL\nxoAQY7cJ88P7WcnmL4/fWO83t7iIx2HToLus0g7EyNZXWeWWkTSaotVkgNrV\noa5zFeCk/e5nUC77P3cDbqLNru6o9mzRFTGNrer8Ip16n1vl3dAwRWs+XqeV\n2dHoVJ1MhGhwfkOo1Ble+VVLIZVN/aEM4X9AhOR5i/QZQKml3Is83+w9giaC\niW9nGm6EbDD0In9icFjP2/RZOR8d6XZZ/QCbUeruJ+6QZ++7DzN7tZC2f1HN\n4hgRY2wsh9btt9PajtKsc216K4Qn2IsCcI9XU3x5Jf6yBfM2JBsQ+uyqi8j3\nVsY2vHSrSU22dd0l21tl8xn2NNxWe7wJHDjCFUdFnnxB3I518YFx+vVb+ec9\nYItlEf8MONPULzIjFzT8//LOIbsNB34A84PPBvl+s3LgAegW5bHbHesXAI/G\nRQUO6sJpzptUvrXZqQDvRniKCkUdz9ISMXgAnmeLHnw41742MrR6dYiZmVD2\npZJpNIUFp74aDpNgijPDDnXyok+kIWm68Kdhi8jW8jrKywZ0ZjOPe77f/xoq\nUF9zto4YWvpa9y7WBGx3X6FldxiDim+y5B8ljs9PgZN+rvUX9zEJg/W3+DSx\nCR5c\r\n=DdWo\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCamy+WPsOR4u4jGsLk/uU81+dGjatVEPW6w9e61zESUAIhAKOY6oEF9/BEWVJ9+wMOW4FKf8O+S0eTyJMIz9w1db9D"}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"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":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-formfield_0.19.0-canary.be1cd1e9.0_1599756033579_0.4036950001265929"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.f094c0ce.0":{"name":"@material/mwc-formfield","version":"0.19.0-canary.f094c0ce.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=8.0.0-canary.744bfe5d8.0","@material/mwc-base":"0.19.0-canary.f094c0ce.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/mwc-checkbox":"0.19.0-canary.f094c0ce.0","@material/mwc-radio":"0.19.0-canary.f094c0ce.0","@material/mwc-switch":"0.19.0-canary.f094c0ce.0","@material/rtl":"=8.0.0-canary.744bfe5d8.0","@material/theme":"=8.0.0-canary.744bfe5d8.0","@material/typography":"=8.0.0-canary.744bfe5d8.0"},"publishConfig":{"access":"public"},"gitHead":"de510bf2f44db6ede47942c88abfee6266225354","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/de510bf2f44db6ede47942c88abfee6266225354/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/de510bf2f44db6ede47942c88abfee6266225354/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/de510bf2f44db6ede47942c88abfee6266225354/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/de510bf2f44db6ede47942c88abfee6266225354/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n|----  | -----------\n| `--mdc-typography-body2-<PROPERTY>` | Styles the typography of the formfield.\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.19.0-canary.f094c0ce.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-rpb/nkLGftnuhOwLZVHJsuy9vqxh9U0+CfCNkgNw8PMbhGFImEl1RL7X13EhG4liNWqMoUcbB2uEPDtTrfeg+w==","shasum":"91040971112b5a6bb5c195e89ecda8c5062b9e1b","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.19.0-canary.f094c0ce.0.tgz","fileCount":13,"unpackedSize":40613,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfWmP0CRA9TVsSAnZWagAAgEgP/1UvBwlEzX5j0d9N7Hb9\nBe1j210oblfHm3d+vIl3G+S3egzy6g+fVZP8BuZrwv43xT5vf024PTp7tonb\nF0YSFOipcPwiNtxkLxc86XLN2obvb4Y9WTvfvVQetjBguY8IquPbz5IeE2X6\nyRAlhfaUvsf8KbFiaPFaKrzVE2n4f2qrSfyrjKeTi/Yn4HOgiF+fVYYErMhM\niBgea6ybUmLtiU0dygezLKnFHADzh56+jkvBgznpZLhs2n+FRL53g1mODCC8\nLxzjU96wNKMVeIrE3ZeNqu/2MqoeTKymGJTtXqruawoIzJhK11waVQHO4OFB\nt8WIqxRNVdiYu7+T1nLmYXJ6KQ/fZQEeAXoihSDJTgQNCL6A6FjXiHr/Fl2b\nF9sq/ku4gDyWGMj2j62T87UBh8D/5Nq7cqjL20y9fYUfXqsy5Bdi5XsvjmIR\njjfDHLTFUmWXkjIbr5VD3XVtVSa1Q77RkX6EmrPJYAZF9gsgzsC0b4R01Y5V\nUgF7dAKyEWFsb0LYQV85WshAEX6U/OaoY+V3BKZPn7ZgW4PgChC66ni2Zas2\njpj1PGqEyS0vGgf+jBNSeJCYkW06usVnR7tqfwPjnrz5+1lTnNXjnPH3j3DK\nRdH7FXerpL8VY8ff0y1Rl8SylXV7L+1/oolR8Vpf5yHuHHkaxmVBXEnfbOuq\nzRXg\r\n=ShXb\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCOZKj4DDPAiq69P9P1WRjY8Vr93qRd15mYUeXqYLxKWgIhAMkijME3rtghVgE2J1f1tn35e8LTLI7FGkhHLVVQW6JD"}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"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":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-formfield_0.19.0-canary.f094c0ce.0_1599759348098_0.7443022208115373"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.c1261e7d.0":{"name":"@material/mwc-formfield","version":"0.19.0-canary.c1261e7d.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=8.0.0-canary.744bfe5d8.0","@material/mwc-base":"0.19.0-canary.c1261e7d.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/mwc-checkbox":"0.19.0-canary.c1261e7d.0","@material/mwc-radio":"0.19.0-canary.c1261e7d.0","@material/mwc-switch":"0.19.0-canary.c1261e7d.0","@material/rtl":"=8.0.0-canary.744bfe5d8.0","@material/theme":"=8.0.0-canary.744bfe5d8.0","@material/typography":"=8.0.0-canary.744bfe5d8.0"},"publishConfig":{"access":"public"},"gitHead":"d3ed845121c57e24ccb397b137eccd91a179c1d5","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d3ed845121c57e24ccb397b137eccd91a179c1d5/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d3ed845121c57e24ccb397b137eccd91a179c1d5/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d3ed845121c57e24ccb397b137eccd91a179c1d5/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d3ed845121c57e24ccb397b137eccd91a179c1d5/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n|----  | -----------\n| `--mdc-typography-body2-<PROPERTY>` | Styles the typography of the formfield.\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.19.0-canary.c1261e7d.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-23140YqN814c1zODefgk7TaRM4uBzAYfeAbXoLxmhANK5uqKAJg2JKamp1XOgmC77KXH2Iu+TsU2FSYzPjKYxw==","shasum":"19e1daa92bdeda0e369b09de08d4739dd2dd62b8","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.19.0-canary.c1261e7d.0.tgz","fileCount":13,"unpackedSize":40613,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfWuAyCRA9TVsSAnZWagAAt0UP/09xuMK99ysgo2AcYVfa\nniC3WtNLosfrUbEtOrYC3EjaLdVQWjJOCW1/GFKqHZHyoG07Z3ICC6ICgWdG\nxLS59xqtXxNe9lwGJR0hjZzXIsJpFXvJb9KRPSPeGPMQE9QYbXu/Nv46Kt2F\ndTLxtMJ1kp6t7gKmdD3tJ8EuxD0U2199vxXt7hxR62CIDqxzk/0xMGfbyDRa\nKuRIC1I1s+lCQOfTPziMyVzzuVhHUTLFTTou877TmlWW99aYn2ybkykLIvpM\nlxoqacozx0wjvc03bwiu2+gmznR93mp4Sh39sKfZ8ekOcI3ynZLWjDS1zEzZ\njEWlsBdbz8ZrqF9LRMwWADbt9A1Uvhzhp2JZ97jDJrkSBfxn9cwac/d/a59h\n3QzU+1NRMR5WrfI13q2Fp4L8y9aV28Cye0E22TSNyfNNU/UZw5BNKZnviYro\nRdW4GX8up1mwY6GFZWak4r/why1hdsDqWjBrIkJrFxBT4tFSUAjP102kL2R+\nmqsAbxFtZTCnuU1RiYnzLtVePA36z1RHZOFxpfH1wWf54W2nXOYMdsxa2/Ng\njHOaPF8805YQMv7rQ2mPVe8UIcGEos4fifotw0nh3BFl2mePaEXUP12vyvG7\nauWW9LWErmNJg+2Pdb8FhgebFEVtCXRER7ob8jxlhwE4Us26ZdIPUp/r3dW2\nfLDk\r\n=pZOm\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCEGdpz8LKJGHskt4MW1tsIbSYTqYDYS8i9pIKC7aGgLwIgG1Es4P3YInx4esL890ckcKshOIkq48inShMKYZ+4ObQ="}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"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":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-formfield_0.19.0-canary.c1261e7d.0_1599791153495_0.05678062296756958"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.9b39ed1e.0":{"name":"@material/mwc-formfield","version":"0.19.0-canary.9b39ed1e.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=8.0.0-canary.744bfe5d8.0","@material/mwc-base":"0.19.0-canary.9b39ed1e.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/mwc-checkbox":"0.19.0-canary.9b39ed1e.0","@material/mwc-radio":"0.19.0-canary.9b39ed1e.0","@material/mwc-switch":"0.19.0-canary.9b39ed1e.0","@material/rtl":"=8.0.0-canary.744bfe5d8.0","@material/theme":"=8.0.0-canary.744bfe5d8.0","@material/typography":"=8.0.0-canary.744bfe5d8.0"},"publishConfig":{"access":"public"},"gitHead":"8fdf88b38d36782496195681d3b1d340ae36fe12","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8fdf88b38d36782496195681d3b1d340ae36fe12/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8fdf88b38d36782496195681d3b1d340ae36fe12/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8fdf88b38d36782496195681d3b1d340ae36fe12/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8fdf88b38d36782496195681d3b1d340ae36fe12/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n|----  | -----------\n| `--mdc-typography-body2-<PROPERTY>` | Styles the typography of the formfield.\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.19.0-canary.9b39ed1e.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-2z7E/wdBSqnWEmSZGOosx2SqyA/p/+7CdlSWOuYQGd0sIuMgGWvfZl/Z0NQTlgYaPfB2jX+HHdAfnsv/mM2vvg==","shasum":"9714991e4d9b33fb440c0c6e94167eb98e5092e2","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.19.0-canary.9b39ed1e.0.tgz","fileCount":13,"unpackedSize":40613,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfWuBkCRA9TVsSAnZWagAAoB8QAJ7pzY92pjEqTAqFiOx+\nqyX19VmYX5QWhYTYR4O1Jcg58GNuuNwkhyZsLBspfYZkn1pnJ4YGd95tlzZ6\n+PZL4AWDgGGvsHsWikZRlm7f4CI21OH6JX+cDiIDFbsokzv3K8QZN3kkWd/U\nJLnlQ8r8m27ReJPGkA0PwSSM2lBNfeOU8SlsYEbv0NfoaML8q2Lf6VjbvxTV\nVwgMut003dGYz1JE6ULKxeWZUiC5lDR+tajcgnk8be9wHidY/hF5exmjHPvP\nU7wQWJVEoiJ2oms16mDhInBkXNiSy2SHeX1z13ESHPBg2K+x8Zab95Qz4S/Q\n6+8+LeEyAYZruVU3/UtqqqKJH0ofm8/g2r0ryih8ttZGFvVUZvFYlpVxN8wa\n1EhrwFpvPprmEjgGA5ntUYwcUc0qw8+MXqbHpv//p7yUpQ651IvnKWu8kT/9\nlj2CU7K+XkjrfiMrJf8SG0foyCsSaQwBycOS9GLdTPKdUt1HuZJMLq2mzliG\nOR1XgD0FYPEsPVJmJVrf7rMCMN9L3hYbvWCnelesZhanmA1rA25frduL+Rhw\nX16yMMwgheRZeVttuf+ddctnY6IBQHJRtPAK1/pcihZ74A1uxx7NQPGRfQ7Y\nO0kLmArP6k2em933MPjhSWMrR0nFKRPv30HsEPtRY1VnnfSm9Qklru/KIbMr\nrkhv\r\n=NO38\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCaGoFpF5gHf/1rkejtbhHhLfcRaNLfecTzGPLUy/8NDQIhAKpIzpBjR5apqIihr7Cd1afmE5xjqdqoJ+Cyz20GdzCd"}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"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":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-formfield_0.19.0-canary.9b39ed1e.0_1599791204567_0.4588964390394832"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.e67214b3.0":{"name":"@material/mwc-formfield","version":"0.19.0-canary.e67214b3.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=8.0.0-canary.744bfe5d8.0","@material/mwc-base":"0.19.0-canary.e67214b3.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/mwc-checkbox":"0.19.0-canary.e67214b3.0","@material/mwc-radio":"0.19.0-canary.e67214b3.0","@material/mwc-switch":"0.19.0-canary.e67214b3.0","@material/rtl":"=8.0.0-canary.744bfe5d8.0","@material/theme":"=8.0.0-canary.744bfe5d8.0","@material/typography":"=8.0.0-canary.744bfe5d8.0"},"publishConfig":{"access":"public"},"gitHead":"9d09adcdde4c822614f34fd4c8fbf1e1b07e558a","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9d09adcdde4c822614f34fd4c8fbf1e1b07e558a/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9d09adcdde4c822614f34fd4c8fbf1e1b07e558a/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9d09adcdde4c822614f34fd4c8fbf1e1b07e558a/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9d09adcdde4c822614f34fd4c8fbf1e1b07e558a/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n|----  | -----------\n| `--mdc-typography-body2-<PROPERTY>` | Styles the typography of the formfield.\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.19.0-canary.e67214b3.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-KzsrqjHiukVWhl6rS7RHig9vgMgeG59EMa6LpJ7EYoc6OXFgmFLCgZi3IFZwRZW42usHiaF7CHTLGM/PJhPadA==","shasum":"151be798c315a1c4275973f5a4565334dea795f6","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.19.0-canary.e67214b3.0.tgz","fileCount":13,"unpackedSize":40613,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfWuFpCRA9TVsSAnZWagAAuwEP/jcJmZzcq75MkSr8SzhU\nJQzdxqznJHTtcCVSwoG3x2wvEHJS0nDnAjfhuJXfeQ1K6rP4m5emXl9gdkvu\nnSVLjBBEswQOBfP+wJLfPn5YMvA/KbAR3WP2r17l6y5cfSP9uujhz3XnoIPm\n+gZyNyIZUm+PxAqXWzrzO/6dynQ5taBhGweOtwwF4sAiJgZEV5VCTECWImYS\nG91unDd4JkK1w0+ov3b9JzWQ0LMHWOlWWu0C8K2ojqotCHz4HdX+NScWZsza\nhzgM4aWASYla4VWZjZSUEyBGchpe0iCBGHUdGV/ifBUB8EGvvYnCoExHuWCy\n7sgQICq8AkQdhsXEL+S5f8Jk+KhDzg+efRQvHo6YK0E0sZkuQ4sm1hZSVU0h\nnnNXd1iQPN+gNY+9gulsKhtQ26+dvXveV5oBML+DIq9AKBb0T+UnGpW9uD7R\n5M1JB0yvZudQE2xGPn1ITh6MowmCth9f7YYku9w6d9A7OriDNotJmZyz0FRS\nTfje1rPfa/DgLai900CiRkJCTPJ5LGyv4P3IGRuC78PLTsSh9a08NpeRlD5h\njyD/FeRVY0nMult6nyocXJc0zvCoKu3oJWsfuRJcTmQK6Js1nfi8dxYgN/Sp\nE9QvHX58d+9ABdbvE1s1nTvv0pjbQfVQ/ay7sp1522ESbHux/uXT0PhVPo9v\nPZDH\r\n=IUW0\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIByN2SpEJoOY4/ZcF7ulWGly9wo3B2IgJdVNglUsTtvuAiA2XFf1LIupByGdH8Owca//gccv4gLn9bOGKvrXbsa7qA=="}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"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":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-formfield_0.19.0-canary.e67214b3.0_1599791465561_0.7867298887773135"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.36f5da28.0":{"name":"@material/mwc-formfield","version":"0.19.0-canary.36f5da28.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=8.0.0-canary.744bfe5d8.0","@material/mwc-base":"0.19.0-canary.36f5da28.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/mwc-checkbox":"0.19.0-canary.36f5da28.0","@material/mwc-radio":"0.19.0-canary.36f5da28.0","@material/mwc-switch":"0.19.0-canary.36f5da28.0","@material/rtl":"=8.0.0-canary.744bfe5d8.0","@material/theme":"=8.0.0-canary.744bfe5d8.0","@material/typography":"=8.0.0-canary.744bfe5d8.0"},"publishConfig":{"access":"public"},"gitHead":"eb828fe61bd1e331e8d6f63a24f6e78d58858a93","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/eb828fe61bd1e331e8d6f63a24f6e78d58858a93/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/eb828fe61bd1e331e8d6f63a24f6e78d58858a93/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/eb828fe61bd1e331e8d6f63a24f6e78d58858a93/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/eb828fe61bd1e331e8d6f63a24f6e78d58858a93/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n|----  | -----------\n| `--mdc-typography-body2-<PROPERTY>` | Styles the typography of the formfield.\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.19.0-canary.36f5da28.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-4/ZUwSMCk5mvjOEosB/3EYg98y6KxlZBk4VgDfpNWgWL7bTKvC3OMecvRpKjkeYvUUKmlprySUp5Bs9620g8dw==","shasum":"e53bc4355b3d4f72f1e3e75d2cc385df559f9f76","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.19.0-canary.36f5da28.0.tgz","fileCount":13,"unpackedSize":40613,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfWuIJCRA9TVsSAnZWagAAlUsP/Rnnonz2atnWjcNozqsA\nT+PiGwTJyrNdB3DZkQvJKjm65G01XYyRSiQkE3qgDwPawf9alHeOPoRSkNBk\nvDy4LyCUeBmAp2wqgG9TiIyNURQYbMbN5dHIG2bVOsXb/8GhNOF3SxuAJuT8\nF41eOsCPvC78Jij6pt86FVFhRzzxnoyAIIY1XGOyGr5k4tMeJV1DoeuHjx5L\nMZn6Avlolac1EJWX+3Cqp/djy5/IgxNJdA2b4OVbudToCgZubD68b96023em\njYEmZNkNNUGfCabrm/BNEQC6U0kRy4UaKtVxiiB7N9y56aa7REIrWeYiap4t\njhJEOKELpkX0bwDkXPtZ+7q1nmMP2p64mT8CnKPm8DuqpXECqNFqYVttAqus\npKk0s55m63HlfPtrIk6HxbSlC9ue0sdyvAMn1DXOl/Bdzk8dfn2dqMWiN4nT\ndA73ihYaz96MUbV6YDlup18wg3/1qHG73ulXPsoyCdUPBSiJlxL+n1uUNWdG\nu/tl0bSyVpDP55Cx2JIxzWwNIHi1KnvFOOCJaYYWDWx6F7ZUmIYsSGIl56JC\nJ5l8GUTNvhot8fRYjdbSssg4bHKHlndzyLAiG2wsfO1XKPqjqR350hWKz7ag\noJPhDrR5gZsb40+lFCy55rYfOjyZ41tZ88g4pMicuwd15aPH3YB06pV0kmWZ\nbRhe\r\n=EPqF\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHrDDOZsy6FtHVqE3qJA6awGUQhubeukutahE2Iizt/MAiBn96n6Lb2ybZGZewEjnFyeSAkLh/nviclUJk4ohr7q3g=="}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"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":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-formfield_0.19.0-canary.36f5da28.0_1599791625265_0.9160936301552003"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.3babab12.0":{"name":"@material/mwc-formfield","version":"0.19.0-canary.3babab12.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=8.0.0-canary.744bfe5d8.0","@material/mwc-base":"0.19.0-canary.3babab12.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/mwc-checkbox":"0.19.0-canary.3babab12.0","@material/mwc-radio":"0.19.0-canary.3babab12.0","@material/mwc-switch":"0.19.0-canary.3babab12.0","@material/rtl":"=8.0.0-canary.744bfe5d8.0","@material/theme":"=8.0.0-canary.744bfe5d8.0","@material/typography":"=8.0.0-canary.744bfe5d8.0"},"publishConfig":{"access":"public"},"gitHead":"3c0abab82c4079d265dbe68e3b3ce3dcac8519b4","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3c0abab82c4079d265dbe68e3b3ce3dcac8519b4/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3c0abab82c4079d265dbe68e3b3ce3dcac8519b4/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3c0abab82c4079d265dbe68e3b3ce3dcac8519b4/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3c0abab82c4079d265dbe68e3b3ce3dcac8519b4/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n|----  | -----------\n| `--mdc-typography-body2-<PROPERTY>` | Styles the typography of the formfield.\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.19.0-canary.3babab12.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-uNYyzeBLDwL/H23fpDaETNKyUM+0Ae5QNIiVxsWft1uH/ThdH2IRe4o51/8tc2XAsr1qoGT6J2Ol/MUKuNP1vA==","shasum":"4ba8581ad70ee5db854faccf8b122453516445e1","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.19.0-canary.3babab12.0.tgz","fileCount":13,"unpackedSize":40613,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfWuKzCRA9TVsSAnZWagAA8uUP/0995fCkt3OqzJAMuERa\nJEO4kaKeF1SLGF5cXYSJNdi3xmD6XIx7k0aFABwrMGM/sqgs1ufeniEqyhR8\nRaeQxKDnyRl8uT9j8TaHy90Bo5bdN58JoBFXlaPj+ePPvW7oCp9YKAiBkvsY\n/lbVtUHKES0sqip+PleK0zm8bDraT+lPRp1/WwL4DaZVsKFlke05AM81Sn0/\naxu28lznZx1gzbPZysr6ZCBty1icBWL/Vk7etRsjIHU7IBrKOeLJ4YExv98u\nw1Nx+Hs5YB/4fEv8D8KO2kbCykUfCk5YV2logqNdGMEizUo4iBxUxpZB1c2P\nDJvq5rjCZyZ2snJilBZs9Ok5+P2BssHehy8VK5vcBtpi4L3NV4vBgmvjRBRA\nD+u9ph7/1ksegKBWnPAFPugdpbjkWu4i8Jg0IAelTyhIU9oL+H7z6J41p8P0\nR9kanotrEm8xWu4rSHvMDyAL27jRCwyACfyv8wRswjOjN0o25ALD555xng7O\nSWwR4z8zEC2ulMNGqiK8hShK08HYajxNcFtWJoczG27+MjCTf8wjO8gbbiu+\nfryVuZGn3lXxQhBGAAu0qH60l762PIfTRSWGGSg6nuzw9u1RyvAGLPAtdv1o\n/8LJQET35t17+1PP6tVA9pQ57BipBxFxs0Bzz14vsiUY4TmbkOOtxRWop6O8\ncul4\r\n=cYp0\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHx/rVCvFjARTlYvDqv3WRSHJCPDlOeDD3rUNLcohPNgAiBJv80WyV8dzWGFglMWrJxMWNlYTKFUPRJsM15k0xTkUw=="}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"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":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-formfield_0.19.0-canary.3babab12.0_1599791795408_0.38493821547645557"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.a4481e6f.0":{"name":"@material/mwc-formfield","version":"0.19.0-canary.a4481e6f.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=8.0.0-canary.744bfe5d8.0","@material/mwc-base":"0.19.0-canary.a4481e6f.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/mwc-checkbox":"0.19.0-canary.a4481e6f.0","@material/mwc-radio":"0.19.0-canary.a4481e6f.0","@material/mwc-switch":"0.19.0-canary.a4481e6f.0","@material/rtl":"=8.0.0-canary.744bfe5d8.0","@material/theme":"=8.0.0-canary.744bfe5d8.0","@material/typography":"=8.0.0-canary.744bfe5d8.0"},"publishConfig":{"access":"public"},"gitHead":"de37747ea53bd97e6674642d17f239407a14ba71","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/de37747ea53bd97e6674642d17f239407a14ba71/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/de37747ea53bd97e6674642d17f239407a14ba71/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/de37747ea53bd97e6674642d17f239407a14ba71/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/de37747ea53bd97e6674642d17f239407a14ba71/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n|----  | -----------\n| `--mdc-typography-body2-<PROPERTY>` | Styles the typography of the formfield.\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.19.0-canary.a4481e6f.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-fV6BmjhopA2HRrDnWPPEBu5UfqXWdXwrflwHJrn63iY6hnmsxeLDz6ynMXJCy1qVQ/zjbrm7DV+B0ASpCxE+AA==","shasum":"50f5b43d11113a1ce822625216aa04eb6f18a638","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.19.0-canary.a4481e6f.0.tgz","fileCount":13,"unpackedSize":40613,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfWuWSCRA9TVsSAnZWagAAxM4QAIwLqQl8DCjVk/A04pmT\nOO8qMmnwg8r7ykqqvhwZ/e3JVXKKeL6t1yO2qJvGLrbA9cBRkXQdRHtzjneI\nPu1Y92PT2xW/likr7tmTX6IFJqSQbqjoGntwCWZkOSoQgxuh3mnRRfgMiZqN\nR69iXSvuDOyZLumCY53WUAt9nEQsXY4H4tIe+DTIMAQONwMYotrOpSMUQ5wg\nu8xWrVczjqNIMybglBxwGS/SuHY5EeaGVKvl/Z53wFxMMF7fNq3nTAwNMljv\nfrudRwcAHPXTRrnNdHbFhF4y1l+ufJ00i/WkEg/gIYj6N6wYp7lAZ91x5mlU\nU2rVC5Tnok7yqqunGq3IhlyAWmRK1a+7s/xk8GQ4eYQXA65H7IIHoeZwi9ZP\nDR060B5AOLiQxeKSR7oo5njwc4bvWCPlEt5lbs5OHw87YmoNFUntZ+hj6AFV\nNzYwmiHsEaTJsORd1WsWTlXbqlTA28u+lATtFgJQTvfnhkdUmB+w6Rs8P0tJ\nM2TKJ5aipFSpr+8y+o2wUsCidYjlsUiL25YrATbn3Grf4qq9hrW4NIR0BupM\nr+/HiLLoVsnv8/kBMYOfv/hlEkEkfL4Eu/oBsLOdSRTZKIVxU59c5ZtBZBy3\n4FHMpgap/UbOKvDyz2E4dIN5A+/wOgdkAhItjS7JTFzSmO0xLZEan20uX1LX\nm7jG\r\n=tTQK\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEXq3MOM+/4/oOpyBmp6BASNzSz/9nAYegBPphOH7jG2AiEA/uZoflvnH6vJ04sIM4SUwKeUbP4WOERpr/jLoVRfTKY="}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"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":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-formfield_0.19.0-canary.a4481e6f.0_1599792529742_0.28121526293402144"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.a9177836.0":{"name":"@material/mwc-formfield","version":"0.19.0-canary.a9177836.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=8.0.0-canary.744bfe5d8.0","@material/mwc-base":"0.19.0-canary.a9177836.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/mwc-checkbox":"0.19.0-canary.a9177836.0","@material/mwc-radio":"0.19.0-canary.a9177836.0","@material/mwc-switch":"0.19.0-canary.a9177836.0","@material/rtl":"=8.0.0-canary.744bfe5d8.0","@material/theme":"=8.0.0-canary.744bfe5d8.0","@material/typography":"=8.0.0-canary.744bfe5d8.0"},"publishConfig":{"access":"public"},"gitHead":"172468b3d6a388a8fa5360f5754a4a7dec5b878e","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/172468b3d6a388a8fa5360f5754a4a7dec5b878e/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/172468b3d6a388a8fa5360f5754a4a7dec5b878e/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/172468b3d6a388a8fa5360f5754a4a7dec5b878e/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/172468b3d6a388a8fa5360f5754a4a7dec5b878e/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n|----  | -----------\n| `--mdc-typography-body2-<PROPERTY>` | Styles the typography of the formfield.\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.19.0-canary.a9177836.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-ZvwxPKgEKHtkqYNSkPfPAuNCN2EMazXJHmaX4VaThLUSETePHsbu+TQU3l58s3n0m7CuUJRhGdNbhdVlZEGd0Q==","shasum":"857421dff8f1fa46c1bbfa9a6293c1a47012d63a","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.19.0-canary.a9177836.0.tgz","fileCount":13,"unpackedSize":40613,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfW7gVCRA9TVsSAnZWagAADi0P/3jj58r39fJ3Br73Ube4\nFpsbNjTizQx10UxAo159tGd66/ORDCVrytOARw1z/njdod7pXNqo7Wwhmyp/\nNXvpAciznf1vLXknOa8krgiytYPujg1bML7zVkq/H3af7evutX888bHk7Zq8\n7F2xKzYRztPRGPlgnL/hg8TQ8iIMFzLAcsRKbO2jW3pb5GDJRJcWzY8uO4/h\nKoYK9FP4P27Ua1D2qDRPzm+ZmcIvZn+2FIZFkLYyL5zHpxa0hlN8RG3za48o\nK5o7YEn0Ddfw76VRJ4bOd9brWqDzso+upa+T9unARfkfPpKM0e1w3tOJOXrO\nkWLWASCrvHUgPlQ0SpyXu6gmqhnq4tKHgT+evx9Wd41NSaMh44QSk7/ELrij\nNWAqFbWn/gjqmg54lFLKlbBvfim7nccE5vV74CysmOjLALAgOifdhiUHR8bX\nFDQLnoNDgEW3G1No5h68n5dQV07s2zYo7XpDNW/29iX02V/Z9NeQ++TnqzmM\nwjkV4jlfUzT/ysMTpltL/USeLeBjbgX2v25WLgDAzwGZ+kGk52k8gsQCihBX\nlttAdLbTLaqU1KtCQg2EzKVOn+PWgqiFZq6ykJK97cbZyIeL6d55Lbjb/P/2\n1QfheVcOraa5Qbsv7PxdsKA+rQQIpE8rlBj7nfmviHDGqc2mW0rddr+31wQw\nH5TL\r\n=OWcm\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDmKoCl+N0k3YyWkT3eYYSPM+GC/fbLl/IRi8OYCSM/yAIhAJCt6s6lTIQZrBnu/5mUH48Lenq9+NNeUccVHOY0ejkP"}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"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":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-formfield_0.19.0-canary.a9177836.0_1599846421179_0.48397608631402966"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.b102a3c8.0":{"name":"@material/mwc-formfield","version":"0.19.0-canary.b102a3c8.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=8.0.0-canary.319bf66de.0","@material/mwc-base":"0.19.0-canary.b102a3c8.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/mwc-checkbox":"0.19.0-canary.b102a3c8.0","@material/mwc-radio":"0.19.0-canary.b102a3c8.0","@material/mwc-switch":"0.19.0-canary.b102a3c8.0","@material/rtl":"=8.0.0-canary.319bf66de.0","@material/theme":"=8.0.0-canary.319bf66de.0","@material/typography":"=8.0.0-canary.319bf66de.0"},"publishConfig":{"access":"public"},"gitHead":"6e9858879b6405bc690bd677e308d5197c609741","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6e9858879b6405bc690bd677e308d5197c609741/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6e9858879b6405bc690bd677e308d5197c609741/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6e9858879b6405bc690bd677e308d5197c609741/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6e9858879b6405bc690bd677e308d5197c609741/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n|----  | -----------\n| `--mdc-typography-body2-<PROPERTY>` | Styles the typography of the formfield.\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.19.0-canary.b102a3c8.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-sEREwnVzrnnn6WhUba+LJGAydn3xVbb3tQdpKd4YcSwsnLXM/JeNsBIYAq3SGynC26a4Gzg37k2hCq6WGZSqKw==","shasum":"5bb2709ee096a4a264a222012a7774a7ac38ccb8","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.19.0-canary.b102a3c8.0.tgz","fileCount":13,"unpackedSize":40613,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfX87CCRA9TVsSAnZWagAASCcP/RtCuOSLdiZiFD36jFUI\n5D4KhYYmJPlFMzICdn6FoTLpFf5tWT1O+pMne/t1+Ltz965/FPEIw/vj+hOf\n5LDEGYb6Q6TsD9qFqSgsG5Pmd04XpXoAIoXzDzC2dE+UgGiZqrFiNxNUi1r2\nQvlX3tE+R9di6YA7oGw6omxFUpb+Byb7GHZLVjWWY0iMc1SXRUFdX8+P5Wvw\nwrJ9IuBNniLyVve1r5/fyL8BT0qTye3I56mu/PXcE6ieVb9F+vKh1Ic/mcM7\nnF0s2j9ifiHUPE08BDR9GUcWGe97KReVRv3MORssxkGNeGOHZE701J81Kpko\ngRTaO6lG+XY0ziDAKa6nmdlYI7pNHJJ0uQY9S4FziMOMSH2Tbx0au0/lLi8d\n4SBL02EDv4Ra+EazA8YlM50y53etGjTnro6N/OGzrTMXBWRAjb60vvDQ1zW0\nOBpPJIy68vSLcphWlqwm2hjvad4n2Wo/LILgoJD8iZnCBveltFzREAhsHlAt\nVWIDUcCoOayzHPxnSLquDTN0PLyj7OrDUnYmxGcS2KqeyO4sQNFD/WAnmvez\nRSrzuS2kfDfh8XB3oKtV1PFsy/pg+BVCbl5wy+xLpUiSeskwhM1LzW5SzljS\nYiXq7ME74n4lzA+bvJlu9De+G0oMBEOILOQxVWjMinn7PGFrnKziYzfSCdok\nQpDq\r\n=gumz\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIG/CMHPXpKdiIYRS/T3WNTvwA2N3k8Zh5SOmV30oq/DrAiBw/KKQP2rzIrdH5yJD+wpx5aThICzg9Js8+RR1vmbDaQ=="}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"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":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-formfield_0.19.0-canary.b102a3c8.0_1600114369649_0.07925797170991022"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.a7fbc707.0":{"name":"@material/mwc-formfield","version":"0.19.0-canary.a7fbc707.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=8.0.0-canary.319bf66de.0","@material/mwc-base":"0.19.0-canary.a7fbc707.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/mwc-checkbox":"0.19.0-canary.a7fbc707.0","@material/mwc-radio":"0.19.0-canary.a7fbc707.0","@material/mwc-switch":"0.19.0-canary.a7fbc707.0","@material/rtl":"=8.0.0-canary.319bf66de.0","@material/theme":"=8.0.0-canary.319bf66de.0","@material/typography":"=8.0.0-canary.319bf66de.0"},"publishConfig":{"access":"public"},"gitHead":"02e804c299cde57ab03b33a403a43803fa9868dc","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/02e804c299cde57ab03b33a403a43803fa9868dc/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/02e804c299cde57ab03b33a403a43803fa9868dc/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/02e804c299cde57ab03b33a403a43803fa9868dc/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/02e804c299cde57ab03b33a403a43803fa9868dc/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n|----  | -----------\n| `--mdc-typography-body2-<PROPERTY>` | Styles the typography of the formfield.\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.19.0-canary.a7fbc707.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-SmJOsAPrxJIx306fD3k63bIZI9zb5TjRffwwt7YLK6IDDAe7amwUO0XMly3O4opR6H2g19OOzGJYWRvp4wwBmw==","shasum":"f57b3bcbd9f8bc31f77c7c21d41476ac345b6c84","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.19.0-canary.a7fbc707.0.tgz","fileCount":13,"unpackedSize":40613,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfYOYwCRA9TVsSAnZWagAAeKcQAIbi7hCeKojtZCOMbmeu\nddOZRd+A3d2JdQEcUtu1huvrbYEmkKyhy3kyHHDj+8Xid57nRF4i1TBsl92Q\npJ3PaJ1fuF2ueHVn8pnEohvgrZ4VPNdcpcWQxfG8BvmLUDj5b+3RDQYfKZEG\nYZzl/6qKiQFn/+z+k3H60cRZfFPalf8ab4bm2rZvDzwCcljiLzkKMYtyMBN9\nwf9GYU4WaDN5lgocp7ntYFHOLNjtWilSF0sxPo5bBlsr/iRYk+uMXTaJJHOy\nppbPiEtC09X0hJsln/BRtVKTcZupjj3MyfECKu7pzPnLDByvtLe0LszQeFR9\nk91BLAGrZQ65/6kbAs5+VnWPMqDGQODYNaGnawYpExbcp0150YuUEaFtotc0\nfryLXoZoU2/ta8KZ/+l3j2xDYNyAzRygD+CG8SAFk2oLFEtOHKXMpbGyB1hB\nj2TN6xCzFlpdtjbuI1USE19dqxFJDIg/MJiGC2GdvMHezTvpeN8HMNebEELk\ndH8XLRHG50IvTBe5Ik1zaZ2D7pL+cguiKymJ07hedtSXyAzXnDiu5gfNNUNC\n2iAAckc1VcfgVxNQfezw8jCUMtNu3zppFlB52yOThi4nipjuSelVz25DwmAi\nPbn0IEZS3v55kU3RKX/7GfouE54OhFr+fEfT9QOGcp94RRL2/CjTMdNnDZ5E\n2b7D\r\n=4fsi\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFh2W2b8AW/FyuN3rcQJqkxLWhMM/bNTQLBcdDrEtaBhAiEAqG57TTVa/2pWWqLncdm3NYK/tUkGjL4GDkEGyhNO7l8="}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"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":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-formfield_0.19.0-canary.a7fbc707.0_1600185903641_0.8592963622554268"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.ed6b8660.0":{"name":"@material/mwc-formfield","version":"0.19.0-canary.ed6b8660.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=8.0.0-canary.319bf66de.0","@material/mwc-base":"0.19.0-canary.ed6b8660.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/mwc-checkbox":"0.19.0-canary.ed6b8660.0","@material/mwc-radio":"0.19.0-canary.ed6b8660.0","@material/mwc-switch":"0.19.0-canary.ed6b8660.0","@material/rtl":"=8.0.0-canary.319bf66de.0","@material/theme":"=8.0.0-canary.319bf66de.0","@material/typography":"=8.0.0-canary.319bf66de.0"},"publishConfig":{"access":"public"},"gitHead":"1367f8f205fb56c27d6146b261ef87d62751f903","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1367f8f205fb56c27d6146b261ef87d62751f903/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1367f8f205fb56c27d6146b261ef87d62751f903/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1367f8f205fb56c27d6146b261ef87d62751f903/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1367f8f205fb56c27d6146b261ef87d62751f903/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n|----  | -----------\n| `--mdc-typography-body2-<PROPERTY>` | Styles the typography of the formfield.\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.19.0-canary.ed6b8660.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-t9y/hUyGcHJzbpxETYm+zDLli5Iy6DOeDJgnCyURYJZ0s9pIOrIVcEKJJ8ae8uKz73eHR5ZlhUB4RZuMMor4+Q==","shasum":"c937fdf4adf1fa1101f37b79d4b8c0374e25c346","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.19.0-canary.ed6b8660.0.tgz","fileCount":13,"unpackedSize":40613,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfYPjGCRA9TVsSAnZWagAA6JcP/1Vno6GPG/8c+ltpR+is\nSvfwzKIzEnQyG/N0W0ErmmOoUxi5vJuheddGgJPcwnHhcTETIypSF3x4+N0p\nfiyMfXXGgT7/pvlvneFLtCONMTs93rfhmEpq0RZw5PEjNbQ35xFw9ocHSDsJ\nNRWKwPfmESVqgOg5iU7NDtM30PHef3YTx4huieaVcVryjRqbPQQoKZmznD0o\neZ8sSFHGWdv80tDy0m0YQiNHEp5RGJKBSITPx6u+hdbDKho5TOvhOtvTtOrm\n6QZ7MaxaXBZuEGK1mdZFmQyTcUT21cL58DZq2iHXG/bTLpYP2RdlRV0X50YU\nxy+t+rFgmYmlWRO3AxSmkP9YNqbRWczBl/dsnGiU2TS9DhNsYID7u131pnC+\nOTINtTo0jrrVLts45Ck1aKJaZ3Eby75gk+iMh+o8YQQbmDiaO4lzUaOluOSJ\nWlFrq9jsEegxSaUo2mjtweMHk2Jlu/UnYGpU92I18CwlvppXwUqs8g384RkM\nHzR6tmKjT+tqjqvWAhAVWhVfUtyCTriMjodeXE8E5G9j1phG50ll0nX3CWar\njvKs4XuSB/HHBo/OETzBO6r9tYny/y3zGrpTd4u6bgeIlZohQFuOlDrpAfOq\nFYUfIAI5RGWuSMDNYWM8Y9XUOFOEZ36eJxvCHhPoNSOR9aQuQPVQyiTHBGlV\nv8Te\r\n=p0gp\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCBZEXxGJbotPhkUWpCoNLCPC6/V/NqwYfb6n+KvOA/4QIgec2RC34GNX4EyGjDlfnqaY8gvPqRH9a+ikmcK6mpyaY="}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"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":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-formfield_0.19.0-canary.ed6b8660.0_1600190662068_0.36139126802892396"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.9c2331f5.0":{"name":"@material/mwc-formfield","version":"0.19.0-canary.9c2331f5.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=8.0.0-canary.319bf66de.0","@material/mwc-base":"0.19.0-canary.9c2331f5.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/mwc-checkbox":"0.19.0-canary.9c2331f5.0","@material/mwc-radio":"0.19.0-canary.9c2331f5.0","@material/mwc-switch":"0.19.0-canary.9c2331f5.0","@material/rtl":"=8.0.0-canary.319bf66de.0","@material/theme":"=8.0.0-canary.319bf66de.0","@material/typography":"=8.0.0-canary.319bf66de.0"},"publishConfig":{"access":"public"},"gitHead":"59f9c402cf61ed25b9563e2c228a24b4fb13e1cd","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/59f9c402cf61ed25b9563e2c228a24b4fb13e1cd/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/59f9c402cf61ed25b9563e2c228a24b4fb13e1cd/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/59f9c402cf61ed25b9563e2c228a24b4fb13e1cd/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/59f9c402cf61ed25b9563e2c228a24b4fb13e1cd/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n|----  | -----------\n| `--mdc-typography-body2-<PROPERTY>` | Styles the typography of the formfield.\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.19.0-canary.9c2331f5.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-qRBZNJFldvTg9TvAE0rEjeNjH3yemHYM3Y/JckUE6+M2rVvpcFdxw/HeoW9VIJxyCs5FOzEQxdyicp8AHcSQ4Q==","shasum":"eedbad5a80337e5b9147baac7d65cd99398c1ec5","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.19.0-canary.9c2331f5.0.tgz","fileCount":13,"unpackedSize":40613,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfYP6DCRA9TVsSAnZWagAAFfEP/1hjvOAA4VlgILINOtmU\nTgewtyPJIo7LW+hTP+BEWvK+1cpNq7DvojgkLOKPREIb3ESpZ7JUND0kTgRM\nysPjihcn20xHFy12cNdeIBO8j9Xd8aLIArBhAAKzE++xtCxLgxag0aMUZq8F\nwRySYXsSsxG4k387ylpcn9475Yq0+WnxF2G+sAC2ynyJV8lVEEd46gAu9HNC\nw7woEkl4iTgm3Wi9EQPwunzrxicvjCTPueoz2u4m40BHRnQRILju3E3dIXYY\nUi2Lm3e+5WvEZONbDgzyztcBu1DuvLuziyRA8nWGgNxo1tZBzT2t6fcLqK+P\nubSOKcIzDrtDpuG0KkKiPF+wvWPs7kV5XAG6yZV3KRwUXnmZjZ4NyaNagIca\n+FeKYgsX6nneRkKmZyxNsam+opNbefsRfAoGrAubZoL4M9REWUHlYxcrAXj/\nJDeJsL76hRtZTY2SxmX5HvN18ZYpRQ/GlxGnJobIdyLTWQdmetd+mPGJGOWh\nZNV8LDugAurW3iAkPTmjIZEXA7Ky2qkbmzxytKfr8iBQpGGEQqoTOObZ/d0f\nO1dUrm8lKKZVhdpPn3p/ShlaWo/PrmJJjd73FGoGgzT0EVOr60rsSk64VvgA\n5ntJkUg/TmTMjOekL8nKR88oxHIABeCCozDXJjex0VkBkmlg3avlw2W2FtsD\n7Om6\r\n=5+k0\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIB5pqVq41wSyworXLqWOAnhQsSaxx5HhQaklGbTEDOkbAiEA/PFyiMf4L6+CX+kNYhf9lQBxxqWbQpMei14AXald4Hw="}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"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":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-formfield_0.19.0-canary.9c2331f5.0_1600192131189_0.5606376060640348"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.63a5f088.0":{"name":"@material/mwc-formfield","version":"0.19.0-canary.63a5f088.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=8.0.0-canary.a831d4799.0","@material/mwc-base":"0.19.0-canary.63a5f088.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/mwc-checkbox":"0.19.0-canary.63a5f088.0","@material/mwc-radio":"0.19.0-canary.63a5f088.0","@material/mwc-switch":"0.19.0-canary.63a5f088.0","@material/rtl":"=8.0.0-canary.a831d4799.0","@material/theme":"=8.0.0-canary.a831d4799.0","@material/typography":"=8.0.0-canary.a831d4799.0"},"publishConfig":{"access":"public"},"gitHead":"e26f8baf20e7e3a7056a6b95b14cbd94c380a1a3","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e26f8baf20e7e3a7056a6b95b14cbd94c380a1a3/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e26f8baf20e7e3a7056a6b95b14cbd94c380a1a3/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e26f8baf20e7e3a7056a6b95b14cbd94c380a1a3/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e26f8baf20e7e3a7056a6b95b14cbd94c380a1a3/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n|----  | -----------\n| `--mdc-typography-body2-<PROPERTY>` | Styles the typography of the formfield.\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.19.0-canary.63a5f088.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-KA8sGEiwsWimo4c4qfQMVen9TCK0hn76kgBCYBtIuFoMGWjji7hueoZ6Coo6DxbrOhfRBMkKooy5MomD2jD8iQ==","shasum":"919a8e5a7576e9c40c9d73ecad7955bafb1acc1a","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.19.0-canary.63a5f088.0.tgz","fileCount":13,"unpackedSize":40613,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfYoWTCRA9TVsSAnZWagAAYEUP/31oX3mBYmE+EqFmVrUY\nbSfY3At5P09BswxOtkH8taecOZTRMflqFrYNJoBpdcNiBkBi3CuBIozCrf6c\nR+lRXDx87KafzDK9NbdJLAKSOJ0RS+PX4GOQ4iwZewgOHppYTlB/Y/O1jBOj\nmtLmUYIXmSU68bGy3+gYckXYeYgmOPGy2UZ0PRvCiEgkmq+YzsMBXdszXTLZ\nG5rLi/Vvy+cu6PtD2ZMIpZ92Mfe5Ak0V5ZA9zjxjfjlVK9l8+tL0f44rtHkz\n6HHRg/ZcdbLv7/C7TuH6KlOhxbEpLS4AlJXsYtNhkuC9/nVUSpSaHk28g4ES\nJugrfIrvSx4xGGR/dMF/ZOJ8OYNgv0RFVvSaVGXDcBFo9hNQq28Yo3unMkKY\n32W3bBbSTebZIEoK9p3aL2NLxycG1PZDIsUql//adTKWjpyigowO+kEDXnNv\nwiSBUoA3e44gf4phQGXAx5h/4Gdtw8rVsr5hYL6M6aUMbl7nowglrmi9uO/s\nQgKskEjR3tyl6E1ex8RwfDZwDEXkOcV1EmPYAI8RwXNwhO4vepg8bCRWD36l\naEmRk3OEu1U/ArfLINKArHTccWn8eTk0zOZF7W4qMw3YYU8kWi+UqR57O5cM\nOZdqZL0YDAcVwZayYNaUgFihaDB+P+QPyqyg5KueEJaz+uH+HcbEeuUqLZIx\nitio\r\n=wS6G\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHXqCRpIKtZtLDdzaM5UEjNgvALA1LT02CFVIwd4IE4aAiEA5yZgveKtC+8ZaHj3VOulL92G/9Sk/k5uDOj8w1jyl0M="}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"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":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-formfield_0.19.0-canary.63a5f088.0_1600292243140_0.07198411138562699"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.b7995e49.0":{"name":"@material/mwc-formfield","version":"0.19.0-canary.b7995e49.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=8.0.0-canary.a831d4799.0","@material/mwc-base":"0.19.0-canary.b7995e49.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/mwc-checkbox":"0.19.0-canary.b7995e49.0","@material/mwc-radio":"0.19.0-canary.b7995e49.0","@material/mwc-switch":"0.19.0-canary.b7995e49.0","@material/rtl":"=8.0.0-canary.a831d4799.0","@material/theme":"=8.0.0-canary.a831d4799.0","@material/typography":"=8.0.0-canary.a831d4799.0"},"publishConfig":{"access":"public"},"gitHead":"18f169aac3491f89184c2463a837b86dba845e82","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/18f169aac3491f89184c2463a837b86dba845e82/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/18f169aac3491f89184c2463a837b86dba845e82/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/18f169aac3491f89184c2463a837b86dba845e82/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/18f169aac3491f89184c2463a837b86dba845e82/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n|----  | -----------\n| `--mdc-typography-body2-<PROPERTY>` | Styles the typography of the formfield.\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.19.0-canary.b7995e49.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-nEHTHEsNntQR/vtmapq8vF3LsejigHCuzXtCxclkcHB/VuyiVlnVBCGCRDsTXTFxEXvyMflQcMj4TQdVmWWGjQ==","shasum":"6e1172cce7b0b71aa6222e70b151afa487fa775f","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.19.0-canary.b7995e49.0.tgz","fileCount":13,"unpackedSize":40613,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfYp8OCRA9TVsSAnZWagAAbHEQAIFyEEf8FBlMgEi+T/gk\nK/By7YZPgB9R0wbJWJovzN8KGt864h8bMJEGULXAFwRzokrdDURUCS+jEIWF\nd4d4dlomEn0uoY+zahBs2jY7LanzG2oHStK3PRyfhO+oluhRuaIP52GTgChC\nLVptNyOsxHLISIUd2WSLocRsn6047MTVJ3tfcv2iWWmHSvWNYZgsJyM+hPcJ\nlpTpWxrlTftbaJo46Kup8sp2RYnQfeixgkYMeM/1vKPI3qdG//GrvgSCTJf8\n93VI5HY+vblNjkS5YnDogikmFFuxKAQt4hQMQKd6UaiIlhPT2QSKfMYm6C3a\nveawwelCH+s/P+UQPmrjOH7zOAa2B71eIbwtHP3Cfv7eLUT3/uN3c9389hBK\nvrqO+IfLgcLGnaohnns709lIRbwnUp+LW/wGxLlhLfJFmGh5r+XdFfcPm2EQ\nf9X4uxDvyvVPYt97I99HDlB1x2rUlbHGLyobez6O7gBfTbKiTPbjikp1vXqM\n3a2KfiICa56m0TPSxQlwH9s+0nj5lrVHnXHcNR1gb0lEoj4X0zmcXnoiwUj/\nac5IlDYc0cFYfIhoyvzEWn2RpmG//rmlm2gd033K/fUaXB+Iil9iKFYjK1Y1\nkNVQ6uXs3XtRmzJZujdPG0RLMY7wfIVUOiv5hQNBeozG+bINq2AGBMAoUWC5\n4/PG\r\n=BR2f\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCSQJm+9A3Fu2IciK56cN8u/uO82X3bQm/YKV5mr3CDtQIhAMmtG/v0Rcz/y4x40Q6d/PGxPuN79aJ5Ch9AAFtV5aeF"}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"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":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-formfield_0.19.0-canary.b7995e49.0_1600298766149_0.2168433894956625"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.0da3ec97.0":{"name":"@material/mwc-formfield","version":"0.19.0-canary.0da3ec97.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=8.0.0-canary.a831d4799.0","@material/mwc-base":"0.19.0-canary.0da3ec97.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/mwc-checkbox":"0.19.0-canary.0da3ec97.0","@material/mwc-radio":"0.19.0-canary.0da3ec97.0","@material/mwc-switch":"0.19.0-canary.0da3ec97.0","@material/rtl":"=8.0.0-canary.a831d4799.0","@material/theme":"=8.0.0-canary.a831d4799.0","@material/typography":"=8.0.0-canary.a831d4799.0"},"publishConfig":{"access":"public"},"gitHead":"5f18f76403ebea15763db5e696b84d6d20a3768e","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5f18f76403ebea15763db5e696b84d6d20a3768e/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5f18f76403ebea15763db5e696b84d6d20a3768e/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5f18f76403ebea15763db5e696b84d6d20a3768e/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5f18f76403ebea15763db5e696b84d6d20a3768e/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n|----  | -----------\n| `--mdc-typography-body2-<PROPERTY>` | Styles the typography of the formfield.\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.19.0-canary.0da3ec97.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-2zI+U3hHHsOiFB34mGCHqVji1Py02cQtuNFoxNAPsms3B/oOgPJJPWk79j6S4GMK0RwhlGDqOt/4UaLzwwmxfA==","shasum":"9412c8cfb71c609e938c6cacf29c78b667307c49","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.19.0-canary.0da3ec97.0.tgz","fileCount":13,"unpackedSize":40613,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfaSRLCRA9TVsSAnZWagAAbK4QAIjXcKnwzaoVLWS6XA6X\n3VK+j0eZfEgYHiAivE/MX0+uNpNgUMX4mhLtwywNxefPcKzJvK4nv73oD/rM\nAiAticaHMz/zTZpL1QJwiKhHJncZLzhME2QkA1sFDjALr+E9RFyAOrQ/m4bq\noMXLOsGeTXK9YP8aY07kFCExV6QOamFH8rWZ4CvYNCG3woOpw3qX5+gAxQ5Y\noHoa6lPRGhuYNFNl5jZzCF3V3jbxEeEg/Xadr/qXEnGpAhE5Hyt/jJx0EAoi\nuvxHh6TnWlFTcFGTR6C/XgxDJtmCqR2ZLo/4Ht3HpPDbMNO9XF+3HzhbOhtI\nQS9bEghA4tPxOg0lam0w/WSyWG/nmZN6ayHEvCeqslDwiP6bns8rfAAYdCCH\n8pX1immvTjkc9ZEsVG4JDI5e8KzzRUvQI9snHeIK76IrYdsJdN7K/pod0CjN\nk3sKzFY0JHKNT0uRIEgP2LuLNwX4BKvFMIN4bktMHSExgDz1egyjMLZUPPQf\nB5UZV2eHtNVIG+mf/0oqWz1q+jYRuP6itxKD0zmBBTbIwd5raqkFVs4Qt8Ul\nsTp6rj/Vebp3qdexXGZzm4aFO3kxDsoj8LRoW7y2u29kSnzG1GA9TfcVxDPE\nF1TkNTDPpZvlzjQ3Hv2Y2WhXTVH3YB9NNxaqlLLKtR5H/Qv+AoROzMAzRDbC\nt8fP\r\n=uWOz\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDt0a+Ix68zexF76DatPDITh8ggOIZNwiToKKBljiFnfQIhAKEvY6f/qkC3xIuzrp5JI+Wn0hxpCU3KKMhWXyC8Xxqw"}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"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":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-formfield_0.19.0-canary.0da3ec97.0_1600726090490_0.48631540551323593"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.a0793c96.0":{"name":"@material/mwc-formfield","version":"0.19.0-canary.a0793c96.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=8.0.0-canary.4e5c350c2.0","@material/mwc-base":"0.19.0-canary.a0793c96.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/mwc-checkbox":"0.19.0-canary.a0793c96.0","@material/mwc-radio":"0.19.0-canary.a0793c96.0","@material/mwc-switch":"0.19.0-canary.a0793c96.0","@material/rtl":"=8.0.0-canary.4e5c350c2.0","@material/theme":"=8.0.0-canary.4e5c350c2.0","@material/typography":"=8.0.0-canary.4e5c350c2.0"},"publishConfig":{"access":"public"},"gitHead":"4332e148b28dc28d9b324306eb18987b31a80ca5","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4332e148b28dc28d9b324306eb18987b31a80ca5/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4332e148b28dc28d9b324306eb18987b31a80ca5/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4332e148b28dc28d9b324306eb18987b31a80ca5/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4332e148b28dc28d9b324306eb18987b31a80ca5/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n|----  | -----------\n| `--mdc-typography-body2-<PROPERTY>` | Styles the typography of the formfield.\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.19.0-canary.a0793c96.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-fgKjT7VHGeKBNvtOGx1Z71ieSACf4EEF3TZN1QHN0NVXshJNZknglWK250AnWaDEqf+Zv3GYxl4I+S57LWoqOw==","shasum":"4ee3d104491993761c01a70e4fe9e131ab3c77d9","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.19.0-canary.a0793c96.0.tgz","fileCount":13,"unpackedSize":40613,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfai6BCRA9TVsSAnZWagAAorEP/15ix5Qfvk8pNv5xHr3f\n881YHyrs/9MJXa3ic6HyDKjF2ubqdFzAwcRHY9z/8ZRSuk3Fe3PrDh9h4jjM\nnYfYnk6isq2XI7Aa6m13qCGrcvBRT5CX6FTR7zzA7NGWEym+AlyFda2Lg0qd\nY4yR9wBIrpAUnN+brJfD3Ys3sTmb2xxR6935Z5JJMJUF6bf9TWLEKjAcLCbu\ncmErQ5RGW9TGfyZLHlBxZSiegrgC/2xohwrANHJ1RQcvzO9vu7v+mnKF9adf\nC09zSLjEDWo0cDzNSpBpGkcUS70zXT/cz1o+1P7bXpa1pIo8AmirAaG59grl\nnzTH/X5sWxD3hufxTGPRV5kH9HDvmRQlZeG2LTodKMtkTiLy6m/yAEVr0zot\ntSOdhyF6nkfbafjVxxXYM4xvdC+uDxiJ3aewxq0tKHUFT58PaisR9kOMByno\nY5MvsEJRfQHW43adweVwUcMSE9nAXR33bf3cE7XP1vuvubG7P+4O77FDMK1p\n796lz2elsAqM2WD5CaQRpwfg5hjEZzftgv1SiRgL7gQV7lM5wtFqJ/gZHAkR\n4/tqQ/NKN9Jz51xrSSQo3+9UoUSUKL0bQOWr1NRlmYjGKnQ4SzJ3z+s18ZSb\nEi9U/Dvcs/HpDuN6JsH8dln4DMQtqSX7+p3CxhPBTkU7wupgaN1qfC0ISrRO\noyDn\r\n=vpPG\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIE3Tpz427qh9u1nqeLZoyuZTByxVxt45MzmlWhhwXuH+AiEAsthmiQyFG6DcOfQIuuuyao8/Ve8mCvicsS3F3xxU8+o="}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"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":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-formfield_0.19.0-canary.a0793c96.0_1600794241142_0.17404694320978953"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.06998a3e.0":{"name":"@material/mwc-formfield","version":"0.19.0-canary.06998a3e.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=8.0.0-canary.4e5c350c2.0","@material/mwc-base":"0.19.0-canary.06998a3e.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/mwc-checkbox":"0.19.0-canary.06998a3e.0","@material/mwc-radio":"0.19.0-canary.06998a3e.0","@material/mwc-switch":"0.19.0-canary.06998a3e.0","@material/rtl":"=8.0.0-canary.4e5c350c2.0","@material/theme":"=8.0.0-canary.4e5c350c2.0","@material/typography":"=8.0.0-canary.4e5c350c2.0"},"publishConfig":{"access":"public"},"gitHead":"decf3423597b14fccc721d29e0ec911320eee3a2","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/decf3423597b14fccc721d29e0ec911320eee3a2/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/decf3423597b14fccc721d29e0ec911320eee3a2/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/decf3423597b14fccc721d29e0ec911320eee3a2/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/decf3423597b14fccc721d29e0ec911320eee3a2/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n|----  | -----------\n| `--mdc-typography-body2-<PROPERTY>` | Styles the typography of the formfield.\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.19.0-canary.06998a3e.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-PDvVKFMFRNE+vKK7awt9tHvXOAZs9jyC93wXTuf7c4GHtvPR/sWL4dRc3y/5BbPGb0oYZ9d/nY6OBHpVZhPFtA==","shasum":"d1340661d77493b4bcf73854205d9813f86a15e1","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.19.0-canary.06998a3e.0.tgz","fileCount":13,"unpackedSize":40613,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfakGNCRA9TVsSAnZWagAA6PAQAICGRJmtV64m4A/KqQvK\nmIgq2gMiHne+19p6Fyzwm27GgBkF2yu5S54xpGbKwCvrIXjrBDbBsBx9eYR3\no0KmL9y/igavBgTaEHOfVfup044qK9ggj8XMt1iqVthEOJeze0Cyu4J2K35E\nyYrpHexFeZ3VjhKcR5GTP+AYxDPU40dyEd9yyntwWI5Y3wyPkV6MVDCQWyKX\n4tmcrQtZ9GAMKOrrDI8zirx/HbeVZpZ5DVagMCXXT0OrrmMzs4dNOVEnXAPG\nBFiOhDHvZbInf1KAE8QHD94dpCNSRxJUpAg+MLgeHWiLRElD8TZFEZRbjWMo\nIrtpHhp2TTuJH5eDaX4NhrVzlfv/ahdDKtzTiiUb7Aw9v525XHzne3eWIKvm\nHIQSSvC6HXtHSCRZIPXLsx9nh/SlXiuwBXWoxWB1NSJPNF1CdbejrrLHPmSi\nW80Ddg7KbFNiciPJeLFD414Ca++3oDE/f+RSdYd2ld2+laz86UdxAb0DXApd\nxPrI+A4mPPNE1bbo9NU8nIXmSmms+tP9+bjrwWMPIFS8aYxRGlWkkHfMOSqL\nRZl6n4z85axwKkNZY4Xgg8Tmdb/AH/0vsEetLvEjMJhHWjdabU0rMzfaUvyR\nIGmks9qp2sfbtpSaQTIU0GI7kzIDfs/E3CGuQTlHy3a2j7XyAMmylU2aVme9\nqOOg\r\n=r5B5\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFqecQaLYcDZePZdmnwF+NVAkAGIIGICBQYiLpwbA6GPAiAnvnlImo59A0eBZ9yoy1GFky0nDu9gtAAqrVEM44lj8A=="}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"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":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-formfield_0.19.0-canary.06998a3e.0_1600799117266_0.8192641323681891"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.3484a90d.0":{"name":"@material/mwc-formfield","version":"0.19.0-canary.3484a90d.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=8.0.0-canary.16c563ef7.0","@material/mwc-base":"0.19.0-canary.3484a90d.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/mwc-checkbox":"0.19.0-canary.3484a90d.0","@material/mwc-radio":"0.19.0-canary.3484a90d.0","@material/mwc-switch":"0.19.0-canary.3484a90d.0","@material/rtl":"=8.0.0-canary.16c563ef7.0","@material/theme":"=8.0.0-canary.16c563ef7.0","@material/typography":"=8.0.0-canary.16c563ef7.0"},"publishConfig":{"access":"public"},"gitHead":"9a495a0451ae2f8e95b786a624153a7b57c4760e","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9a495a0451ae2f8e95b786a624153a7b57c4760e/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9a495a0451ae2f8e95b786a624153a7b57c4760e/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9a495a0451ae2f8e95b786a624153a7b57c4760e/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9a495a0451ae2f8e95b786a624153a7b57c4760e/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n|----  | -----------\n| `--mdc-typography-body2-<PROPERTY>` | Styles the typography of the formfield.\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.19.0-canary.3484a90d.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-xsJugI1i5voW/FawMDXNpWs20cD1mRZ9v9YrGqPzPLE/tOwtzY8g5CTiaukotMBP0xh8yedJ7RVsp+ZsfbO/Rw==","shasum":"1f56b23387ac77e5c4ef3fd670ad5862c7164bbd","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.19.0-canary.3484a90d.0.tgz","fileCount":13,"unpackedSize":40613,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfanTACRA9TVsSAnZWagAAWHoP/1F4T5z2P2IexHL9WvNl\nh/D3zYPQB3ITulKOWSVD5mxl8tOAtYEk/Zhp01rG0584LtDoUqgTZhfXITQ+\nzaAK8ismkJGIjIpgWqng5gr4g3Nc1Tx4rSg0m3edFH+umFCvXjimfNnI9I92\nevtAtL2RfDWphOrF0i9ZIPeRACqXtfBG/gXffpdzeLm/tuiBdGiYj70h1RnU\nzUQqGH+SVptnaO6HbAQjGIENTzpuE6nmj9iFlJUkZxxegX/YtecK2F3o2f/2\nG8XjGfK62lHcjEnSFiSD39Le3c0fVwyIdE/ti2gG25lz4ONF1+XTpQeSI2m9\nliGr6C5Z7Yt2dpokrs7557qi1TGHyIv6lIiuaiiJQBP93Zc9qi5jq6IyfSZO\nQdI903itkCIRwNCdoXvhHVLFoeCCzPxbMXnM6EUtzjQNYhRYNTZ3+xh7JzES\nv4tsuo6d+nrsaMXJqbzNSya3Ahp8+HPG7W8SAsdkYm+1HTT23n6wdD6x7qAk\nofcQimHpzJ38FCuR+2tW12MK+UuTzDjHLNmdmevPLK88OsBBs61LjRObeOxq\nCzjA/F+TnlKp1mr+dUW/I2Ie1fVlfqh02Z8VTnoEjyZTj0Odh4vWmFTR8FkA\nc+aVo26mWpcMTl0pInFlBhInP0f4HSlH9uzYtInzpReuH3opSn0FJ7TWdaI3\nr9Lh\r\n=lsVp\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFpJL6eXqKr4hcomF3Q1XJpF32Gnz4u1HsnLrXYxcj6tAiA3/BJnWdrLzkDAvePZfLrg6rp1Yt94lzD9UScih93Kew=="}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"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":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-formfield_0.19.0-canary.3484a90d.0_1600812224026_0.031911427136780635"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.3f99af40.0":{"name":"@material/mwc-formfield","version":"0.19.0-canary.3f99af40.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=8.0.0-canary.16c563ef7.0","@material/mwc-base":"0.19.0-canary.3f99af40.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/mwc-checkbox":"0.19.0-canary.3f99af40.0","@material/mwc-radio":"0.19.0-canary.3f99af40.0","@material/mwc-switch":"0.19.0-canary.3f99af40.0","@material/rtl":"=8.0.0-canary.16c563ef7.0","@material/theme":"=8.0.0-canary.16c563ef7.0","@material/typography":"=8.0.0-canary.16c563ef7.0"},"publishConfig":{"access":"public"},"gitHead":"9c1a716646d54bc9aebac750a99d1fa752f60d9f","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9c1a716646d54bc9aebac750a99d1fa752f60d9f/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9c1a716646d54bc9aebac750a99d1fa752f60d9f/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9c1a716646d54bc9aebac750a99d1fa752f60d9f/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9c1a716646d54bc9aebac750a99d1fa752f60d9f/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n|----  | -----------\n| `--mdc-typography-body2-<PROPERTY>` | Styles the typography of the formfield.\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.19.0-canary.3f99af40.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-KpPrBpiJmt87WBuDfeY1iQDxbcGNed/EC20e+kKXZ8zyJozV4Qwg9nzAPP0guuOMjOrosha/IPXVexqFJ+D4BA==","shasum":"4415b68faba09202f57e65e113c21ecdcdaa0c4f","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.19.0-canary.3f99af40.0.tgz","fileCount":13,"unpackedSize":40613,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfbSnTCRA9TVsSAnZWagAA48QP/2cqaJEOaxNPd/wQ68ed\nvIu+/N07g9GL/SB8uXSeHLvy/+7n9jbDffmrUGIY/6s16TiQeMwDMM/WoAdz\nRBEfcQRNlFWQppdF327KsljhwVTGlew6Pl0KKRs2cHtn739THSsJgS/C/t1/\ncL9CNV7Q1AFbFPuGRer5lAwuyvFzmI4/T2/5V7g5e18Joz7vEwU5IaBTMEYC\nrxH9yIzyZNsGt/RyjddK40BZi3JcMq8f8Y5pze8SLoxiz9tLlj3TbwF851Ro\nVi41QbUPZhpCzf9259haiKvyABDfm7KwvlKWHBff6r9kE1y29SOqBThCXQwZ\nT5XXp5AAyhZG1XLEqYyOwPBa3XYbyBHxJd/CsWgyX+rT6wIvfqrIOKRdNjUb\nGhgADbdWC6x/zN0qkXDJ/IveUqp6iwl+GLCHO4KIAWvoUMLxlNuSwO+K9top\njBSHmiLC+WmqAI63zu4Ae4+VKDvFRWD6oqNBVzwTFmbKQGM6Cc+4wPaH+rYK\n9qTTtK9DEjqy3tu0r/zaMQy51mt8/R0W1Aw6wl/kOECBLIVX+z4a9qByID5F\niL72V7ANsb0gqWQYEcTzcHcuYNUrJevhi151qIjjFEH+e676hLQlsaV/op7+\nq4Ei6+kuQy/sblxzh58xRLFJ3BdOvf9A+BgDHjUtvuoSitWCB5HekzcIA88n\nK0UZ\r\n=6jlb\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCLKWjOdtJ7+68nqjRQEExFfD/5G3SFVT5lBIV/CJNNwAIhAOVghHDkjmFE9DbEpmCB8wKOnEE9v8a2QwyToFgbT5B8"}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"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":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-formfield_0.19.0-canary.3f99af40.0_1600989650849_0.6068455606769365"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.72aa1129.0":{"name":"@material/mwc-formfield","version":"0.19.0-canary.72aa1129.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=8.0.0-canary.d4cd83a85.0","@material/mwc-base":"0.19.0-canary.72aa1129.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/mwc-checkbox":"0.19.0-canary.72aa1129.0","@material/mwc-radio":"0.19.0-canary.72aa1129.0","@material/mwc-switch":"0.19.0-canary.72aa1129.0","@material/rtl":"=8.0.0-canary.d4cd83a85.0","@material/theme":"=8.0.0-canary.d4cd83a85.0","@material/typography":"=8.0.0-canary.d4cd83a85.0"},"publishConfig":{"access":"public"},"gitHead":"b0de5dacb779cde3abc9f66672e5a936030fe63f","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b0de5dacb779cde3abc9f66672e5a936030fe63f/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b0de5dacb779cde3abc9f66672e5a936030fe63f/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b0de5dacb779cde3abc9f66672e5a936030fe63f/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b0de5dacb779cde3abc9f66672e5a936030fe63f/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n|----  | -----------\n| `--mdc-typography-body2-<PROPERTY>` | Styles the typography of the formfield.\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.19.0-canary.72aa1129.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-Zjfp3xwYHXfBHwIyfhtM9Qo5hEWb4blCWoO6h7g3N+02LgiwzgW+P9YT8I9w3g3tgnKCjSfZV0bgE+mPrWWU4w==","shasum":"807cf7f67ccd24b4a748854c21e57093d4ba4c8a","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.19.0-canary.72aa1129.0.tgz","fileCount":13,"unpackedSize":40613,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfblvpCRA9TVsSAnZWagAAm6QP/jlmWSqqjj8GE9NKcloR\nWOy3rSLGHZdxwSRDPdjk5jOpJjoIMY5VFzYePP6HbjpMOo4jZrhyoxyDPRsO\na0VkPDr7luerf6QjJMKi8JKzt3NBzSCgyfKk8wN+p8VFHmwalQZPD+OzJaA3\n1h0c3BjSydVpXEeonA/EE5ZhRDvrHOMovj7t4weW3M04BdvoGmNi23OcVkee\nFnlkZ2EuZ2M4GMd+Ma1inWXozqA/QYXHOhOuTaN/yKfabs2UavmoQgj8Ui3O\nNWWZFpIiodds27lNimnxIh1hLzimlzxCi7VLbBf5vnFPnI414OVcYxVBgOnK\noKo9xDtKe6llC/NrrmeoNKoHN6McraVlgOsUgy9WBM7mMqyeccqiBqGyTdoL\ngMjw9IWzOBzU+QNMOGT+pvjfHvAUSu3jbrxk5ThXS9OdBfKdCa7aYIzImsdL\nDRY9jzqzKsqz91rZxBa8zehKGybegGansj4lPtd1jsc0XeQgVJwnakzDNCdk\nh6xNDaIfTuC7F29MmYu/TAcdH6kg54mH1kYjm7XJdjCpGaR7pWIqTM+8FVM+\nQRR8d1SRTL+hdlaqL8iffLLogZAxPclWTcITlzxE4G6qFIZN3r6QKEqXaRPs\nO/BqYvT6v//RmJRYbvNCpHs0lceXDnRUL5ZDn+Y7SVz3Ma19NajBiiFqRcy7\nL0pQ\r\n=MWyT\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAuU6byMt60E18k61xIEDWczcp+8AT853UywKGzai9E8AiB2dimffstHBNsXYkrhSkvDkQcJmSLOgPbgF/ARG5Y9UQ=="}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"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":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-formfield_0.19.0-canary.72aa1129.0_1601068008839_0.2844610081600294"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.394fd3f6.0":{"name":"@material/mwc-formfield","version":"0.19.0-canary.394fd3f6.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=8.0.0-canary.d4cd83a85.0","@material/mwc-base":"0.19.0-canary.394fd3f6.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/mwc-checkbox":"0.19.0-canary.394fd3f6.0","@material/mwc-radio":"0.19.0-canary.394fd3f6.0","@material/mwc-switch":"0.19.0-canary.394fd3f6.0","@material/rtl":"=8.0.0-canary.d4cd83a85.0","@material/theme":"=8.0.0-canary.d4cd83a85.0","@material/typography":"=8.0.0-canary.d4cd83a85.0"},"publishConfig":{"access":"public"},"gitHead":"f7ed30422433da24768cee2e9ee84140331af4e4","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f7ed30422433da24768cee2e9ee84140331af4e4/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f7ed30422433da24768cee2e9ee84140331af4e4/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f7ed30422433da24768cee2e9ee84140331af4e4/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f7ed30422433da24768cee2e9ee84140331af4e4/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n|----  | -----------\n| `--mdc-typography-body2-<PROPERTY>` | Styles the typography of the formfield.\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.19.0-canary.394fd3f6.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-MSGrBSs+d9upU/Yw6c7nwmSFlup4VcrdPzxeiw4zz6I+hw6x14lWJ2yywSsfyJupg3GlgOx9Ovuml1jz8AS8uA==","shasum":"3343e26edf5a17b86bc135acb8e516e1a7d66695","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.19.0-canary.394fd3f6.0.tgz","fileCount":13,"unpackedSize":40613,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfce8tCRA9TVsSAnZWagAA1vEP/29XBY+BTDZDAT1RacTL\nIodOvXrIMOB/J5F/e0tE2tokvU+h1Y1J64zGVpOC2nX5Dc+s2CuYGzs2w4eN\ngv/GGQCXlhSxGgv8jiV7kS2yQDjW8OvcoQafQutw3U3cMb5RDBI88ylSbYPu\nNg5uvhILgClobY76NsomtXGqDXR0A5+9KGUbxN/7jlo4agSyRCWrvAitjB8W\nU2QKKrQIdJTaTxezz/+qo/k8B/r+rmG7cs2pLPDzHhg++P6Y1ibNeg4llN+n\nNazYn5lrfHrKltt8VupvO8Kcutwbc4DQ7AeLXjsDtof17aJCT5DQMWj9KdJV\napt5VGlYalOc6qfTOTsuy5LS/ZOuHxhSYMO8HuBCGc2sirlYFmDGGc3+Z6KP\nA6Sha3yjRc1P/0OX0GK7vfEWal62wkLf/B9NTs+toxEYrO3708pMiM0TI4NY\nN7TpOjl8bFbpvrZHUnGp+Chv1vwrGb0OvbA7R8qG6IDUsdcB1mbp18+pdWCS\n/hlHMTqFBRAlvVK10quIlcK26zJKP4f4x+JuGmRDoL+57tcePeACKFCuWV2P\nDywsWd44drFCP93pILCPSRKKrur/3mr0qCxbmQg9pDV9178zna9t+wKpOVrZ\nT9Ziflon+dQ1NRNn8m07ypFY8tDLTTBrAvbpWXR/TF2ctK0VU9HCItJc8RG0\nIG2H\r\n=vm5i\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGebO1+jUdbqxdO4bSL6ut0xqScqh5GlWNsXRgEwJz5jAiBsXd3zLqzoYyZNCaC09zygvLgMFDrYG5+dFhq+O5gNyg=="}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"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":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-formfield_0.19.0-canary.394fd3f6.0_1601302316816_0.8924401440665977"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.347110f1.0":{"name":"@material/mwc-formfield","version":"0.19.0-canary.347110f1.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=8.0.0-canary.d4cd83a85.0","@material/mwc-base":"0.19.0-canary.347110f1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/mwc-checkbox":"0.19.0-canary.347110f1.0","@material/mwc-radio":"0.19.0-canary.347110f1.0","@material/mwc-switch":"0.19.0-canary.347110f1.0","@material/rtl":"=8.0.0-canary.d4cd83a85.0","@material/theme":"=8.0.0-canary.d4cd83a85.0","@material/typography":"=8.0.0-canary.d4cd83a85.0"},"publishConfig":{"access":"public"},"gitHead":"b51682018a9a68b95f2c2cf2ebd16682dc3f2e22","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b51682018a9a68b95f2c2cf2ebd16682dc3f2e22/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b51682018a9a68b95f2c2cf2ebd16682dc3f2e22/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b51682018a9a68b95f2c2cf2ebd16682dc3f2e22/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b51682018a9a68b95f2c2cf2ebd16682dc3f2e22/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n|----  | -----------\n| `--mdc-typography-body2-<PROPERTY>` | Styles the typography of the formfield.\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.19.0-canary.347110f1.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-JcLYxpJcPBqNiM3jzY5joT6E6AF2XKMkuhDipkVOSiEeS8KF4qhxQNd1wACLZOnorA63bs36pDr8GrPRwPr2zQ==","shasum":"f111e65c4898febb78794243ec44e663025f1213","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.19.0-canary.347110f1.0.tgz","fileCount":13,"unpackedSize":40613,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfchQpCRA9TVsSAnZWagAAyD0P/jsEhyIlieecP5aCpsZi\nZVcKeYjSrcpgFgyqCGxrrtHKVgyFtHMNesqqRjE6gGN0TBxip47TA/LJsFGx\nkh2epvDp2Lmrjw8Z7EGgsV5l7p8F6W7P52rgs6GKFr3uGqE5ev+Q7/IxIJCJ\no8H0hA7JncPICXC7ZnqTTm8qXGleUEAZN7sYx8Oc0uCaVtj44ZIuPrKWwK1N\nojF7X5y3CUN4eeYOJAHkjCzasbDgs+lG255+lUMwsWtewufGDwbwQrIRxd+e\nb7VcCV1EF3Hfp7RSc1Ckhd8m+Yv+/XeeC8A5qbOhSAO9ab9RjT1VkX3wk7HX\nJvYBsfh1lN92jQqdCzlNQVsbrSajof6TucxzHsdoQsq70usFye3IJHe3s3DM\ngG37IZ/kkG/d+TFdwWmyFtGU6at6RFX/HJU177Zp7LVYaA/U9/2ST3Zr/mAa\nFVzB/Qtqz76KH9Kgm7S7OTsGL2cDDzxbsalKfPq7CgjCcqHBX1Pd8Y5nlh2c\na4xJThl1xAgU/AXoEuGCFrbTRDPBAbTEti7vQwFwMGgQ6WNrTPJN7+fZlU8n\nmi4TrX8sHMAdiGyivCvgSPUbM6WcuEK7OekiEKQFvrZA5kVw/RdvTmmCLUrj\n7+539F3d3Jr5FJXPKi8okUCGAk57UFMSf1NbGHAU1vNY5uohI75EEyHwU3PD\ne1e9\r\n=VSbJ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCPM9vX+qXGhF27Hn3mzbwpTIX7mHFP0uVQ1RIMECVHKwIgFVO4C2wQykPUogXQMmqydz24m9Xe+iVV6+z5ZPSdCso="}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"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":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-formfield_0.19.0-canary.347110f1.0_1601311785146_0.7974817504593941"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.5e330bb9.0":{"name":"@material/mwc-formfield","version":"0.19.0-canary.5e330bb9.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=8.0.0-canary.d4cd83a85.0","@material/mwc-base":"0.19.0-canary.5e330bb9.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/mwc-checkbox":"0.19.0-canary.5e330bb9.0","@material/mwc-radio":"0.19.0-canary.5e330bb9.0","@material/mwc-switch":"0.19.0-canary.5e330bb9.0","@material/rtl":"=8.0.0-canary.d4cd83a85.0","@material/theme":"=8.0.0-canary.d4cd83a85.0","@material/typography":"=8.0.0-canary.d4cd83a85.0"},"publishConfig":{"access":"public"},"gitHead":"edd7d263d4d4dfba81c2b086b08b2be10b533b2b","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/edd7d263d4d4dfba81c2b086b08b2be10b533b2b/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/edd7d263d4d4dfba81c2b086b08b2be10b533b2b/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/edd7d263d4d4dfba81c2b086b08b2be10b533b2b/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/edd7d263d4d4dfba81c2b086b08b2be10b533b2b/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n|----  | -----------\n| `--mdc-typography-body2-<PROPERTY>` | Styles the typography of the formfield.\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.19.0-canary.5e330bb9.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-kbiHv7aeNRkhl+1QUtRyF9yUKE8CR2QHeFcu76ILt5RnW1SUsKm0cZlVOuOOa/43x3zuWfR4rE0G+eaop7rs+Q==","shasum":"8686a17af98cdc297bce272f59fd2e2650dacccf","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.19.0-canary.5e330bb9.0.tgz","fileCount":13,"unpackedSize":40613,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfdQAPCRA9TVsSAnZWagAAHUAP+gKaHb6O55FMW37pGYI4\nijjQdm7m0h9jSLO0bO8N5eytrc9uwDTxathCF6janM/G3XuDylOZnFQO5zZ5\nGvrSzKYvIjWEkrPvW5juA4JefPF1WlaNwM7Uv23zcMZ+DYGuOIrVqA/8tYHs\nCMDiD/OKaDiRBV2j6mLF8ea22Obq8//MufUrVoaHAZsr0Y86a3jcu8J18M09\nx3RMz3mS3ImQ11LWAGGYZWH32uDiEeds6eWtyOLsOcgBUbADpXijtHwUbrOa\nGoRGQA4ovZ2ABF6AKNsNAGQ+8UG5zvfm/SdetnP+rad21gEaaHveJTFTIUsQ\nxC5tMOf9lfRzOJd46ib5FEAT8bc/7yRkm7nmjud3WfSSqpcZ/umd/9mci2mp\nV9bRc7G6gVaaN3VGRChOqXTUoFmZHePqRqqEssLfxWcUj37KiCn8mlJ/q2et\nJFteIKQpzW1NN1nLzuihrD1fVEAoapIBk68z2imHummtZGk1FIqKlPbdTowB\nlxqqfZ6SjhDcB7zX1I7hm2Ol+Oz6nx/TVwmCTmxvUSkq0LCN6FCSfjXwJRN0\n5mrFcyElRxVAo0oi+0rcQH0CrmCtmbu/ZjFu+yOH8cKk0h3f/AMM5AtIM384\neY1JS/cdhlkTf6Q0qHAc5uTXXPMuILaYPhaNu/drnv+4cVJp4gvUIj55ER2F\nnyvY\r\n=+GfH\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIF1kx39wAHtVOgj0gIoZZ1fPqDGqURDArxxw2sKxHBkeAiAKKH0GNRZoNnSfwK1/KvJoQGqUGynKDAqDHCccDvzCiA=="}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"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":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-formfield_0.19.0-canary.5e330bb9.0_1601503247167_0.4386641869732588"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.30b9e3a9.0":{"name":"@material/mwc-formfield","version":"0.19.0-canary.30b9e3a9.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=8.0.0-canary.38ef4501f.0","@material/mwc-base":"0.19.0-canary.30b9e3a9.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/mwc-checkbox":"0.19.0-canary.30b9e3a9.0","@material/mwc-radio":"0.19.0-canary.30b9e3a9.0","@material/mwc-switch":"0.19.0-canary.30b9e3a9.0","@material/rtl":"=8.0.0-canary.38ef4501f.0","@material/theme":"=8.0.0-canary.38ef4501f.0","@material/typography":"=8.0.0-canary.38ef4501f.0"},"publishConfig":{"access":"public"},"gitHead":"1dbc47f1a0c4601e30ed5a9eb0fc9f9b56564e1c","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1dbc47f1a0c4601e30ed5a9eb0fc9f9b56564e1c/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1dbc47f1a0c4601e30ed5a9eb0fc9f9b56564e1c/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1dbc47f1a0c4601e30ed5a9eb0fc9f9b56564e1c/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1dbc47f1a0c4601e30ed5a9eb0fc9f9b56564e1c/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n|----  | -----------\n| `--mdc-typography-body2-<PROPERTY>` | Styles the typography of the formfield.\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.19.0-canary.30b9e3a9.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-XMBjSba9Sv7x2F+T6Vb8TWhJ8Q19PAGcfZp9tZgCtl71NU12yoSmprJErVLiK6yfYXwLAgUppclKtwrDzEj9Bw==","shasum":"f1a286de87879657c201443b0996ec490ce491a7","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.19.0-canary.30b9e3a9.0.tgz","fileCount":13,"unpackedSize":40613,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfdQi4CRA9TVsSAnZWagAAaX8P/jV60l9UzFfPCto2w13W\n2zvuz+3JGCxGT32Vz+R/c4p58UekkH2dHwezoo/NFGeEha+K6cQJ2DKtaUNc\nYIjcI2hiVYNAw5rsc1bj2l5wDtU7KITQhwHjwSUgvtF9wZTtRenVlm3b7wgR\nX7A7nigwgRrHynpF71tDahxllndOV6VDCqhmInI1Zdsg3P9sq0t8Z8w21jx0\nRtuAHkyBKEm81T8SPh1gbgKBbYYFxiXk3DHj6BNspxwWn3ibHQyfwUtEMmQ7\nTC6ptcsq1KTrCiUqtV8T1JhVPoGhIjSjT0qZ2rgPATB7xOwfxQ5fb+ZKrYtB\n7b2iGCSjKIyued1c2kYTNimjEyhXYG3w3U3tfuD2XgbWBX9aSEL8tqDvzP9s\nlWc5yvXQkz7wIDRYBawz9CnaJAshslb1KOuYUGoylwM6tJ2JjK8j0vUovPzD\nUxXk6btI6EwwuTTft0FTYdrJabD1py5snVOrgn6EBRniHbMdIkKl76P09or1\nIhwrCiH7SXDPPza3WDUry3Pyo1e7kLG0Sy8I4Tdh3owaRyQzUUngkn4VplYS\nZRxhD/YtNyFSPqgAMidUeEhP343VLMvSimjE1060+RuSSzizPvBkLZIDqYtP\nzphiZHhaczkTICRCJziI4R+3fhJEMs4Kg7Kj4l/rcnfBVQ1enliNuHpn2lZE\nPHQC\r\n=7sA0\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIG8XbVAUUg6xSu/BIZVETZKhqAP3hMsf3VKsI64E7qolAiEA4tNlDkExEQ5eA7qTqlnEv84LK5YLy5hRA/NMp2lC+WA="}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"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":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-formfield_0.19.0-canary.30b9e3a9.0_1601505464227_0.8761784849954357"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.7bb04b9a.0":{"name":"@material/mwc-formfield","version":"0.19.0-canary.7bb04b9a.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=8.0.0-canary.38ef4501f.0","@material/mwc-base":"0.19.0-canary.7bb04b9a.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/mwc-checkbox":"0.19.0-canary.7bb04b9a.0","@material/mwc-radio":"0.19.0-canary.7bb04b9a.0","@material/mwc-switch":"0.19.0-canary.7bb04b9a.0","@material/rtl":"=8.0.0-canary.38ef4501f.0","@material/theme":"=8.0.0-canary.38ef4501f.0","@material/typography":"=8.0.0-canary.38ef4501f.0"},"publishConfig":{"access":"public"},"gitHead":"f4137a832374dd43b862ca8a4db665a59c1a70f7","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f4137a832374dd43b862ca8a4db665a59c1a70f7/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f4137a832374dd43b862ca8a4db665a59c1a70f7/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f4137a832374dd43b862ca8a4db665a59c1a70f7/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f4137a832374dd43b862ca8a4db665a59c1a70f7/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n|----  | -----------\n| `--mdc-typography-body2-<PROPERTY>` | Styles the typography of the formfield.\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.19.0-canary.7bb04b9a.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-0qBKHPxDa1QX9vSQ+qL1T4yYX6IM+vc1X9bL1AGaX/3i4T6Uk62QoQtaYZHql19sdTjhEaYnspAt514ewN6wIw==","shasum":"00fc6fecca4c093ce7cc0c2eeee2cf5aeeebf7f4","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.19.0-canary.7bb04b9a.0.tgz","fileCount":13,"unpackedSize":40613,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfdmSxCRA9TVsSAnZWagAA2MsP/3J55EyxtZkaJVxCpwPO\n5kjoMBnC/l2LBtddfOL7C8pbzDyXYtDjj0Y6F4tFGrl5Mzrz5z3TdQwK7s86\n1zixXEnvYXLKCcCLKB+pOD7kEiQ4Mf+OHtetMaeUXvA0n1KL2Az3D3xc/n1b\nV5AQSSgewrbY0Cl2mqn+/b7nx/2W4VPYhgtG1VzNOrNwKlr/RogbxJAgUh8h\ncFKfJcblUlyLXVsLVhCoCI0Vm1vcTUvdwGF48HeDhwbVrxBhE+5FG58Ep3vR\nYToVexvgrOuNJCizDPXqQJ5ZmIDKswJnrbATlLbJLxWsBqTuB+j+kmzfAOn0\nvlu5LOXr10D1Y0pICAUpfFnApSdbipczv9aIpB0S5cweOG1SF40CMMnHSSZF\nDmOL14sbrPO9rZ+jYEO5yePt05ffiYX3cD/s5YXrHMoOdiDZzaWigGJ0hZWS\nWdBckiHmIjaGPeD7qeu+uvulyDOmIRNxe1RjDGWPMkjkovcnSlmA28su9eFJ\nCj8cBqAT6HSXZ30+6HIy/2RWwJ5WqHUaul3p2jIz82blH/pu3iB8nOAIJ6Nx\nWg4XjyfN1oFi/3Uh48+icJQHUWIVe6Qj5beOMKNZwrKY1H6ezSnckgq04BfH\nwxUtp3498tV45cMoTKpkqYEGE5QaGa+Gu7A1AYZp2atxuGewhvnX+OYBozrV\n0qtE\r\n=rV3r\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDJKw6AeJGhV15JtZslLy5baEWwEJ9Ae2RtRb+GHKBdFQIgLktHIueEDz1g+QRmOEeqvFESivjiBEu7E0mALqdvAuo="}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"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":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-formfield_0.19.0-canary.7bb04b9a.0_1601594545421_0.11045282520758848"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.615d861d.0":{"name":"@material/mwc-formfield","version":"0.19.0-canary.615d861d.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=8.0.0-canary.38ef4501f.0","@material/mwc-base":"0.19.0-canary.615d861d.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/mwc-checkbox":"0.19.0-canary.615d861d.0","@material/mwc-radio":"0.19.0-canary.615d861d.0","@material/mwc-switch":"0.19.0-canary.615d861d.0","@material/rtl":"=8.0.0-canary.38ef4501f.0","@material/theme":"=8.0.0-canary.38ef4501f.0","@material/typography":"=8.0.0-canary.38ef4501f.0"},"publishConfig":{"access":"public"},"gitHead":"31f7a82757513b3944c605422e6c70eef13bbd54","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/31f7a82757513b3944c605422e6c70eef13bbd54/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/31f7a82757513b3944c605422e6c70eef13bbd54/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/31f7a82757513b3944c605422e6c70eef13bbd54/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/31f7a82757513b3944c605422e6c70eef13bbd54/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n|----  | -----------\n| `--mdc-typography-body2-<PROPERTY>` | Styles the typography of the formfield.\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.19.0-canary.615d861d.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-W7cmeXrVVWXGdajH7j3cUVOaM9jZREQlaekmeIyZMD4FW3wde1Pdo2JFC/PFZf96FF4jiqnq5Bkh6MCLcf+ocA==","shasum":"af052caea267a23b894e3c0316f01ffdb3bf79ce","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.19.0-canary.615d861d.0.tgz","fileCount":13,"unpackedSize":40613,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfdoNNCRA9TVsSAnZWagAA8cEP/2ayWgmmCKOY9aXYdI2h\nphthWqQnQKcER5w0uyDiUQmVRLKg8YHz8RwphbFONjkyEdfDqH+D6fvVd9Ot\nGk6XyG5z2dcMmCoOoql1nnmA6EudbO7g9NgY2QvD73/+iMiTAqL9xI2l0spW\nkFs7T48X/JcYNKceLUcmnX+0lKpsAtD6IwN5P3FoYjOu+4+ALi/WVoXZ+Ius\n550srP+1GCxNPtvQ8M6xxuMISOJGlf1wtubHgk3Xjd/Ow89Ku9TUNKtkgR+q\nFU2JFafGxdiKLYgIESxKj3slUM0OY5V8Bn6h2JAq8hNpciNx5JbTEe78/45K\nnHv0B+r73VSTI29WqQB2qWz10dXYpLdS/gFce/xWAylmZzE/zJsHeHGKPDgl\n6GZOBeSbS+zXkxU0G0a+opaYzkHxL/uWtz545as/5xETFDY/6qfTw4cBDSIX\nJC5zc4GUr5s5NFaB3a5k67WnCZFqur6oRKKmVTf0OWw9U5nNVfnEX8gqgLIX\nNkzCcu+0n+WDG+BcJEq+QupgfNUvcdnpOAg2J6JGSWHsJ492Kzjuxf/GrytY\nuSp3bUnLUY3b56wvrODTaarDY77yS/MYhXfsHo498vglKXWYDUcdNLA4Rypg\nPj5Pyv6zz1tD5C0rbbFIXOWrcxr0xkK5YeE6kAdlOOaJSll8AQ6pA2jzEBY/\nLzfH\r\n=H8th\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD8h2WoLLVUrUk26VRmds393C8N9XG2cRhdmG0K3xd1agIgGKM5mqEJ0b91547tzHYwbTaso73Xqy89kmTYvs+d1pg="}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"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":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-formfield_0.19.0-canary.615d861d.0_1601602381177_0.6046593552627282"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.af110e86.0":{"name":"@material/mwc-formfield","version":"0.19.0-canary.af110e86.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=8.0.0-canary.38ef4501f.0","@material/mwc-base":"0.19.0-canary.af110e86.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/mwc-checkbox":"0.19.0-canary.af110e86.0","@material/mwc-radio":"0.19.0-canary.af110e86.0","@material/mwc-switch":"0.19.0-canary.af110e86.0","@material/rtl":"=8.0.0-canary.38ef4501f.0","@material/theme":"=8.0.0-canary.38ef4501f.0","@material/typography":"=8.0.0-canary.38ef4501f.0"},"publishConfig":{"access":"public"},"gitHead":"ec4508e75df333e18bfc60188de82eb9e90a6d01","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ec4508e75df333e18bfc60188de82eb9e90a6d01/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ec4508e75df333e18bfc60188de82eb9e90a6d01/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ec4508e75df333e18bfc60188de82eb9e90a6d01/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ec4508e75df333e18bfc60188de82eb9e90a6d01/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n|----  | -----------\n| `--mdc-typography-body2-<PROPERTY>` | Styles the typography of the formfield.\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.19.0-canary.af110e86.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-NjH7Vf4cMiCkFCZDkBtBengyElGDNodzFChFRr2fYb2+ArRF9JCLmLp+cB0CoKJK9tfm9ImCsE0b07PNbUCwMQ==","shasum":"5489b2e6cb0a77446e4b460b5c76bb77ad98c53c","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.19.0-canary.af110e86.0.tgz","fileCount":13,"unpackedSize":40613,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfd7yJCRA9TVsSAnZWagAAds0P/A3gIL37gkoc7goTkt4+\nhshXr8phMMqGAgqpDqsFAdNJF4ZzlgCZeXVa+1tmA1JYc/jElgyULyypnW5I\n7na5fPaS0lABsXd1KpZ4K50QEut1Gcz1BbpyzbY49T/zKxqV3RJxD9NwDNpp\nl6D3Mm7kNM//1VK9Y/etlBJAsYS1cKc+p3YRE3W1AdN8ZmBTfK0sxUr1dql6\nVRaT3eB2zYO32P0BQldQjRB6m7b2fC7tuPavCNjHdUxLm+w80osN9uXNFat9\n2rAksNOrYY2EIeHUJJMtQCu7MQJZ8TKJfRuHK7Vi1fA5sJ91q0uCDgbWeW7/\nP+nNKkOG/4b9gfkQRrdsj5T/bAZ3zCpmRpLt1p4mYaVJkOsVjT/EGLS0idWm\nB7OHJyYKh4Mxj/oIV0qz5IT+8tMnQ4eL4rHyttqZPEkcVkROoYrCeb9hDABU\nsWSSmA95hH+DfytdCnXijcYvx5rfiv22BlkFwwZOT7l8sjEGQdygMdhIy8OB\nJEBy1a9hnFo3rB6IOxMS+yvjx6fQxL8J1znMKWX2QADco1hmQjXP4K3+OR/Q\nzI8dmEjg8Fp7iJOus2zYKjTzasoRA/cNIb8sCK3n2RI3gsFKSB6mIMfuyu0B\nGcKLVgQh+u1OqfazCCk6ArxkCAZQP2x9A9uP/qCH1LMVyfo8C2bD88q6HyWo\nA+a2\r\n=32XD\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCLQfu5SrxN3S1xTrdOQ4SaPjqO2mOw0CmhJBePaEbq5wIhAJLTkgjCO4YG8CBy3/LGic0erjXtjah1jD84zU+/eSAB"}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"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":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-formfield_0.19.0-canary.af110e86.0_1601682569434_0.9820578556079078"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.89d27ca5.0":{"name":"@material/mwc-formfield","version":"0.19.0-canary.89d27ca5.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=8.0.0-canary.774dcfc8e.0","@material/mwc-base":"0.19.0-canary.89d27ca5.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/mwc-checkbox":"0.19.0-canary.89d27ca5.0","@material/mwc-radio":"0.19.0-canary.89d27ca5.0","@material/mwc-switch":"0.19.0-canary.89d27ca5.0","@material/rtl":"=8.0.0-canary.774dcfc8e.0","@material/theme":"=8.0.0-canary.774dcfc8e.0","@material/typography":"=8.0.0-canary.774dcfc8e.0"},"publishConfig":{"access":"public"},"gitHead":"fbe5db689dbf4abb9f299c85581f7fb95f80ceae","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/fbe5db689dbf4abb9f299c85581f7fb95f80ceae/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/fbe5db689dbf4abb9f299c85581f7fb95f80ceae/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/fbe5db689dbf4abb9f299c85581f7fb95f80ceae/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/fbe5db689dbf4abb9f299c85581f7fb95f80ceae/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n|----  | -----------\n| `--mdc-typography-body2-<PROPERTY>` | Styles the typography of the formfield.\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.19.0-canary.89d27ca5.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-GuhqWRLn2mtPltgqdE6dL68SyXneinPlanb9/FYBnbhYs4TaC7sDJBlGpmnFW9OQizQQfyDBdVWHMgANTxOxfg==","shasum":"16b3dde1e3cb3be0e6e220e0cdf213bee161e5f2","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.19.0-canary.89d27ca5.0.tgz","fileCount":13,"unpackedSize":40613,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfe8fSCRA9TVsSAnZWagAAzvYP/AqEcX6iBfQE2ggqIESe\nVDelv1qbkJFdCKLM/k3xfDmeOgTglTa+MNxGY2qJXRpvpmvC6707SJEulCrD\nufGn5maJCnGR8qhaH5/Zu8Tu8EROtIMQI8KcqPh1PIpSoQCzbmM5YerRcgeq\nmQR6mdb1FbcNgpe9KUgiboXMOdsq0DIrfVTEv8WOSskSLSB8MGMhYpamTv/n\nw6w68k7Q5XmUNin6xFL9yB7Wnv+DJX6EaPsg0/vbJc9F4vgoMzt6IB/u47hh\nKCDjzm0DYTOMfrTek2lG1zRqvCkTFI/n/jBREmfkvy4Hgt3DmZoAjjbb67Ni\nKYrl3jy6csqyZEgOollGbqvidxLUhGvIrlqTocsxNVjdCThjDWTLYgc4zCTe\nsg9/eliJl3Lsr/5pf1Qd9PHHzclx+uIW+EOlcsbhb2abcVhw/Jm6JNkZgGIG\np39mqeK5G71VAuA9A/e/f7MUspKOSDtoYIQpRuylePDAJsJEhl6v/TO8WDAq\nD1q0q67F0p3WJEZMrquvQ7WWOmEV5VmbjbYrZ2kSpKH+1tfEvn7ALg0ze1FP\ncliOw/E6pEJ/JIv9fK8A8xuwvs1XiDvRbr7Sbhr+eq+VjTF3uaTjZ2ZVkSmo\nfTBcJ11mfZl5t/Hrl9IeuYXzlYcinEo2Y43CeO0vDggLZdqjqEsWVCMoY7cl\n0G5T\r\n=p0TY\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD8DgwpyTlydgsXsqk9NrUtC3GNBH0cvTetk2OIkmQ35wIgFEJXmTV0IX8Po8Vm17X36AvFrP7/kpSOmlwYptzU3HE="}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"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":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-formfield_0.19.0-canary.89d27ca5.0_1601947602459_0.9767033702402155"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.9ef2e7c2.0":{"name":"@material/mwc-formfield","version":"0.19.0-canary.9ef2e7c2.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=8.0.0-canary.774dcfc8e.0","@material/mwc-base":"0.19.0-canary.9ef2e7c2.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/mwc-checkbox":"0.19.0-canary.9ef2e7c2.0","@material/mwc-radio":"0.19.0-canary.9ef2e7c2.0","@material/mwc-switch":"0.19.0-canary.9ef2e7c2.0","@material/rtl":"=8.0.0-canary.774dcfc8e.0","@material/theme":"=8.0.0-canary.774dcfc8e.0","@material/typography":"=8.0.0-canary.774dcfc8e.0"},"publishConfig":{"access":"public"},"gitHead":"05ef0de8978ff84725428953056488d768d115b6","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/05ef0de8978ff84725428953056488d768d115b6/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/05ef0de8978ff84725428953056488d768d115b6/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/05ef0de8978ff84725428953056488d768d115b6/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/05ef0de8978ff84725428953056488d768d115b6/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n|----  | -----------\n| `--mdc-typography-body2-<PROPERTY>` | Styles the typography of the formfield.\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.19.0-canary.9ef2e7c2.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-GiZyzgUFWUoNOm+2B9cLwm3BUuj3AekjGTECPa5wgoaIEwks8IcJmL3aXYiygRE5QvhQ7I99ep3e3RY+MA1loQ==","shasum":"ebb3242051894a7e86276486a8bb2e3990338e00","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.19.0-canary.9ef2e7c2.0.tgz","fileCount":13,"unpackedSize":40613,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJffQhJCRA9TVsSAnZWagAAQp4QAJ9t4A6TT4OQQ//RE9c5\n6Xieaih0v+hNb+iCou9MhhndQrsWB0sptKMoTrSOsqfS8meQyHvg+CwyxLuT\nKNwAeCT9Mb1PCQFSeaVuWRrN4AEYa6e6gZo5QQ49BicF60jrike9H2aEw8yC\nUJxzbX3PwYV6wz/irQS3o8a4iIUNwewheKj04UGuaE0Mx5py1oS/sWJ8cytz\nFrGKKsJUBUtubJrWO5EO9qmi7s0P6BDduu0DT82HfwT/TPn0uGdni1dWPi8Z\npxR2gbCVGc16EINe5h22TsEAhnOV+qNuXrAk1jiEhpCmCccL/GIYhunKPz5D\nl6FeIq0iT/ZF0iFor96qyTdyajCAN7SFVFzzvcJuHfU1+n9JN4WcE6pl51jl\n5Tq31boWNaeU7rWPqcr9Utge7j5uW5J9WEhR1WUF7cHyjJi81q1JmqNpHWX9\nmd9sUA2RsOZpjel/5spAE1S+bVBf2DcR6g7dDa26tGhuweXQkK2uby7R1K0p\nG+drTTZtHV9Od2sIY37SGss2w6I2GNDyEzFHRwdX8Iz9RuWGCkd1sJY3yPDG\nRjRLpUTHEWZ/MqPKa9O8kp3swIK4W+E720jYIx1jVz547toMZzjYhzlbxZ2v\nFiJgkuGYryVjtopgd9u8NQR8VrSrRsGqgGQYO/NRK4QN8JhbshTrYnhz/Nlt\ndi/P\r\n=n6HE\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIB8jahIYkWQnlS8HSvh/ou9g7Qgcz8dzOA39MzrrDlDHAiEAlq27MwIJEgfDWTcHiCkjlE+P3OBBoFAbQ9UTNu5XjqI="}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"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":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-formfield_0.19.0-canary.9ef2e7c2.0_1602029640391_0.5163780056536034"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.96c8bdc1.0":{"name":"@material/mwc-formfield","version":"0.19.0-canary.96c8bdc1.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=8.0.0-canary.774dcfc8e.0","@material/mwc-base":"0.19.0-canary.96c8bdc1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/mwc-checkbox":"0.19.0-canary.96c8bdc1.0","@material/mwc-radio":"0.19.0-canary.96c8bdc1.0","@material/mwc-switch":"0.19.0-canary.96c8bdc1.0","@material/rtl":"=8.0.0-canary.774dcfc8e.0","@material/theme":"=8.0.0-canary.774dcfc8e.0","@material/typography":"=8.0.0-canary.774dcfc8e.0"},"publishConfig":{"access":"public"},"gitHead":"1107015eb30f3673820101dee6e42cd62841721c","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1107015eb30f3673820101dee6e42cd62841721c/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1107015eb30f3673820101dee6e42cd62841721c/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1107015eb30f3673820101dee6e42cd62841721c/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1107015eb30f3673820101dee6e42cd62841721c/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n|----  | -----------\n| `--mdc-typography-body2-<PROPERTY>` | Styles the typography of the formfield.\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.19.0-canary.96c8bdc1.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-p3OWSTBjR7psjRhDa3epX9CNeQx3EExwVI9nfdRdEXEUqtpFPXJlNfT3h98u2mhCPYuskKS0mmPH9pisllCzcA==","shasum":"138ce13280e4560b90a5f3a99811744f4fbdc780","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.19.0-canary.96c8bdc1.0.tgz","fileCount":13,"unpackedSize":40613,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJffh/2CRA9TVsSAnZWagAAAccP/2l2sG/4eXd2wZ393Eyt\nYmhLn5a7U6QCCT2rNm02606RBMBI3q7H5W4rJF4Awhne+B1RxBbQ6mPsB5iX\n4woScM4hou/u/HB57Kt2DvkPkQ6MdywemvXRFlFjZJ5KimUrlh6FhMYV9O4M\nWasY5UvQwlS2elau6gHdzhI599uPXrCycVDPvfczLAuQonAMhm9E0j2eqBmW\nUsTlqP3TTD4GjvNTPolXRXSC+5tDJx8KeQCXQ0maO2fvjUZ9SyGt26ZYsfEU\nZFwOXob8p4N/g7Sc2H2bGrjQxAidqnCyYbt5pziLqB24TFPUg5D/vjBo/G10\n0QzsMC0owP2mvxSgzkZNposv9FbpmOMG/CcpFWQLIB2rTW32fW8jGr2fE/e3\nAu5tQxTBkzn42JrrqD3J5dmElvN2zRHG0TrZGp1N7fszX7maPfqapd1LYNCW\nKbrUqKyo6H9wbdvRLnxpaivsyNRBXviceGMDK6Iwn6ZL83Ih+DVrgl+pLV8Z\nuH9J6i2iVThTjJxz1oWHQjj1jNxyEsdz/w9XAzUlb4rdQSr80fH76orIuzkH\nOX+iAYjFgZ9q7XGjPXcskX/3smNOmOdbPt61RQ10G8KvEgeid7VnAEXz046S\nVTZCsYsiCJz5SYGStAiSxTV9gB2h+Y4i7do7eJGWg3tIZQS+APz1eW32YKPU\nZ5b8\r\n=T/dF\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDjCMKN/QIYKF8C+y26AAfbvTpJ8rCeyDCW1Khw6wGOpAIgDBoQYFwIEAxwZrjgdEdxAIBZWKBS8oWSpTOjmBAaxA4="}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"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":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-formfield_0.19.0-canary.96c8bdc1.0_1602101237958_0.18307204959950996"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.6c21f034.0":{"name":"@material/mwc-formfield","version":"0.20.0-canary.6c21f034.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=8.0.0-canary.774dcfc8e.0","@material/mwc-base":"0.20.0-canary.6c21f034.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/mwc-checkbox":"0.20.0-canary.6c21f034.0","@material/mwc-radio":"0.20.0-canary.6c21f034.0","@material/mwc-switch":"0.20.0-canary.6c21f034.0","@material/rtl":"=8.0.0-canary.774dcfc8e.0","@material/theme":"=8.0.0-canary.774dcfc8e.0","@material/typography":"=8.0.0-canary.774dcfc8e.0"},"publishConfig":{"access":"public"},"gitHead":"367e1d2c78522b5c85dbc2693548d691c8b84d59","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/367e1d2c78522b5c85dbc2693548d691c8b84d59/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/367e1d2c78522b5c85dbc2693548d691c8b84d59/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/367e1d2c78522b5c85dbc2693548d691c8b84d59/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/367e1d2c78522b5c85dbc2693548d691c8b84d59/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n|----  | -----------\n| `--mdc-typography-body2-<PROPERTY>` | Styles the typography of the formfield.\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.20.0-canary.6c21f034.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-6Knye8SJbpd6P0tD7QC/DCjvuX7mn+omvesidCaER58Iwb4KzbY5RuDdD3Y3j1/NlK8bGNu/a4OGqabaRW3TSQ==","shasum":"32509c17654cc089d984e7908f90f5daca1bf8fd","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.20.0-canary.6c21f034.0.tgz","fileCount":13,"unpackedSize":40613,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJffkFxCRA9TVsSAnZWagAAm5EP/Rdfi1qeN/5mXQ0JfKgw\nzElik9r4FT0PhLx721mZ+cBwYM+mbPy6hNFO9Zx91aYSlB9CTDXTpKITEJY/\n3W4Gwd5VhSf9b14SF/hkiGKxftwLUmL0evEwTfqJ3sDHv4evwAfWVnG1vb8I\nC1gtwEkiWcAhiy44AsCSy9L3bgfWf2M7A7tlgsU4yY1EdhJTBET4NQGWx4g0\niNzbl0jTlqtu4g+7C/WEw7P3VlDZp6sl2BIspYUMj63uPuXA8gubMdaH1+QT\npyP/3mcaXOWvsZ/NnneIXJ0zXZdslceBoBCW3rFbYfOXJiU0dzjIZtcJWVFL\nDB7Wikx6xocmE6hfrBui9+jt/gBAChru9BXSGURBUps4xL/iBr34Ew1yl0Ys\nwIU9kMAVOqxbFslKwtGYfYfgXWYWat+cNMqoHSCkNXdnWmbYO+ZV2gqI6nOl\nlHcORawt0Lc/7/rYYjs+/LYGG6lHEsOXJpItxW0CzauM5xKRCDT6NP0SC10Q\nbZZ/RJjZ2LgWKUjgRn+syneIvrIhFpYhXOMW9qAMqmNHnpg6qr308YPAcfUW\nW3z4ds/JxfzMkHslkNvqDufPKh0P4ySVaVwDXGyO5frwliMOoCPDTc6OsG4X\nhbQkHex5u+HEEmtXLekNFcxULXsKk2RlOuqwBRRzS+HqD7E0vhJwH+lJ1Jxx\nX7cC\r\n=TPg0\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCMI6PysL8J67MxPrtWWkyM0XoTDXyKa5TrVYR4EY3eYgIgQcRftkZb7mAnSUe0vFm80jLW7LXpETRZxLH1Ol733DM="}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"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":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-formfield_0.20.0-canary.6c21f034.0_1602109808768_0.6879954458714859"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0":{"name":"@material/mwc-formfield","version":"0.19.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=8.0.0-canary.774dcfc8e.0","@material/mwc-base":"^0.19.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/mwc-checkbox":"^0.19.0","@material/mwc-radio":"^0.19.0","@material/mwc-switch":"^0.19.0","@material/rtl":"=8.0.0-canary.774dcfc8e.0","@material/theme":"=8.0.0-canary.774dcfc8e.0","@material/typography":"=8.0.0-canary.774dcfc8e.0"},"publishConfig":{"access":"public"},"gitHead":"6c21f03466ddd0381aa030eeb2fd8f9615a3ed73","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.19.0","_nodeVersion":"13.8.0","_npmVersion":"lerna/3.20.2/node@v13.8.0+x64 (darwin)","dist":{"integrity":"sha512-SPreCyud7eWx8KPAM+KbkgRyqG4sZ3YuzUdP8c2fdxSGZ2YjMGffXo46fUj0eqPFmOExaqivs9Xl+xXWwbq9rw==","shasum":"9a82b92ba9a3bac1508c91eef3005c8a93f76271","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.19.0.tgz","fileCount":13,"unpackedSize":40527,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJffkIqCRA9TVsSAnZWagAA6K8P/3Xa96Ifts6VTZWzzZBO\nhZsyADkocafU9iKP+E9frA7oPRAWvsmELZGCaavWwg2eIdw3LUAFG6kQrXYd\nvwlErUeOiw1hcxlIvezqlNjITQ6TUBEsSgccKPjNumQuXsb9wc3JnlLHECye\nZIiCve3Sjg5gfurkSSZsEwZx9l8vhPpa1KGVuT6wxfFuTV+fxqZReRnyDdC4\n943oe/TdO5IiEU2yvoer2JpsDkRON8TEtFlJ7dDVruORC4sTXtoEKJpHAXnr\nzjER8lupDbbHMbGQNyKK19ncNzYPqhfGiVRITdIoe2W76gDfrK1r8EJUHVWn\n3Q+7Kax4wPF81JTa8euF79Maazpyij8aJvikJMYTblTrMxoatp1i5P0IBsTF\nC8uLfppwH6qt5yUtr08SPTHF+iixZxrB1ui3A4iBwdW5xfAmU9aPB8qL4DZY\nXGk7QUOoDGFTLw+dqo3G+PI7yM9+4/iTy01E34XcrW9Nf/Hw0Dg+AGgovoej\nEmKZlVgN8CRTbtipv6+7PBmGGNnYAVr+REmEayAUPznJ6vd7b7p0zeUrHD/Q\nzN1k4Ing4XSKj2gNSwgcbfD3DhDn951tQQ7rmeVVEywupKDLxUKIQfIZnYcz\ndDyT+nP8uaf5qgv0aQ1HXxBDZ4cDZUQFPwMaz6OClCdUurnBNYYfrAbLTsQD\nDg1e\r\n=o8bj\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBrBZTUpPULglW12PiWGC/pAw2DnoWvCfUEsrtdAUzhtAiBiV/YyOA2dQNdAEZT/aqPjeYqncDOm8a6mJsFaigNN+Q=="}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"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":"emarquez","email":"emarquez@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-formfield_0.19.0_1602109993482_0.6196716636227209"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.1f026aaa.0":{"name":"@material/mwc-formfield","version":"0.20.0-canary.1f026aaa.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=8.0.0-canary.774dcfc8e.0","@material/mwc-base":"0.20.0-canary.1f026aaa.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/mwc-checkbox":"0.20.0-canary.1f026aaa.0","@material/mwc-radio":"0.20.0-canary.1f026aaa.0","@material/mwc-switch":"0.20.0-canary.1f026aaa.0","@material/rtl":"=8.0.0-canary.774dcfc8e.0","@material/theme":"=8.0.0-canary.774dcfc8e.0","@material/typography":"=8.0.0-canary.774dcfc8e.0"},"publishConfig":{"access":"public"},"gitHead":"3082455321637675854584edbbfeafa95d95dd1c","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3082455321637675854584edbbfeafa95d95dd1c/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3082455321637675854584edbbfeafa95d95dd1c/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3082455321637675854584edbbfeafa95d95dd1c/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3082455321637675854584edbbfeafa95d95dd1c/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n|----  | -----------\n| `--mdc-typography-body2-<PROPERTY>` | Styles the typography of the formfield.\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.20.0-canary.1f026aaa.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-MTp/Iro1nzjiVF42RqA1Ffu7W+MKgFHHYhHlCBZyqzdKCkrQuw2CsRxZWSYQh/XE7ew8djBbOuxw0hCCoUJFxg==","shasum":"37a064dae28f481cfe054fd204800ee4fcac4214","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.20.0-canary.1f026aaa.0.tgz","fileCount":13,"unpackedSize":40613,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJff5hgCRA9TVsSAnZWagAAcBgP/jiWCOZYz0XDTHC0QsKK\nKaXmRoC7GIMSNaX38UkWFHHoc8Gk96a5BunRFtw3AEijsccCKLsv22yjDdMH\nlSoD0nfPy9bcgywcrGan9KHzESctUvX3Ts6aKXjxnYpWs4TjbpeZJx+Vttw7\nzLD87rim6GgPYiRe8CzqoZbTV8KdV4cAJoeDDrzaThWLgvrPnxujbNqoPZwJ\n2/kokqPfSWgYKcIHrWzrzKIeb5a7nhVdbfZOWpsitytWuLu0Uoj23dgqbuXW\nm9r/ORISriL+ZAyXUmr5JffHJdhp9aY+uxiJFaeNa8E7xEPENu7CqHp4umz0\nlrMOg4QEZG4eWRklcMm/GbwgAC80bGLLY91xH3RBzYWbjyu+2qATS0C9pRLm\ncDLSUAkL4dhFiXoiFmEoE5f6q0cW5LzsCsNwzRxKp8tjqxZnWd+uRIoteHMD\nYL2KqVdZSS5YixQU3ggQd3te1CFFdADQZgwuynVCk+53F4yoy/2nWAHvm0vE\nSRIdjmDSYYa7s1gGAOm8ERP/CL99vhuNJ+DfYBE5x17iiw0lHzSjWPo9Hfuy\nZTdBkwFZwoYJIfmZ92gIk5+3xRS+wwLiELrbCDwshpnZWwQYuCn/iMv8SVJk\n4oBLBHBq9qG4msaG44QE46WnHIWz60dAJ5m3XR23p5OXu1bvohHJ78NSvxlX\npuS8\r\n=TRig\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDECZ0Api0FeitGnG2l/gekCH/BkxdQDf/vlb894T9MHQIhAOjSn/bUP1Ke3I1ju5/2hClHrsEEgPnWZtXW+lbzDKRs"}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"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":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-formfield_0.20.0-canary.1f026aaa.0_1602197599732_0.2058687990162169"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.1":{"name":"@material/mwc-formfield","version":"0.19.1","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=8.0.0-canary.774dcfc8e.0","@material/mwc-base":"^0.19.1","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/mwc-checkbox":"^0.19.1","@material/mwc-radio":"^0.19.1","@material/mwc-switch":"^0.19.1","@material/rtl":"=8.0.0-canary.774dcfc8e.0","@material/theme":"=8.0.0-canary.774dcfc8e.0","@material/typography":"=8.0.0-canary.774dcfc8e.0"},"publishConfig":{"access":"public"},"gitHead":"5f6894b191aacdb7da61e0e9f91bae96169fb190","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.19.1","_nodeVersion":"13.8.0","_npmVersion":"lerna/3.20.2/node@v13.8.0+x64 (darwin)","dist":{"integrity":"sha512-FD6wNKBTGSXyBrH/KlkUtNjE8wnzQDxX7yZQuLm6In3XPsTrEVBCWzAYMjuzAsh7pM16IgCnxERXDUnSNFpAQg==","shasum":"db95f0156fce07bce8334e6013637140b4b9e755","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.19.1.tgz","fileCount":13,"unpackedSize":40527,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJff5tGCRA9TVsSAnZWagAAmQUP/0fLmQwa5bcs/lSzA8V2\n63AWJN4bB12pT/iTyFcmN6ywuL+wteagylj1UI70JMnTvF9KKgZ+pRT+gVtF\nxOqYZXBj7Ze64FDX+f22FvBHABxAyq4o13u1pwm7NNMYNXdbJ9xaZFpHxvL+\nBdBMqspaJmnUfcvExwYLu/KXttbR4dIj5Hoj/H+Q2ldv7+ZA9lOz4wyD36kf\ni22/BYQ4F2L9pPmKhrMBbMtoI+8ZceNng6w8UmV7hLfFpZf3WcjvPp4GwTZB\n+KsJwVrVJ4BSE/ISKumy4vc6eGumEGbP0xP1kkq2WcrXtpS37by6Bn4DSAgY\nNCSm5WwGVuMxHcHb7m8p3LtozfzbKTrvYi10zCm0Vqb7PiMon930V8/B9ew8\nEakPOI2Ax5aZeM7c84hTH1RYx9Djd+sUFGaWOc4PEAb6R7msNHnWrUQe3e/R\n5SzACOL0ljFMvx1O2ouILTLiJikLgTH4OmZ40pEXcCEBqS1yo1UiP/oMnMO1\nGW/KXP6PDOfCCF51/gM+kJr2UybQxwzZOtpA8mnlbQr2EJTz2VSsfubV63SM\ne/PeacQxP3n6Mi3d2RSfF5QJilkS531rhZlLMyuDWkRqsccTaALyYY22PhgA\n+GCQVYbT2Z7a67negRHQUEVhOME9dlHMhSAp6TYE1wCVdurYFdPjtAwKbZ6m\nTpLq\r\n=8xoJ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC+VuVN7WcGXXtbp8Fjm7PwhRGzhVGUanMWJ7fKtl63uAIhALIWRB8gPlvHOGcX8pMEdKoMWpgTxrjIMJK27jlbI4zP"}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"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":"emarquez","email":"emarquez@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-formfield_0.19.1_1602198342060_0.5579633613315451"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.5f6894b1.0":{"name":"@material/mwc-formfield","version":"0.20.0-canary.5f6894b1.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=8.0.0-canary.774dcfc8e.0","@material/mwc-base":"0.20.0-canary.5f6894b1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/mwc-checkbox":"0.20.0-canary.5f6894b1.0","@material/mwc-radio":"0.20.0-canary.5f6894b1.0","@material/mwc-switch":"0.20.0-canary.5f6894b1.0","@material/rtl":"=8.0.0-canary.774dcfc8e.0","@material/theme":"=8.0.0-canary.774dcfc8e.0","@material/typography":"=8.0.0-canary.774dcfc8e.0"},"publishConfig":{"access":"public"},"gitHead":"63718fb08d28bef1d0a9044bb2ae8026b49541a6","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/63718fb08d28bef1d0a9044bb2ae8026b49541a6/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/63718fb08d28bef1d0a9044bb2ae8026b49541a6/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/63718fb08d28bef1d0a9044bb2ae8026b49541a6/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/63718fb08d28bef1d0a9044bb2ae8026b49541a6/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n|----  | -----------\n| `--mdc-typography-body2-<PROPERTY>` | Styles the typography of the formfield.\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.20.0-canary.5f6894b1.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-kTHv945NRvSbaZeyGZJlL3JvFHR2dw+P+HA8pp/n+84JtR9Q3uMFTK194tLS+nX/PEWzdRFOqIYTethGHtL+1Q==","shasum":"09bc8c7819d8f97e031036f8b515c61dc801d7e8","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.20.0-canary.5f6894b1.0.tgz","fileCount":13,"unpackedSize":40613,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJff5t6CRA9TVsSAnZWagAAzDwP/1J2U9qN3WGJz+QqjHAN\ne9ffURRhhGIkOP6I5q3iBrzq1gk7udM7DX255X9M0IximJjTM44yHHvPEx/h\ncCJ+ybW/2V77iG8+RYalLPWNBA9qP2f6uLO5M33aqKMMpm6Pp2g1KGfBfTaC\ndCNf+pRc+cHwGpuyzsChiZwXMZqgWpOF3el+ifjmfFlnrtJtdAAUNTJFG2Dj\nGdEEejQWfURMxY6fYaywkidFPhYVXqXbL2Id0s+M4qk/bDUpBI6MedzuH/fY\n5Mc/7wjIpABUSjSHucDhNhOXImdxKciXocyEoFAqbtS5QtOo8DK3hzzTqPwr\nqYa/MXkR8LP/oGKifkOfoHrS/XxpnXmrRmEphMxx3UbSbv+IHgllwUDVDOYo\n/6RaZ+YlIJi7L/e06ueehzDyuf/yc4XrjpChFebdlwAm/1BY1Irxwv62F1du\nMZWmdnGZ4yivgajBVt4Q8GnEQqvmxkZVcvDcuns9m3XJChdZPIh0JYEHznty\nNi7mY0lkqrYGv+sPkSCdn86/QjDmPyuRONa2GZIm5TGK42ZIKja0iI7kC5Gq\nOP7Xg/aqjjuA2JFF5alxbBkYtZfz0wXq4Jd/rWfbOArCbyeZvoMAUOvUH3cQ\nn9Iij+4ww7hCL+ukmYEreD0uN+U/TzeuCd+mHDK1LuwtpeG1CVr7fZtQGbca\nIx63\r\n=3ThW\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFTu2BuSVlElPqJ6/KZ4WbJ5c4mmHJaCL6jds4ZL8o6vAiASXEE8zL4PopBYLNqPztaWtBePJwjxh5+VOqpN5Sk4JQ=="}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"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":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-formfield_0.20.0-canary.5f6894b1.0_1602198394472_0.5421023595161287"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.f6260d06.0":{"name":"@material/mwc-formfield","version":"0.20.0-canary.f6260d06.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=8.0.0-canary.8a39352c8.0","@material/mwc-base":"0.20.0-canary.f6260d06.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/mwc-checkbox":"0.20.0-canary.f6260d06.0","@material/mwc-radio":"0.20.0-canary.f6260d06.0","@material/mwc-switch":"0.20.0-canary.f6260d06.0","@material/rtl":"=8.0.0-canary.8a39352c8.0","@material/theme":"=8.0.0-canary.8a39352c8.0","@material/typography":"=8.0.0-canary.8a39352c8.0"},"publishConfig":{"access":"public"},"gitHead":"d0f921476509811c1109c8805b0eaf1e5cbb3218","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d0f921476509811c1109c8805b0eaf1e5cbb3218/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d0f921476509811c1109c8805b0eaf1e5cbb3218/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d0f921476509811c1109c8805b0eaf1e5cbb3218/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d0f921476509811c1109c8805b0eaf1e5cbb3218/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n|----  | -----------\n| `--mdc-typography-body2-<PROPERTY>` | Styles the typography of the formfield.\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.20.0-canary.f6260d06.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-b6JhwEWtBUt6/ZbAyza9qSONgiVgihXr/onGe8Nai/5XrVnq/uMU0EnP33MyzkRtUS3lwYCcqg0Pxxi1KQkZUA==","shasum":"bb2774d0ba8229462e386343af239c973c444479","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.20.0-canary.f6260d06.0.tgz","fileCount":13,"unpackedSize":40613,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfhNnVCRA9TVsSAnZWagAAZT0P/2KekBmPseXpj/QVmSTe\nGjlsAtWBPMcLYi/hKbpSCqqQYLRrO8ZMGvYAHqKeL2JScJ9QU6sudBSwL5y+\nO05tcyrS+lJDWcB9oycW3/G7lhk74OW3ahMnTluM/8Ia2VnjWYM0DuCiYrwG\nSLxaV+Bf+720PVligwRUC7ySAcGiJ8r289QDcp3kORqB48lFn+NojNTDtlPF\nQNp3pl/jxto2G6eyFMgkYP+nISdCr6ImEnW2p19d8YDQ3eYlfMr0ng5E372g\nz8sJiXxhHWxOGz1O4+Vi6W+iMZSmaNSja7aZx6siSEc9aPJXPVj+C2YBSDng\n3XfgC1HsNhr8c6HSutTxWCnZIXHUpF4oqzDK59CW6sYxfomlMTLwOi85PgKs\n6Dn8SsCDIz4NaJksoy6ovrnEK5rgvotqK3xNqL93abycsjMIEI4e846xK/iQ\n3iGWHGwNzNkrEt3obpU45TvgUbgCzQ5T4+OClcbR+cSakobIcw8U3l+E2oD+\nbosZF9s+tkUsMZubzEaqrvsunoJFDGCHNz+0/GPQy+Wz9m0xBxNmDUDS7cEh\nuvePDCxSE+LW91c2gOnsftV58BhcChtDfNTxF9QdD0/jHyRXgBCpZmuT/2DI\n7AV5c+fU1qwXsu8Vf7TsO1FRVjX80serE0kOj0dohbIcyGq0wdkiG5/BhgIv\nC/CX\r\n=ciOP\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDOqTdyRFlNbIEeD+bnwc9Yue/uUY6C53NfURWqTeH3+AiBNqagQSY5x2R5eAgyWt3E2bXKpUHHNuqbVmBA1/V97SQ=="}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"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":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-formfield_0.20.0-canary.f6260d06.0_1602542037267_0.3432274881604467"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.2d1b08aa.0":{"name":"@material/mwc-formfield","version":"0.20.0-canary.2d1b08aa.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=8.0.0-canary.8a39352c8.0","@material/mwc-base":"0.20.0-canary.2d1b08aa.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/mwc-checkbox":"0.20.0-canary.2d1b08aa.0","@material/mwc-radio":"0.20.0-canary.2d1b08aa.0","@material/mwc-switch":"0.20.0-canary.2d1b08aa.0","@material/rtl":"=8.0.0-canary.8a39352c8.0","@material/theme":"=8.0.0-canary.8a39352c8.0","@material/typography":"=8.0.0-canary.8a39352c8.0"},"publishConfig":{"access":"public"},"gitHead":"ecded3a50181254f2caf9e2d7049466e24129104","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ecded3a50181254f2caf9e2d7049466e24129104/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ecded3a50181254f2caf9e2d7049466e24129104/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ecded3a50181254f2caf9e2d7049466e24129104/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ecded3a50181254f2caf9e2d7049466e24129104/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n|----  | -----------\n| `--mdc-typography-body2-<PROPERTY>` | Styles the typography of the formfield.\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.20.0-canary.2d1b08aa.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-bhOpA/1iTxHHW8kzKuR4XvrvNOfNtKMkY8c/5/ugbQfXEUoL2EqWJT3K7XUL9MDnHVpa6bo6T6QnRsbgAKFVFg==","shasum":"cc6aa0601859bcb97e4d2d6066b0dcea21eeb2c4","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.20.0-canary.2d1b08aa.0.tgz","fileCount":13,"unpackedSize":40613,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfhf5JCRA9TVsSAnZWagAAUAIP/R4lzyEPID7CHfQjjZgm\nAtF8WGoM1T0W8wNKQR6i2xXgnFCGTurELIgi0vCn5h10jsYuhzUEm3d3xKvR\nOJfMT9qiw2kXB0o2A31r25oyZ7fR1+1j2EAm1HQJvnulFtFbs3oNKKBbn64u\n4VPdgJ1qvOYDnuhlkvIWPidtnI/Rm3BiIhbKtUdfzemq/cRIPU1Ov6UaBcO9\njt8njwd5NNUAMc+XCdpTxxH8exVPSfJogxJqIFgPegE2U2SpNA0X2dqjOvH8\nBqWI/qfpzDyOCsxs5o7CB70iN7XW5QsYeYezW8fCESGMttxo6yIfz3PtKqWt\nz3SdAgIgGO5Ue1bGQ3aCpy1rHqEFukho1LSS6MS+/JNDGHdlOeS57VAhXM+O\nbTN39jBv7P9XNMzAimz2r9al/8S3HSX9nRSqB/N1ePn6C5MzRI1O9OyeMCBP\nlKMT0knVxp0YvWj/D0xiPqnJrybM56C9OkRxKL6dHGKO0Bbfgz69Z2llOKu9\nm3H4Egfn/fdv+Hrq6+mvFe4ZZoqnUnxuQFYQ73zClFkd7Fg4qJdVDjKVBZzK\nNRAJhKMRCG98/Ce9wVThTMj0HLcWAsgGte3BlEQLN0irylOAnGtTJTUFJ99J\nV1htRAeS8CM91BDLoMcq2h6yLWEOQCFAxKbBhCCW1DiPLZk4QfcbPzogMm8y\nyCje\r\n=7SIw\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDRIhGjDWVsTnZqFSOxgYxt7X108hePjXmyEeCygA3IDwIgesQGDgwiRyHoU3+jeb6hOETdVmCQzy0xG09lJItIoC0="}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"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":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-formfield_0.20.0-canary.2d1b08aa.0_1602616905400_0.2962265399480566"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.5bd58844.0":{"name":"@material/mwc-formfield","version":"0.20.0-canary.5bd58844.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=8.0.0-canary.790ca85fd.0","@material/mwc-base":"0.20.0-canary.5bd58844.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/mwc-checkbox":"0.20.0-canary.5bd58844.0","@material/mwc-radio":"0.20.0-canary.5bd58844.0","@material/mwc-switch":"0.20.0-canary.5bd58844.0","@material/rtl":"=8.0.0-canary.790ca85fd.0","@material/theme":"=8.0.0-canary.790ca85fd.0","@material/typography":"=8.0.0-canary.790ca85fd.0"},"publishConfig":{"access":"public"},"gitHead":"f577a3de2e8463259c7e4a5834fb1873a4bced9c","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f577a3de2e8463259c7e4a5834fb1873a4bced9c/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f577a3de2e8463259c7e4a5834fb1873a4bced9c/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f577a3de2e8463259c7e4a5834fb1873a4bced9c/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f577a3de2e8463259c7e4a5834fb1873a4bced9c/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n|----  | -----------\n| `--mdc-typography-body2-<PROPERTY>` | Styles the typography of the formfield.\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.20.0-canary.5bd58844.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-pbtxG1X+c4URMpeZ+eQBZbHjal/Rt6kvU0kkKdJAe+jEVDczXu/jWRdhAKeAWjHD6zKwKvxGJy83GodQV0n6mA==","shasum":"9c0e8f1bb946d55e0a6830f06bafb063f6821112","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.20.0-canary.5bd58844.0.tgz","fileCount":13,"unpackedSize":40613,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfhjwzCRA9TVsSAnZWagAA4UQP/1aMAJNPuLHyNNKxUtOr\ntez7aZHQyMISg8Pec3g5xcMV5hzqXCuOxdmMOND6TyHctUBl2OLSQio6D6EG\nd8AKzGpb6vyzPQn14NJtJ2JUDkcAYkA1z8CTl/ZLCxD4meCPmrUYLEO2+4n0\n0xlxoQA/odl5NMq6jzjE6aY0wD9rmtRtEww08Phlk7SIotV259BimE17pG9m\nVMNRI9darmYsGFE6/9wjNNX9W7Yyf4dsDdahLezg9eIWjaHQa+Spd3Twmk2E\nenmOZGGAYsNWumIWboxiKtfK3k4NdHd+XBtf1Bve+JyCl/pxqCFOfjog4oTW\nfpnJmSP5j0GpZTqsiYMWyunM6ogfriBYVBDUU1GEWEG3uxrbRAp2IPmzYTnz\n9H+TrnEYzd+YqvWhy4q/Hr0VZe8f8Sq+6VEUIBYRMYRLnwg3nLejoA3i0qyF\nMka8+fpz03VrQh4liCeHKJbiAwhJJh8PAPwx1luhYTvXKbyNG5v7iu2FQ2fO\njM4d2iHW1KIv68EvCEbEJBopyyJtjlGM5jzb+4z+VHw7E5yzp5o2vEmRaYqI\nwtmIl9lfm7PlbuCE3f8rYQVl/o5DAO6fcvnbZRDbiXUOrcYMQ9Mz70J2Vl77\nm77Ox1WesC3z9FAUtHj6/xuhxdFgEyZfhNroq1+2xMKHEKRwg7oHWt8WYnEN\nNiSM\r\n=uKJ5\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICkDB6jNnfcyKTbvitM/S0Y76mT8RKXAKMNcP4d9cjcSAiEA/YY9nIjZjjX0Mv4m37plgNKDgsrv+ww0AhmgeOFmj10="}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"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":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-formfield_0.20.0-canary.5bd58844.0_1602632755525_0.022939741047023565"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.bc846b29.0":{"name":"@material/mwc-formfield","version":"0.20.0-canary.bc846b29.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=8.0.0-canary.c71ebfa02.0","@material/mwc-base":"0.20.0-canary.bc846b29.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/mwc-checkbox":"0.20.0-canary.bc846b29.0","@material/mwc-radio":"0.20.0-canary.bc846b29.0","@material/mwc-switch":"0.20.0-canary.bc846b29.0","@material/rtl":"=8.0.0-canary.c71ebfa02.0","@material/theme":"=8.0.0-canary.c71ebfa02.0","@material/typography":"=8.0.0-canary.c71ebfa02.0"},"publishConfig":{"access":"public"},"gitHead":"08ef67ebd3aef2e1a1cfc139021dd528a4275f6c","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/08ef67ebd3aef2e1a1cfc139021dd528a4275f6c/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/08ef67ebd3aef2e1a1cfc139021dd528a4275f6c/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/08ef67ebd3aef2e1a1cfc139021dd528a4275f6c/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/08ef67ebd3aef2e1a1cfc139021dd528a4275f6c/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n|----  | -----------\n| `--mdc-typography-body2-<PROPERTY>` | Styles the typography of the formfield.\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.20.0-canary.bc846b29.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-3E1tMDjjqU1aMWMtlXyRf5Q9lsUMCPrjTohpWnLdOKAnfYcaQhWMVBYJWOW0tZzYCheZjuaWvX7Cbix5EOZAWA==","shasum":"dc1285b630a52dece23d9cf5465d193ed1dfbe68","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.20.0-canary.bc846b29.0.tgz","fileCount":13,"unpackedSize":40613,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfh0A/CRA9TVsSAnZWagAAEpEP/2kM4jrDEdTfa+V+Dxef\n4Py6aW7nEJjej6OwszAmoJMIPF5C0dtkqThE9yEtVzFDEu3qhFj6SOu4y1VE\nNHMeFa2qDi1/ufctopQ1mO/f3bdW6Qb5Vjj6gjff0ngmU2z48Q5dmW3cP/KV\nov3fxZgRNRDePABXp0ZbNMQdiZH7nnl98H12b2srkGaQSSj/9t01sKJlf6J4\nEIQIA3fiO4tuHZtLc7D3lifa2KxWK1Ig7ho1HoTJ6tpfPLWoPQ1Mxxu6MX9Q\nGxt5eus7rUD/ag2O4UtWFxN6/eXEefAPI+eJCH+k0Nhw4rRkJPe0Jr+tbu5c\nny4tYvkkDcYSZcwFQKIPLMOlnKeTA5v434j8TQnyvkSbBL/m5/4upyQ81ixP\nGG83YuOZAeGD89pKACjLyBUmxIwpbhAf04vfGccdRcox3Ka0n1TpsHgacO7J\n4RbRaYnLpwk8BKcygdYpmJIJMgDTungXGPSC40P9xOQBJ3Fzf/gx9g8gIPXm\nq0/Sh7GGXnklqkpx9mxiiAPNEBHEfL6wxXzh5YKmBKns3ZqrzyEOvdsJ2g80\nBva0UQ5Z5/kOxrNLib5renvsQ2p9MDRliNC6w0hS79t5VSINf0HVpTDjk/Oe\nsZHOlghY+/vgra5rAE8OcruJ3Lg/BCjS/L7ETgctFz6+faRKHneq6DWJNTlt\nNTkj\r\n=MS9o\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDdXcDskSbHtPUpLFAPzqjrs3dSdne4RNU4wuwfPQX5VAIgEY17kDSdMl/xSfSaoWVyKCdk7L7ee5DxKa00P1R/3Xk="}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"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":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-formfield_0.20.0-canary.bc846b29.0_1602699327175_0.5944530138288315"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.3280b686.0":{"name":"@material/mwc-formfield","version":"0.20.0-canary.3280b686.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=8.0.0-canary.c71ebfa02.0","@material/mwc-base":"0.20.0-canary.3280b686.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/mwc-checkbox":"0.20.0-canary.3280b686.0","@material/mwc-radio":"0.20.0-canary.3280b686.0","@material/mwc-switch":"0.20.0-canary.3280b686.0","@material/rtl":"=8.0.0-canary.c71ebfa02.0","@material/theme":"=8.0.0-canary.c71ebfa02.0","@material/typography":"=8.0.0-canary.c71ebfa02.0"},"publishConfig":{"access":"public"},"gitHead":"b97a59c2fac8d04478f24f297f15106622007735","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b97a59c2fac8d04478f24f297f15106622007735/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b97a59c2fac8d04478f24f297f15106622007735/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b97a59c2fac8d04478f24f297f15106622007735/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b97a59c2fac8d04478f24f297f15106622007735/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n|----  | -----------\n| `--mdc-typography-body2-<PROPERTY>` | Styles the typography of the formfield.\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.20.0-canary.3280b686.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-Kz7wbwlfOViRRoEAfbZKm+5cpn4apM71K72F2GR6N6boFxzawVBiiNlAeH1/91qQdKmQUYul6qZ3Nmnye4UrHQ==","shasum":"e38a945205934d41708342f5133b5556ea1874ac","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.20.0-canary.3280b686.0.tgz","fileCount":13,"unpackedSize":40613,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfiONyCRA9TVsSAnZWagAASvAP+QG0gUQBjD5hD/j2q3aZ\nyBpALgsGJz3GomDPVq60fRTtHm/sjyMIh104gdua+OzQFxkwOHMwDJBE59/o\n7IkUK6UkiMKi88wFdY4NihuXNUGxDTiaayro93/3QPCFqkpJujQk5sFN5l5T\nJ1F1FZaAs75j+tx520OugXzCp05niKd1Uh7s4kIDOFUa8hK5Gt3yyr5gM2tK\ng69OedeKAAtrMsdQkZsGYSwl+b6X2BJnthJYQVWM1k+QWUbynOw8hgap1MwG\nrSe7xDztzVdq/Auo+0NKUXkNIvEnZXQVOpn/3yp+SUZ8nLTjPl4b+8E8KNtc\ncJh/fr23tuPYVoeSgT3/Uyn27aOvhX6qEoZtAgHkoMc9gEiqGvsToHQiftjC\nnaNB6yKsrRtTuBuAJWPLgvSKgospRrgG9EGJaaSAK6FieLvWE46k0sxEgyeJ\nbYs2v1inYuaE2BtupMohGNdAtXOn9Kh0o/WA6eL1BB9gw1VVd1d0jbkQ1XIC\naoVTLv86DeZ0DoF0QSjsgVV1PpTbYu1NfXsbKgvyC9/wmRqQriHVoQGilw+Y\nUsroKJVeIb9uq3z6HA0Q9ffwsw0GnPxIF8Pc3hurDz6weEFlSDeLiJIWr0X3\nnj1WU6/cB3yg4nyWnjadw/5qoE4bSq55MMJILyRFHkk8cNvKHGwAMqnCYbv8\n3r/Y\r\n=NsMz\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDFt9o8SZucA9wzmFTGw7KKVxnDZ9WfbnVZCr1plLNVGgIhAK0zoLyQHZCZTr4pM+vUqEBSzFeWqFttFydQ4CrpsUe6"}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"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":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-formfield_0.20.0-canary.3280b686.0_1602806641949_0.4834256289442691"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.9e94cd38.0":{"name":"@material/mwc-formfield","version":"0.20.0-canary.9e94cd38.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=8.0.0-canary.c71ebfa02.0","@material/mwc-base":"0.20.0-canary.9e94cd38.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/mwc-checkbox":"0.20.0-canary.9e94cd38.0","@material/mwc-radio":"0.20.0-canary.9e94cd38.0","@material/mwc-switch":"0.20.0-canary.9e94cd38.0","@material/rtl":"=8.0.0-canary.c71ebfa02.0","@material/theme":"=8.0.0-canary.c71ebfa02.0","@material/typography":"=8.0.0-canary.c71ebfa02.0"},"publishConfig":{"access":"public"},"gitHead":"805fad1d9b182d084e682ab7e59a4e45d40872a2","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/805fad1d9b182d084e682ab7e59a4e45d40872a2/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/805fad1d9b182d084e682ab7e59a4e45d40872a2/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/805fad1d9b182d084e682ab7e59a4e45d40872a2/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/805fad1d9b182d084e682ab7e59a4e45d40872a2/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n|----  | -----------\n| `--mdc-typography-body2-<PROPERTY>` | Styles the typography of the formfield.\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.20.0-canary.9e94cd38.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-R29G+0mHKPKQOsQODqyxVaO6DUTyw3MbAyrlhQXbGTr9J/M33mU9H0fxtvbpHoKLalI6IoydpfkW/bsggwzEIQ==","shasum":"982adff163e6c4b95059ec05b11d22a7e70e915b","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.20.0-canary.9e94cd38.0.tgz","fileCount":13,"unpackedSize":40613,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfig0bCRA9TVsSAnZWagAAfnoP/2jSmKG01uDf4tSwedSl\nJdvb81sjTuBNjs1HVBqUpKwIEOMyG5tVox/zTM/OqmjYC1ZQ+KytSxnUyA9p\n63N4M/f9AW+F9GV6GhQJzddYANM5aVnFhcNdAJWZNXQLE+R7MqpaBpjlS0Ep\n14MV+HczaQd9PNiJbGW50gBt9UiReq327P8ygQYJX7q9CKqztpkJhBPJr/Fn\n+F/SJQYU4xLbHGseCbF/E8CkQhBzeBoDo+Vo/chOISPGBIgdYDyQGrLDOlm0\nV95BlOHkUGjEZ6cPMC5KoMdtUulCbeLo/+HsxYLv6tbBA0Vz55jQCnaIbEvY\nMImJIRMPMZzDUOH/bye8Ib2W4OczgVYfIE6pF2Bfelx5DVijGcQlV05E+U/v\nNeB76vxFHM8mRoxrXRJG/REefq+Icr2yfMXF4NTRc6B995CxaYT4CB9mVYIE\nu+TZEebljjPx5xXCuPdqctBzYaXQr6LY2g9bdlTYJJA5cUKQqba9L84p0ACy\nJdpTPKpvqrnKnPeMpK4WQhJfAB4NgMmMJRxIgZ8pkjuw1FwzPqlay0e9KVmu\nTcFVoDdBq1FGgGjTWuBbojI1TbxJTnzGvYjRbyk97cDq6ArKUDVAx+V/KqzQ\nvd25DrpVoY+yIe4FRjp6fwVlVXGggjjQaRK7J5omDfToHWEJa57ym4pWEgD+\n/lC9\r\n=9z8D\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC9EhkP1VaZQZTyeGbk9Y6T/71aTWoH/b37o84HVieeBgIgQsBx6ROZJSyaesiVIeKBuB00DyNul2FZRZ3RXMgqi70="}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"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":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-formfield_0.20.0-canary.9e94cd38.0_1602882843536_0.3790269770491521"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.4773c773.0":{"name":"@material/mwc-formfield","version":"0.20.0-canary.4773c773.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=8.0.0-canary.2ab716cbd.0","@material/mwc-base":"0.20.0-canary.4773c773.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/mwc-checkbox":"0.20.0-canary.4773c773.0","@material/mwc-radio":"0.20.0-canary.4773c773.0","@material/mwc-switch":"0.20.0-canary.4773c773.0","@material/rtl":"=8.0.0-canary.2ab716cbd.0","@material/theme":"=8.0.0-canary.2ab716cbd.0","@material/typography":"=8.0.0-canary.2ab716cbd.0"},"publishConfig":{"access":"public"},"gitHead":"fbc8b44864ae10f0bb46e568b25bf4de49eab777","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/fbc8b44864ae10f0bb46e568b25bf4de49eab777/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/fbc8b44864ae10f0bb46e568b25bf4de49eab777/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/fbc8b44864ae10f0bb46e568b25bf4de49eab777/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/fbc8b44864ae10f0bb46e568b25bf4de49eab777/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n|----  | -----------\n| `--mdc-typography-body2-<PROPERTY>` | Styles the typography of the formfield.\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.20.0-canary.4773c773.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-SO5u3NVnHT2GiV/zQK8jKlmHlpMtvdg2cJCY/baMx1TvaQNEYeI01cVzBAS7D8y24lU4xz7V+vcDG14yDrHzHQ==","shasum":"572229e08ea3f3111507aedeb800eb570f956099","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.20.0-canary.4773c773.0.tgz","fileCount":13,"unpackedSize":40613,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfih/OCRA9TVsSAnZWagAAaVgP/AuA9r5jqMDgvC+VICFB\n1E5aNtolU0PT1NV0ClwUSwJ58e2LVdMpV/Z+BKZDREIkIvCgdTitpZjgbbfF\n3E7Tud+sM5OtuuPzWGquUTM8B6qqLWwKdtXK/yUyT8slwUg4wopOCVQMLaC3\nEl3how3I60cKswIx4k6CA38hkHZh783ZXLOHZkqGLHbQN8s70hFDFLzkWfrw\n0EUYbu7DGQ1ZCkoOjHJ/WyPAOCMN1XtXGlUzz58vZLGtT2sMYXSPhA7KL6up\nsQa7tsCPvHi4YY7cwIZr3JvS9dqGGETO3jN1i4swDaFpMdx06aKHIVQHIcVs\nSLf6zMGQ0LIxYyYbjuUm+DGyCzA+haerWHsBldzTzo0neIaoQeIzwVdZwGDU\nRVrhFKQ5KSLH6k88F3XprvTWAsDh0pOL9cwN2HOl3i6yzajI5j/z5UxRcZ06\nU4xO7KG5xGAGACtvM0SCRQYMpoZTnLC9IwYMsWgFZGkkjuqA1nfoqMRUoceD\n8KMTwH955ik6rZrezisNvtTcjByt1slqaZMs4L8UjKA4A0cUuGfvf/yjp28w\ntePcpgEY2afllGB5Ip2uKMG77ACX63QTN3CHXBId50RSEXZywoZsijRA6+pq\nq6G3E9HtP3VMD59kfB+AMl5XzjZ2oHuXVdcs28WXGDUsJ+RQNqIEt5lYy1Hk\nIpSG\r\n=wGS+\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDhGuTJT79f0CYw0nQlz6GXBv25XfHDlEwc8zZNuy/bWgIhAOzB0LPtIV5nDhsFjWTAQlsAMC1mKTXO09O9fGfWA0iq"}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"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":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-formfield_0.20.0-canary.4773c773.0_1602887627609_0.8114352331692203"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.65787913.0":{"name":"@material/mwc-formfield","version":"0.20.0-canary.65787913.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=8.0.0-canary.43c1c5e2f.0","@material/mwc-base":"0.20.0-canary.65787913.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/mwc-checkbox":"0.20.0-canary.65787913.0","@material/mwc-radio":"0.20.0-canary.65787913.0","@material/mwc-switch":"0.20.0-canary.65787913.0","@material/rtl":"=8.0.0-canary.43c1c5e2f.0","@material/theme":"=8.0.0-canary.43c1c5e2f.0","@material/typography":"=8.0.0-canary.43c1c5e2f.0"},"publishConfig":{"access":"public"},"gitHead":"b21d55977da5e0c291e9fcf3fb992ff4c683233c","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b21d55977da5e0c291e9fcf3fb992ff4c683233c/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b21d55977da5e0c291e9fcf3fb992ff4c683233c/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b21d55977da5e0c291e9fcf3fb992ff4c683233c/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b21d55977da5e0c291e9fcf3fb992ff4c683233c/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n|----  | -----------\n| `--mdc-typography-body2-<PROPERTY>` | Styles the typography of the formfield.\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.20.0-canary.65787913.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-IDkrTlZXzFCYJPAB9Tkc4xs51GxzBeDbYg8Rqpl1ma3tEhj4ReDOoMlKLK4imduvVgs3q5hG1vZhpl8fmlZKDA==","shasum":"6c7c682a4d8a61408c6cab9bd5fc302e7acef39f","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.20.0-canary.65787913.0.tgz","fileCount":13,"unpackedSize":40613,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfjd/5CRA9TVsSAnZWagAATIAP/Rnx5EbuhPR/goA1VnG+\nUJVx3k0dDXVRP80xQq2Mcx4aZrgu109CUqCJ10J2CPEpdpzTfjopHDLbJCLQ\n45gmTIwrwmVqYi7tMkfgVqqMFuIklkUSn4S0NpMvfMJ+PkRhLIOjRtP6/b2O\nY7P43xrSN3hKxflZ8kxEOcOHXifKv9FvUcpCyRkCxEFQ5wDYaL0DcYPd9nn3\nbx/sXiHZdWxdLw3MbQ8ptGAEQ3fAbO/N1ev6BfOuOm0f9Ek827FEhtXfxBfI\nraFUYA/xz/5JOKckd4SnZ+YrCqh8ldLEvasioNWHO8UJefBfEdAIUKUhdW1s\n8fVxkd1a5wix74Zr7EIBOT81mCPCOmXr9OGCbKwdELsSRugxrctpNyyoA4Nv\nn2lszph6r+BpkWwdGVAqa/pYDny3MH8CuVKENK0+A6w+vbkXreeukgwla5Z1\nkGE8O/+Lo+MU9mlkDTVIvDSI853wGh+28JIloLQRSLNWE3AnFxyzDuc71iJV\nIXMaN+hh8PMhihjGAcNpiYEJNrxHfozGVBZD9JG9yl4vDEJvEmrhziNHrkU7\nWBLohAhuckkSMV/Gn52/zTcoe7xdUKmYNg7XOOvymjoD1GZdU1TZdVbujV1Q\n7V/h00eXjh0JHI8bJIRrnXcE1TcFwJLzqsDfICtBccxz5uoE5jZVGm5o3Tib\nGFs3\r\n=3z8F\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFE5FKfQ5j4aSz3yEYFIun5GwMQXqrOFAY3VFc3vXSuNAiEA0e6Zt1XtxZHc8BP0Dbg9Y0qdG3uFZTscGdEv+hMBM04="}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"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":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-formfield_0.20.0-canary.65787913.0_1603133432850_0.20045691486871475"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.5485fba3.0":{"name":"@material/mwc-formfield","version":"0.20.0-canary.5485fba3.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=8.0.0-canary.43c1c5e2f.0","@material/mwc-base":"0.20.0-canary.5485fba3.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/mwc-checkbox":"0.20.0-canary.5485fba3.0","@material/mwc-radio":"0.20.0-canary.5485fba3.0","@material/mwc-switch":"0.20.0-canary.5485fba3.0","@material/rtl":"=8.0.0-canary.43c1c5e2f.0","@material/theme":"=8.0.0-canary.43c1c5e2f.0","@material/typography":"=8.0.0-canary.43c1c5e2f.0"},"publishConfig":{"access":"public"},"gitHead":"9648298c6a3406f312222d0c0949954cc1e250e4","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9648298c6a3406f312222d0c0949954cc1e250e4/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9648298c6a3406f312222d0c0949954cc1e250e4/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9648298c6a3406f312222d0c0949954cc1e250e4/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9648298c6a3406f312222d0c0949954cc1e250e4/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n|----  | -----------\n| `--mdc-typography-body2-<PROPERTY>` | Styles the typography of the formfield.\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.20.0-canary.5485fba3.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-bdkeVzLvl7iPo6QiWMlJgPZj2pEbI77MJTlKFT3h4i0pLayPFS18NFQXkHtcPxWNjuPyKcAq74LMzkhppkZV4w==","shasum":"7763260912e345de0e52656905f5ab11d64e6b30","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.20.0-canary.5485fba3.0.tgz","fileCount":13,"unpackedSize":40613,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfjgPmCRA9TVsSAnZWagAANPYP/jxWIoWoj6W4Pd1g759D\ni22yfi4hCytyRSg/ErxUzAKVmO2MReoJCohJifMI7d3DEKF/sKgZqip+pA8w\nRN4l/me/tRE7Vks2iOK/q4l2ySgu+muqIC50WkynuBVujOIue/YHNvK3a0KQ\nO2fqjod8On+4u7v9XSPB8symTo7lRnGI4JyIzXDjlkoWnGEE5xgGzNswEnRH\nqbGUmZD2a/OWCZsOopjMdcN3R3c3dq7PnHsHYhasFtDE8awLFQkuucEW52Mp\nIYKuM05ZLIoePJtYi41QDNconitcbNnU+Ww8/1zDFUX2QulT8euwiGWSi+U1\ndRYL7Ih+6/c3LamBG1z5rVuqq/2uL9H6n2jWdJnB0oKnt1so7dBsrtMXYN+T\nsXfhqHHobgR2Lfb/0pk6ztNa6yolM5Modqiocu58MgsuiZImOK95COfhGo3m\nw7eKIkg+jWe7b0QU5KQrm32B938aTo4pirCNVIpl5AJmxqKPRrGvymQ5JTzJ\nFJvtMU89/saH76Vlyuiyg3+PYqEOCFLcuQRd6YuVKP0U3o6ptejIXX1kfMsC\nYO2InDmfTUPGb0WBBz/uQUs3se42pKPIiQhZkAiMEE3FPzHduGPawtxj4t/i\n5p5vRUf+fN0TFbLywIqlTf9T84YtfmfaPE+DiWQRvL85E7Et7ye9vt2zaYrl\nburj\r\n=2WqW\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCu+du0cQY1t6MmSdzC85ONqQJJOukX/6XB6+MC2XxlegIgZUjyPysZIq8wlA7+IVNlb9rARYzx+5FdCUDQvmRLY5w="}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"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":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-formfield_0.20.0-canary.5485fba3.0_1603142629572_0.33832470044807805"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.a39d0a92.0":{"name":"@material/mwc-formfield","version":"0.20.0-canary.a39d0a92.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=8.0.0-canary.43c1c5e2f.0","@material/mwc-base":"0.20.0-canary.a39d0a92.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/mwc-checkbox":"0.20.0-canary.a39d0a92.0","@material/mwc-radio":"0.20.0-canary.a39d0a92.0","@material/mwc-switch":"0.20.0-canary.a39d0a92.0","@material/rtl":"=8.0.0-canary.43c1c5e2f.0","@material/theme":"=8.0.0-canary.43c1c5e2f.0","@material/typography":"=8.0.0-canary.43c1c5e2f.0"},"publishConfig":{"access":"public"},"gitHead":"c523e6fd9acdd92ef501444da567a8910ed478e7","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c523e6fd9acdd92ef501444da567a8910ed478e7/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c523e6fd9acdd92ef501444da567a8910ed478e7/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c523e6fd9acdd92ef501444da567a8910ed478e7/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c523e6fd9acdd92ef501444da567a8910ed478e7/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n|----  | -----------\n| `--mdc-typography-body2-<PROPERTY>` | Styles the typography of the formfield.\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.20.0-canary.a39d0a92.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-rYYx+Bsgw1KQ92QPUMjux/0vKVk4i4ZLi6UKd9v9/uD0qjKqcMdWjS269EpZ1IXagNz1p8iu89R81JsToEGCmg==","shasum":"5d8e840587f5d95714b06be26cba979b947641f2","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.20.0-canary.a39d0a92.0.tgz","fileCount":13,"unpackedSize":40613,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfk0nNCRA9TVsSAnZWagAAR8cP/AvhhJdnPD5TCQ5MDEGJ\ndEOcN9l3KBNW1Ghe55jfGrWuTitwEjND0LKsEAfq8AWyshic0xlHgqhryAF7\nVGVtRRPWJB4IkxAknVCTa0SULFSxrAj7Zj2CB4QiE6r/hA8RExhdCOUPQkZy\nZc+2gOd7PIMrxoR1RydbnNSk990BHmICWfXMolKXAihBA+x41JWIApexv9i0\njYsGlTsAPCj1nh1RmaQ6fJDSOV6XaVBlQHFHP9NPbPnb8EV+Soa0HQdAH3b5\nHMCAqYEadNZNecMu5BoA058gCY94E5Sw6aVN7tsMnihEC6Je8m25Hm6hR6Hu\n/jh4KgTBz7Bn9EiN7OY6w2IUz/fr7AnbTbQ1hrVQlFGbMkl3GoKkDAK8dVhK\nNX7EhVu+gXbaIcLtIzHckC3QT95Hp8ZEDnIkt2XoE0UVC0gVN64HCcsyhP3X\nlktftWSZJaQuEjLFapCKjlOmaCiD70NM/ZcIiznJpPRD3OZ47HKtD2e8hEo9\nPIKATus55g4PBMW5P8jR4GV3E3Vg3c/I1M6nYa30Vl2ZDEAoDMt4uzcxx8U7\nY/ZUTu1zBt1T7QrcZfValDBq5YhdJiAVES14jtp9eJon0vK7ccZVySGhleyi\n92wcBlJyTWxz7FDc3gTOuehbaUW/YoIL9jGIEWzVNucOpcVYT+5F9GmJ+zy3\ns5MH\r\n=Bqjn\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIB7Z8BGH5rTxF2eUeBgQ9xpb7HPHxYN61wW8E4vk5VjOAiBjrNJyHICRHAr+pA7wukThzW5e5EVIVe7HPUAGVF1MCg=="}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"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":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-formfield_0.20.0-canary.a39d0a92.0_1603488204811_0.11203204727126614"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.4eafcbc1.0":{"name":"@material/mwc-formfield","version":"0.20.0-canary.4eafcbc1.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=8.0.0-canary.ccc64eea3.0","@material/mwc-base":"0.20.0-canary.4eafcbc1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/mwc-checkbox":"0.20.0-canary.4eafcbc1.0","@material/mwc-radio":"0.20.0-canary.4eafcbc1.0","@material/mwc-switch":"0.20.0-canary.4eafcbc1.0","@material/rtl":"=8.0.0-canary.ccc64eea3.0","@material/theme":"=8.0.0-canary.ccc64eea3.0","@material/typography":"=8.0.0-canary.ccc64eea3.0"},"publishConfig":{"access":"public"},"gitHead":"d5be869d7cb28aaf425a4fae37a4f61d918dc1d4","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d5be869d7cb28aaf425a4fae37a4f61d918dc1d4/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d5be869d7cb28aaf425a4fae37a4f61d918dc1d4/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d5be869d7cb28aaf425a4fae37a4f61d918dc1d4/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d5be869d7cb28aaf425a4fae37a4f61d918dc1d4/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n|----  | -----------\n| `--mdc-typography-body2-<PROPERTY>` | Styles the typography of the formfield.\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.20.0-canary.4eafcbc1.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-AuEFauxL/SvpFTQBQsuy3DY60UXwxn7CMcspnm3A/wJND2fE2RUOmUIEDkOVmwukRqUE+SYRz7divSKCbzhm4A==","shasum":"c394c074dabfdaa560bbf24b2923f3918ae94be3","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.20.0-canary.4eafcbc1.0.tgz","fileCount":13,"unpackedSize":40613,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfl3XmCRA9TVsSAnZWagAAYeEP/RH/ismyObX6GdlTXgqR\nnxIfZh57+grZ6YXmINkqlSzP1n0bEGbqX/W6oYkbD7CDHO6AEADScpUjQ1wC\n4pbTVGDWSRjB+YdYHvZFo2rUof7+GWeyhieR20oEwO1ZaK1AElxskmjfg/DH\nHHIiH4Lzcir+DOvsOn3fU1F+gayysB6OMA5/d54j5njK6yEvagmhXRbc+zKj\n2wSLAEmoPKNjmIKNBdzj+HG1utNXp089EnSOLP+5ceBG1BSF2nsxxkv4zT3c\nJ+Iq+TFbsl8yhgGOQfCPcaiRHl5o48xVQ/+XmrcvOm0W54yFXe/cv03AAY0i\nrBol2Ih+lzaxTm2Kr8g54qPHE2+9g9R6jRQ42Po5NtUe3sX8Of84tTwnzL2Q\n6ep8yse+jb5oHN1bIOVj0HFEnKopBoz/AATbSIYKvX2M2nMegXk2xlNpF0cV\nMd2wXiNGlsGfyni0iH7I6IbXg9193AfIQet/ZccdHIia8hr1k+eMegp68JvG\nX3FBoZ0+gdapYmqLTidS9ZJPM6sXhiGbhTLfsC5RiMcUL7ibMumnCRYeKo0H\nRme3SKw3kbuX2wlr9us18wWByJYqo4j/RvkbsRti9xa//7CO5yJNB3e6hGz+\n2QomXM/XDmIeUOBc4HXxRfIWWP/cz9NgJMxCLcpyw29x0b/H+qrGgVC6fYJ/\nc/cB\r\n=tE/h\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDUGOZeg+L82zJTyx8xPRbcfDeBWr8rFDOoahij+132vQIgNfu2EcUNwpPJCqnmjK1XVt7KVSHzXB6kthdfENomYw8="}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"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":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-formfield_0.20.0-canary.4eafcbc1.0_1603761638538_0.8093883801959325"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.32961593.0":{"name":"@material/mwc-formfield","version":"0.20.0-canary.32961593.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=8.0.0-canary.a79cdd019.0","@material/mwc-base":"0.20.0-canary.32961593.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/mwc-checkbox":"0.20.0-canary.32961593.0","@material/mwc-radio":"0.20.0-canary.32961593.0","@material/mwc-switch":"0.20.0-canary.32961593.0","@material/rtl":"=8.0.0-canary.a79cdd019.0","@material/theme":"=8.0.0-canary.a79cdd019.0","@material/typography":"=8.0.0-canary.a79cdd019.0"},"publishConfig":{"access":"public"},"gitHead":"af0d60d5c2174ff8ae5098ea73212398be59bc74","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/af0d60d5c2174ff8ae5098ea73212398be59bc74/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/af0d60d5c2174ff8ae5098ea73212398be59bc74/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/af0d60d5c2174ff8ae5098ea73212398be59bc74/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/af0d60d5c2174ff8ae5098ea73212398be59bc74/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n|----  | -----------\n| `--mdc-typography-body2-<PROPERTY>` | Styles the typography of the formfield.\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.20.0-canary.32961593.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-NfwjwQ4x82Uk0XJQinI/BaMu/QpWYlr/7U5kGbMYmPNjpfEEa193Qgxgblll2YDhkmFVCjQfEz2bY7vNTXUhoQ==","shasum":"ca75b71affa3a32d4bed84bbbf45f47ec0a99117","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.20.0-canary.32961593.0.tgz","fileCount":13,"unpackedSize":40613,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfmL2KCRA9TVsSAnZWagAA0CAQAIpWtUjCWIsgBxgbRQ70\n0ppAsROx+1Z2dDEyBsmAPj4Na79Mhmozs1QOZjSzFaReSbsXJ61+FkolIHeA\nguf/7UhZNgE5IZObvUIZ+lZdOv8c81TCbVFxpnA888K7HhjrdWdk3qB9TH3u\nXW3qoixGssQW/9SJe/O7De+MAqYpcH17AS03pB9E8PHZ56v3r4sYuwrccb3U\ndvLbx6rYgSH8RqRF91N7Ot4pGyMmywj+Ci/DpRAuvrIcudHhoP330FlQkdGs\nIIEiZ7dJEv5tTg+IbT2dgi/TJDH//yx5hlbR5T/xPllYvYmzEMHZYb1rJENV\nRlMFoJg6PG0wQgWeaQtZH6kKemTNbzwjh+/tgQAV+piB9Q7AQrvl/aWTlFpT\nzrP7TAYs7tq0VYl84Ehm84GIkTRryJBX15ikszTnPXD8eKPHOcltuqhQe1r/\nooXRUJv/qjwJKJCN6U1rr/E0m0qvlTT+H6hmfqiyV90EGIhrW0b7vSqwblLy\ndk/tCYsAfJM0BOWVlTyZGoHV2vAM8gd18OxUr0HydzK+nOc/sc9Nr5pzNHw8\n75Temuxl+Vb5ZL24UNO2CzLWX4ULY6YxQ+MoA21PUl/yD4h9bqS+sEgy+FRt\nZSVMC1GlSpdNcKUmof2EaH/5kcBYXPtnfJw8mzNe5l1R3hNFzBG7TpUXJ+8U\nPgsX\r\n=pD0I\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQChuP6BvojOfxqB+HRBS2dl9t6VsUMDjZQneI/r5Eo2uwIgO1Iw5PVdPcE2HoWnmnSxrFeWBx+Cm0L3OxbdnNh9wVI="}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"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":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-formfield_0.20.0-canary.32961593.0_1603845514010_0.2000882174809877"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.8e3a0601.0":{"name":"@material/mwc-formfield","version":"0.20.0-canary.8e3a0601.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=8.0.0-canary.a79cdd019.0","@material/mwc-base":"0.20.0-canary.8e3a0601.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/mwc-checkbox":"0.20.0-canary.8e3a0601.0","@material/mwc-radio":"0.20.0-canary.8e3a0601.0","@material/mwc-switch":"0.20.0-canary.8e3a0601.0","@material/rtl":"=8.0.0-canary.a79cdd019.0","@material/theme":"=8.0.0-canary.a79cdd019.0","@material/typography":"=8.0.0-canary.a79cdd019.0"},"publishConfig":{"access":"public"},"gitHead":"a21493f177ef3992fcd667ec3ce774d4fc926d7a","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a21493f177ef3992fcd667ec3ce774d4fc926d7a/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a21493f177ef3992fcd667ec3ce774d4fc926d7a/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a21493f177ef3992fcd667ec3ce774d4fc926d7a/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a21493f177ef3992fcd667ec3ce774d4fc926d7a/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n|----  | -----------\n| `--mdc-typography-body2-<PROPERTY>` | Styles the typography of the formfield.\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.20.0-canary.8e3a0601.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-Rx3llPqQLGsV7l2OpTtkB/VqCQ9zNub3row4ilmfNpeul+cQZF2dc10H1v8oo3/ST4lgZ1LufVkvjFwbTIgE/A==","shasum":"796531930c4929ed7878163815c7b668d80df8f0","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.20.0-canary.8e3a0601.0.tgz","fileCount":13,"unpackedSize":40613,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfmzXiCRA9TVsSAnZWagAA8r4P/AxHni1r417XGOHGu2m4\nZsrAahqLXNI/6dckA0sNf+74VDgw6qYXKnBninGR1C5gB6lKtCfgivzF1tDI\nXeszY777dRv+/fj4JYCM76tDF17STY+gegJcgOnJFXY62ecMjb62d8+8JADF\nOOs+TK7g/yWKVNzL6S6Uh6ANGyjQAxxz9wMsoFn4DG7+Tx2ilZdhS2SAzM4E\n7A+wst5pVibzPlLy/ffAWMYMSnuXoN10+RvqLtBuPUFKhS9+/wNWSRHZale/\nQpdSx3p4ktKLVp4ckk8kmktOzUKrco5w2a28YTWwQ6kICK/CmZLCvngfvCxW\nlPycqAhFQzftyaRRmibeswBc4xlfrcWBEY4DT/K6/6T+oQmOBH37MnawqLgA\nhR6P5qPbnzz74R2/Z1rEREOwMNm/eRKsgGIGEEJ0zwrRJ9L1iRJv7/e7q+Gj\nAKCpuZyjPPYsyHzvbOYBLe2YGbbcBQNRHIetC3V+WgRUkAulrewrJQPar6d5\nFckcJowjFP9IEPRHCZmiviMURxygCRErueycJ4Tj0qv2Tv3dsq2Rgb3off2r\nd7jlWZTQL7s3uFhn+YDxFM9B0N5dJE0zbzuMRLdJTa1UkAxoaAvm2yoH/lhN\nA0ld/IEFcMDZ65jYfsXXmf+GY/Oq6kuTf0DK/XwAMT8uWGqmfoCBn3vXBhkP\nsv2R\r\n=tnPy\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCvjbCfRNnhomaan0VOiB+V0JDI1o7PvvaGAtpEx5xxIwIhAOce0+gTIprKmImNM5pWAZjixGdm1KNH3sxehi59wwHO"}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"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":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-formfield_0.20.0-canary.8e3a0601.0_1604007394107_0.6644864724476802"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.178c25b4.0":{"name":"@material/mwc-formfield","version":"0.20.0-canary.178c25b4.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=8.0.0-canary.6d9648ab2.0","@material/mwc-base":"0.20.0-canary.178c25b4.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/mwc-checkbox":"0.20.0-canary.178c25b4.0","@material/mwc-radio":"0.20.0-canary.178c25b4.0","@material/mwc-switch":"0.20.0-canary.178c25b4.0","@material/rtl":"=8.0.0-canary.6d9648ab2.0","@material/theme":"=8.0.0-canary.6d9648ab2.0","@material/typography":"=8.0.0-canary.6d9648ab2.0"},"publishConfig":{"access":"public"},"gitHead":"80850b707414fb51c8072422d293bc7fea8a6d8d","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/80850b707414fb51c8072422d293bc7fea8a6d8d/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/80850b707414fb51c8072422d293bc7fea8a6d8d/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/80850b707414fb51c8072422d293bc7fea8a6d8d/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/80850b707414fb51c8072422d293bc7fea8a6d8d/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n|----  | -----------\n| `--mdc-typography-body2-<PROPERTY>` | Styles the typography of the formfield.\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.20.0-canary.178c25b4.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-lT27lpfjzhGKmFGj8LMwardnW+qc2uiyBh2iAAqQKbyc2a22IGTqDEdX+gOE1T3NWGaP6KqBWeWmmpqYZmeNKg==","shasum":"8915d6719b7f7ec0639251b2ced29729cc0f0142","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.20.0-canary.178c25b4.0.tgz","fileCount":13,"unpackedSize":40613,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfmzkNCRA9TVsSAnZWagAAF2YP/1P1dW8+PfOGjWwc4Wf8\nFtXvOu0ngwZ3LcRi98KQIV/1m/bxxmtVusYhQ3deMbH1pPqsLPYfo6n6lwER\nlzBmEc/hqieSMcN5bX9hWkvMU8z8pcSGjeMcqAfLl5pfGWhY53s036+Dqzrr\ngozQIZ69EzjAl3svXFVw/bKdQF1b5R3IyAeBjmMoUcpXUcw88RVxA5Flliz7\n8bZdOCthp3YOM2qnYvINanMIpRHL1NOpaSlEhDnl1JwYPIoVraZkMPPEzlp+\niSx8O8Zsb2RrwYPLKwOIPc0WkwsYW83OAOTHpEhzkdboH2O3oQmxtRcPkwYF\nX/ClC9BRgSfAVhZ04Jn8KXFouOSGWdQBCkNGj46bgUMdgHNird6ASeF3xAcB\ns8BSNPus0FRVTgvzyRygCB+nGzn8YyNgWgPezfLIuO3YuuDWyYzbGLTVte+i\ngeSBYWUTSaxUXxdzZ2HBhs8x04AYBDwnAa7IoZlWSr6jBERzLBeaeY5jP4JP\nYC7pBL3o9lCrWSHiz9xsb+jyP8WI3avYEeOFoeH1UwI5P0AeqbcaSRT2H1+z\nwhWeJBPUe1pd7OOqLTzH0VfXKHuekpm7N5ZezEuIs6yNC8aVUHYtQr5cVIOd\njKMNas+XvO5AEv4EHGutb0sAu4rV5COQQMH7PqWNLa3iSsDhUmqR4xXe9lu5\ndvaB\r\n=fdww\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICWk7RBkuZy/8DzM1LrWIbpz6VRrBKiXjp+vAi/yUn/4AiEA6ogy+4YpWApfxWN76YPRztyLSYualnTV3FQjqZdklNg="}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"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":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-formfield_0.20.0-canary.178c25b4.0_1604008204555_0.2190057438555455"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.124beb49.0":{"name":"@material/mwc-formfield","version":"0.20.0-canary.124beb49.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=8.0.0-canary.6d9648ab2.0","@material/mwc-base":"0.20.0-canary.124beb49.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/mwc-checkbox":"0.20.0-canary.124beb49.0","@material/mwc-radio":"0.20.0-canary.124beb49.0","@material/mwc-switch":"0.20.0-canary.124beb49.0","@material/rtl":"=8.0.0-canary.6d9648ab2.0","@material/theme":"=8.0.0-canary.6d9648ab2.0","@material/typography":"=8.0.0-canary.6d9648ab2.0"},"publishConfig":{"access":"public"},"gitHead":"8d314226afe84cba75086ef952556fa1fc0c5de7","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8d314226afe84cba75086ef952556fa1fc0c5de7/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8d314226afe84cba75086ef952556fa1fc0c5de7/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8d314226afe84cba75086ef952556fa1fc0c5de7/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8d314226afe84cba75086ef952556fa1fc0c5de7/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n|----  | -----------\n| `--mdc-typography-body2-<PROPERTY>` | Styles the typography of the formfield.\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.20.0-canary.124beb49.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-ZavHsG50+342ir0Xv1j0NpPYpfMvxWBQwW3w7+xlhjsmQmJlJrYMhOKt9V3ar9XGMKNhCFxgcLMIumaG6nYpeA==","shasum":"0feb646fc52cb6bcb81a629e0db10782f1087ef0","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.20.0-canary.124beb49.0.tgz","fileCount":13,"unpackedSize":40613,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfnKp0CRA9TVsSAnZWagAAMCsP/At1QFJ9N2JiE4BiR6Fr\nOzQtSBpzpsu5RfF6ye8tSpAn3U5fDMVbnLRnQPRQhVfywUnMnvbvQcQvOT2T\nq9jojUHN8D/dHnzbJQJqx2OEZjMKJ6imzH6U3GXATPqRQsenT5pYLafmgdG8\nRbejHxVguxIsm+worFA3s+VYNu91s3w8g1Cc6jS4UOr1dU+b6r54QNRWAbbP\npEg6Zhp8k0LXxhDQ+6ayLzwaKscRS2q/pX5HdVoB2llaacw5mh+Vl5mSRxH9\nMSXwxEsed5XNoUljT2v8Z9PTPrZMtvmw8NymYdwO/1zMLRsHiRry4X/eh10t\nBHNxwb9WnbDuiz/Vc2zI2VFGwfabdfyaioksUDWQ8rRQrynSNwLlHyqpjxBW\nJSNkNkL3+hK9zKt/d7B+M4Bm/H4juLNMOAQbNt6gcB1KqXsrrn7fDnUsqiIB\nbWm/FHzA5qgONIEzUP4il0wPWbV/UCNVCiAfwGEW3Xag0G9cYaow6xVbdTxJ\nCGGwCX0+Q1eXkCmwAzu/tK+pyOpTF8mUziH66HAncTbC9YWJHlFgBlQkYh7y\nKXG4Pwj8eL3Zf8g73MktgETAwgXI2Zi8WV/myXWCqUYUsiy898QirGhEW8IH\nfelKvpDe9GDe7rUOrda3mHOPB2TTRJCiDtF2aj9UC+LPlD0uPltvRip2GPh6\nIydt\r\n=i9TQ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD9QA37hgrAbvKgE0s9zAlsbQdzOa0QHwoCT227olrZPgIgJyZetZtdK5S2CEWaFmKmc3Iq0ShYV6o67PA+nRy+wU4="}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"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":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-formfield_0.20.0-canary.124beb49.0_1604102771855_0.8655297246924218"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.5937f468.0":{"name":"@material/mwc-formfield","version":"0.20.0-canary.5937f468.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=9.0.0-canary.d6b5cd418.0","@material/mwc-base":"0.20.0-canary.5937f468.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/mwc-checkbox":"0.20.0-canary.5937f468.0","@material/mwc-radio":"0.20.0-canary.5937f468.0","@material/mwc-switch":"0.20.0-canary.5937f468.0","@material/rtl":"=9.0.0-canary.d6b5cd418.0","@material/theme":"=9.0.0-canary.d6b5cd418.0","@material/typography":"=9.0.0-canary.d6b5cd418.0"},"publishConfig":{"access":"public"},"gitHead":"d1d2934f5269407a8c0f85d5112be5354c17a971","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d1d2934f5269407a8c0f85d5112be5354c17a971/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d1d2934f5269407a8c0f85d5112be5354c17a971/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d1d2934f5269407a8c0f85d5112be5354c17a971/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d1d2934f5269407a8c0f85d5112be5354c17a971/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n|----  | -----------\n| `--mdc-typography-body2-<PROPERTY>` | Styles the typography of the formfield.\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.20.0-canary.5937f468.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-+2D/Jbh2fzOxc6EhHGGmOsEdxmw0IEKLdit0t87xNR1sO8LTh7B5MDq0wdQOYHyUmHv56YrRYRZWSH+gAEhVpQ==","shasum":"065d9eeacceea85500335cb7dca95e8bbb2d67dd","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.20.0-canary.5937f468.0.tgz","fileCount":13,"unpackedSize":40613,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfoxeECRA9TVsSAnZWagAAgCsP/jKnMGFmnYjg8kZQVFg2\nxZaesTUovRLKKikHxA2o56jPGjQTaWXrnAo46SaAhZJLCxZhAAIw8WEJjMfc\nv997l/ipYL9NmUkdOdU6DgdkPfiKSCjp8ivZlsUJySLZwF53HNR/mHYbEOrp\nUc03+JFlFzf5CiVM4yHQMAvGsY4qUuVyWNk9xpXHl17g/FHQ2SxeX366lf5q\nZAtpdtBkJUTI6ZhAIgoNGdoxO6d6BTKEF/3T6J2qEAvG15UPrNOcKrmuDL8g\n5apAm4qBkf/5/EO2kyhADQZ2aD69PcO1epkmnbDd9av0L6LWdKdagI907uV/\n5bK9HUoMXzngUbIxRcW8OxzC5yi6bNbZBq33yZsgTLcUr938rsvuwmRrgXo1\n6bS+NW0lgZA9Irov83WNwUKwh1BOfegA8icZ+1cDafnZBV5v24FrCKuOHzhr\n7ygBQYDoufppIp/QjiCgGoVfSehhHgmBTKK5PwFe6qACzRhXaZ9IJ6qSYg89\nuG9pcQRXN1GrARXECChDJU2Xca9PbOHzxTr5fFpBz6ufh12SNM/AhZpHkAGY\nAVVio7lSBqiNVcD6v0/TSJYVTnykvny8hLWlMvomEbn0YPkRav13bN251moi\njIJCePQ9eWPNwz4l6SoyBdGFmBytNBW3UsN8re3At4lCAjIkv7d0iLbcXtLz\noNwH\r\n=Lh2A\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCu2dPVqkSdGdOO8HJ+KRfUZQnTDQUa5Rm/rI8cTMOIPQIhAPZpGyPiqOXxcYryQOaEqD/ZlluOVGbK73CG1dpJwt1w"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"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"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-formfield_0.20.0-canary.5937f468.0_1604523907658_0.18057110064561877"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.a9bafaee.0":{"name":"@material/mwc-formfield","version":"0.20.0-canary.a9bafaee.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=9.0.0-canary.d6b5cd418.0","@material/mwc-base":"0.20.0-canary.a9bafaee.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/mwc-checkbox":"0.20.0-canary.a9bafaee.0","@material/mwc-radio":"0.20.0-canary.a9bafaee.0","@material/mwc-switch":"0.20.0-canary.a9bafaee.0","@material/rtl":"=9.0.0-canary.d6b5cd418.0","@material/theme":"=9.0.0-canary.d6b5cd418.0","@material/typography":"=9.0.0-canary.d6b5cd418.0"},"publishConfig":{"access":"public"},"gitHead":"672dd0ebc89e93768abf9e9fb4a31fecdd7873ce","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/672dd0ebc89e93768abf9e9fb4a31fecdd7873ce/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/672dd0ebc89e93768abf9e9fb4a31fecdd7873ce/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/672dd0ebc89e93768abf9e9fb4a31fecdd7873ce/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/672dd0ebc89e93768abf9e9fb4a31fecdd7873ce/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n|----  | -----------\n| `--mdc-typography-body2-<PROPERTY>` | Styles the typography of the formfield.\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.20.0-canary.a9bafaee.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-z+APs2IWLuPiuqazN1z1Yf3pQlv0RBFNEdZXcdzh60j7Z4FVLXCxcFvVbKnlfrEJPa1Ad6rnYeXcrvckBcrflQ==","shasum":"ad8995ea09ef4ee02558deea8e39fb355500655b","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.20.0-canary.a9bafaee.0.tgz","fileCount":13,"unpackedSize":40613,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfpH0BCRA9TVsSAnZWagAA+tIP/3mg1nkuDE/HUxdP19so\nv+yJD2zFdWhOpxSglQ1fW6xY/OZ471laJ50V1jNyMA9ci0LNDXmFfSSGpUb/\nv7hC/C+tmooE8BXXx4jv8urjXRXLtr1plxzSinjsGjqZ1NU3mq4YyJPIf1aF\nNX/W4oxLmAVDN8e/InD4O0Kz+IkgtjYF/BLNURYWdpKM5eQD7Li2v9FFDtpw\nTK6fQJrczLS974Zs5Pgcdgp5/c5qtfmHhRXJHEspXWY9sV7bKgEaLhKknaew\nbOfYQFQrTnvZl7oNRKLmvmyY/7iT8m56Fdl4OG5rEhDVs9QqEpgHEZ0BAxiQ\n1dFu1G9aof+coffp80Hi8GePtAaPSQH4H5/mBgAd8X5t3SXE1rGlQbgywqBC\nZFfqKTw0uuC6ftz6S01ol3AodQj5NwPMi28EEUbNmJ+ytSDaVO+ugu53jv9r\nStodftJOPLrXs7Zzc+8xmIRnFD68qPk1Q1GBC0kO4JNyGMlzQgCpkBab+HmB\nT/fr9S+4JJw92MjBAH64iycU+maGsNW1JHFCjQbRtfj0pefiUVGqQn8Qp/Hp\ngjKiFIujLYuFLsdn0FNe/YNt2Jq7eH45j8m2y1RjhI5v6qkTJXHR9rtImyTy\nMal9hQewzvgI5TQBkA1YszWfz7swDZGTNqQhP9m/zH6KOYEgovdLi9o/fu7z\nzSqt\r\n=KxLU\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICtldbU1GbqRtIcUvn9lUX13FceRlPJcfAVhmLb8l4T7AiBjyOjq/y8B9OE6ZmkiOiinDoUHV20s+xlw7wkGJ18ayQ=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"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"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-formfield_0.20.0-canary.a9bafaee.0_1604615425003_0.193381353914722"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.184861ee.0":{"name":"@material/mwc-formfield","version":"0.20.0-canary.184861ee.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=9.0.0-canary.b39094d14.0","@material/mwc-base":"0.20.0-canary.184861ee.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/mwc-checkbox":"0.20.0-canary.184861ee.0","@material/mwc-radio":"0.20.0-canary.184861ee.0","@material/mwc-switch":"0.20.0-canary.184861ee.0","@material/rtl":"=9.0.0-canary.b39094d14.0","@material/theme":"=9.0.0-canary.b39094d14.0","@material/typography":"=9.0.0-canary.b39094d14.0"},"publishConfig":{"access":"public"},"gitHead":"292f005e510c59c9b761c4120c56e8c9854e4595","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/292f005e510c59c9b761c4120c56e8c9854e4595/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/292f005e510c59c9b761c4120c56e8c9854e4595/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/292f005e510c59c9b761c4120c56e8c9854e4595/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/292f005e510c59c9b761c4120c56e8c9854e4595/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n|----  | -----------\n| `--mdc-typography-body2-<PROPERTY>` | Styles the typography of the formfield.\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.20.0-canary.184861ee.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-05IJjaaXkfGqla0/wq4ani1bCSaRBkPSoVYBjfMEADof0GjaSU7NvLcEw/BaB+day6bpBRlfcn3pWsESGfKTQQ==","shasum":"2aa14b7989fff6b66aeb81cc410c5cf7f5043aad","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.20.0-canary.184861ee.0.tgz","fileCount":13,"unpackedSize":40613,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfpexBCRA9TVsSAnZWagAA8FkP/3W+JjeXXmUXOFV4GdiM\npkw1dXkBFrAtqG/kiN7D2lBPMd+yV5nb0gU4mqixDAeOGcYuPbFtSgq6Hk6T\nZXcvsF3H0UJfXTwfN+tyYehlQXmABgeFVs1Z9HEiFeGXzlHZR9602MhHI1bU\n/xaGlq0IvWS4zQc7WqFjIl5h+02WwQHqUCl0UJvAnFWi4sQq15BErNOxzYYj\nPJ0g6egrHTFzSl9DbwO8FLuuqhxEm8UZ0CTc75nwx3hSMxmtUEReby+Xrxxs\nTfPILA3IMNN1VP4OvfnXvt9rx2zjZaF5khSHAwnRhXYHMk6BsZPdmriLeHuJ\nOHyX2DeGfOixKhujj1BIuNL6hRNtLVuPMit6iyiU7zNFrrI3Vd7iTDLDRbe2\n8QxZ0g79rZkXaUuSAjHUaQbXGwRsll/eAWd/pa9+jh3XZPe9Th7Zj1X01y6h\nTXOEwmhyG+KwTMYkfRXRSvjCIDyW3886T4hfsZuUy4ToDH5ZuWvp4gU5LmMZ\nt28OZIPyAsxpMiy4fxBn+XJ7lvlD+zU+sD7hWVTUzSeuk3RQQhNCVKSc0aNi\nrSnNihkXiNchU6HZVbaa15YD7dhjpbi+19vUC2Jnp86B8GvDI4zW77tX1rTp\nRyn5ywwnG8TvHo/Ej2uHCzTa6Yx2XpF2k6nSHwvnimucA5qsXhkwBZbWn+TO\ngpGE\r\n=y61I\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIB0UZyHRa40BF0lNmOWh8nH++chzkY6RGYE9VysuwyWKAiBF+4TKBORKOqkooaIcDUjbxDXF/PNZNk1xnlBF6qnnxA=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"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"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-formfield_0.20.0-canary.184861ee.0_1604709441204_0.04142289669075683"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.6c6ae2d6.0":{"name":"@material/mwc-formfield","version":"0.20.0-canary.6c6ae2d6.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=9.0.0-canary.b39094d14.0","@material/mwc-base":"0.20.0-canary.6c6ae2d6.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/mwc-checkbox":"0.20.0-canary.6c6ae2d6.0","@material/mwc-radio":"0.20.0-canary.6c6ae2d6.0","@material/mwc-switch":"0.20.0-canary.6c6ae2d6.0","@material/rtl":"=9.0.0-canary.b39094d14.0","@material/theme":"=9.0.0-canary.b39094d14.0","@material/typography":"=9.0.0-canary.b39094d14.0"},"publishConfig":{"access":"public"},"gitHead":"38ecce3da3f921a8c45ce342e47456c702623761","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/38ecce3da3f921a8c45ce342e47456c702623761/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/38ecce3da3f921a8c45ce342e47456c702623761/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/38ecce3da3f921a8c45ce342e47456c702623761/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/38ecce3da3f921a8c45ce342e47456c702623761/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n|----  | -----------\n| `--mdc-typography-body2-<PROPERTY>` | Styles the typography of the formfield.\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.20.0-canary.6c6ae2d6.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-W2tjDR8FzosRfDcZX0eGh8TDYUI3oXShGb4EuDsl7gSG5U0Ob996RuetuitUDg7mGapYFWjU45BWY1AA8GaceQ==","shasum":"3c91b5ac4a820126945a657f938c0467be0abc2f","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.20.0-canary.6c6ae2d6.0.tgz","fileCount":13,"unpackedSize":40613,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfqT6TCRA9TVsSAnZWagAA7WMP/0TJX7b+oQl/fRobEcv1\nwEeAFhvDg/yqduTExQR5T3VH2pGXC/PzNa2UXQZMsgixKgHcadaC/37u/A26\nZPaQz434SLhXOnzmJh5RkgSClEKbStZJ2LFmyfidx2iPd3zxH4rPoGtJPaIY\npm8JwhSav/0r4PhEwtiqFj0AG/0dZDXMzlvpyhTiVv0LtMo7szYJ9bcY2JZc\ndW+8owO6FnM2es3nOAj9Tk0CaKUHVBsyexY0/89+2QvOMXWZQL6b++8n+MkB\n4T9T1q6pdCw9pjETnTLX4IADqPq3qNZPp7sezemorgB5vHkrYpMYJ1rRLJGf\nCGYaVUOCkWFVOnj7uFGv7ON5md74jAHDssQsTK8Vx4mtW+3bBq8duYOPMWiQ\n2kHUwtwL7h0rsN3wXhnfdoY6yjC0cGVT9iwP9dmRwTQ0V4QxuNLGdeU/9tgt\nGPOrPnrkNRFiL7jBydFVnScZhc/n53qHapbu4rfwaMjDCHsTDnZ8MDQmtd78\nHbTX2Xaz47PhjCCNoCoUc1hqBCuWFuHOkd06QZVQek3aoc5rDf7xOOEgH5YO\nxrU/9oR8XPcyaCYfe1gG2UbTR8gmY9ChsMbd3xNIV3IYJBVIbSWaJSVo+qku\nWVi7NvSEYLsTET3fRlC5Lo479YmmsOl52rVg9qb51U/K+gcdJ7RTd5YKfEgM\nu/uG\r\n=xHUZ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDnIzPld/4xXKmkJF3XNeeP/YO5lMqtEpgJYI/mAveP/AIgfVvciCJctIojwDX7GIXPOFZ35IWKWHPcso1uyfcYc80="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"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"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-formfield_0.20.0-canary.6c6ae2d6.0_1604927122533_0.39650151449854354"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.ea2aa477.0":{"name":"@material/mwc-formfield","version":"0.20.0-canary.ea2aa477.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=9.0.0-canary.b39094d14.0","@material/mwc-base":"0.20.0-canary.ea2aa477.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/mwc-checkbox":"0.20.0-canary.ea2aa477.0","@material/mwc-radio":"0.20.0-canary.ea2aa477.0","@material/mwc-switch":"0.20.0-canary.ea2aa477.0","@material/rtl":"=9.0.0-canary.b39094d14.0","@material/theme":"=9.0.0-canary.b39094d14.0","@material/typography":"=9.0.0-canary.b39094d14.0"},"publishConfig":{"access":"public"},"gitHead":"44e884f1fa66508713a0632b0fd8052b5a88aa77","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/44e884f1fa66508713a0632b0fd8052b5a88aa77/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/44e884f1fa66508713a0632b0fd8052b5a88aa77/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/44e884f1fa66508713a0632b0fd8052b5a88aa77/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/44e884f1fa66508713a0632b0fd8052b5a88aa77/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n|----  | -----------\n| `--mdc-typography-body2-<PROPERTY>` | Styles the typography of the formfield.\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.20.0-canary.ea2aa477.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-8pdeSA599wXbwVlYpcQY1LouvT+uJA4EJgv8JsC1Eg+TDgO2FCB4dxD1xn9pchrChC3SAuq4XjL3B5fvrbTJpg==","shasum":"43473a8f6e3dfa149c1a053d51e064a922ce8a70","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.20.0-canary.ea2aa477.0.tgz","fileCount":13,"unpackedSize":40613,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfqddkCRA9TVsSAnZWagAAboEP/RC+3iDGSuxcBPMdbQa/\nnr5QURFQR8Juy8GCayXHszzp91AcLEy91/iV4i37hHIEzOj2QhOLxTqoiMvz\nqhorLRiNhmO8YwBzyRcdJX3m3axOAaJ1A+KbehYRvo0a2nuBki0A/qitZ1vq\nb2SOFEDHKGSUlKVFQQ8GYYgA9dtO4FJV+dEelTeGUHYnOPdWS48Pmrw+x8PD\nBZTUPFwNMjC1lCpXY6rrh0Zwww/q2zZzvWcY2BXw0NbpYxtemd7x2XNz5jDO\nATm2agCUCMdK38tcyD2IgdjUFBBnq/jD0ZApY74NGRW82WnKFjw3+oiu+ccO\nZjGVw2WL/q4ua5WZNVCj5v1pcceXdAc1JBnCMbI1LfxF7RkJ/8hxvemfJsI6\nSTbPlVD7DwB83FKcbj48vUWTWIhuVrRNmr3R/ootMaFUb3B9Z/kIIKLcPX1K\nor6wa6dlZTcrjIptHnkHDiPhhH77HXwUPW9WMXWcaSJVdVicgriINrkBMz6q\nBwSEC4ZCULVcY2zVR5FEXYFmakVePsUmCKLfeKK5/312pjqwb8DjpLh6geNq\nAnpY+OxJmx1dWDjV4CAr6cVdpBr5wFgdoLexE7GrK7D3iRVCIyIGR9dFqYUR\nc7hcA9MxmFaliOK8FmSAqq7472Eh2/3wY3wZU1C7nDS2WaUpD7mrlIAq/UHE\n4Sdv\r\n=cx8M\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDofLiYr19eJXEdOSIIjqvPA2+P+XxI4qmF1++zKZZWTgIhAOP+vxya8RJX3XuEB9bCMzt8sLIWnYtD5cH9vOV+MrG7"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"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"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-formfield_0.20.0-canary.ea2aa477.0_1604966244268_0.2236472133253664"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.a2c088dc.0":{"name":"@material/mwc-formfield","version":"0.20.0-canary.a2c088dc.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=9.0.0-canary.b39094d14.0","@material/mwc-base":"0.20.0-canary.a2c088dc.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/mwc-checkbox":"0.20.0-canary.a2c088dc.0","@material/mwc-radio":"0.20.0-canary.a2c088dc.0","@material/mwc-switch":"0.20.0-canary.a2c088dc.0","@material/rtl":"=9.0.0-canary.b39094d14.0","@material/theme":"=9.0.0-canary.b39094d14.0","@material/typography":"=9.0.0-canary.b39094d14.0"},"publishConfig":{"access":"public"},"gitHead":"60aecd658763ef0aa8ea8055ed91f03f6d3697fa","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/60aecd658763ef0aa8ea8055ed91f03f6d3697fa/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/60aecd658763ef0aa8ea8055ed91f03f6d3697fa/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/60aecd658763ef0aa8ea8055ed91f03f6d3697fa/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/60aecd658763ef0aa8ea8055ed91f03f6d3697fa/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n|----  | -----------\n| `--mdc-typography-body2-<PROPERTY>` | Styles the typography of the formfield.\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.20.0-canary.a2c088dc.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-YCRJukEqd4Lg0RNv58PlCJfVZefo8WY6sVJT8g1VtyIX3GWgpn7p8oKb3d8fPe1fkxcHMr5WSl6uVQeVyj0+CQ==","shasum":"a6a5f4bd2b9fd2e0f33aa04fbb21c073932d0e55","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.20.0-canary.a2c088dc.0.tgz","fileCount":13,"unpackedSize":40613,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfqqJpCRA9TVsSAnZWagAAGmwP/jvkeczuvy8kgLiBlpYM\nVCZMbIofJA6iLCC/+hUe9+dL4PVnLVEGweeyk/tRq3Hkw+QtS33EUjbk4Ghc\n1+ZXrKtS/Ved7bkc0DNHhDFvyO1v/6Noxif4JtIhg3fi7j9at+sgO+CxEGnC\nR9IlMGi4LxOANaJ5Xt0OvbUSoEhOn+1srvWbE/eLBotV7uMWcQBU4Aw8I0SR\nCrOsuDD+lwp8pp236OYPlGVuUoJOhq+yPkexTuaYeyLALq8fVlJgTqeWalIy\n2cWtBfu7Kdq84JnIj/b4HZxT95LlINFPHXcgETU9Z4VYITeXgwN6Lg8Fpr0W\n0kdNIs3JXY1/OUA0o0SBMRe6/8KD3hTEx7SehthqSGm0Q8T/4qg5xniZkcBi\nZnSddwAKxz3V+Hx9S0hSOuUW4RwmpwFLG10HkaeZke6wVqMWOjaBcfxi0ZLj\nopyte4bW9CMU9yAtF1F3GKUh6jPZT4742AYpBU+1mhi7zkIZaNt46X+2rmdJ\nsmz90ARjjwQPzm+ec1F1ZFn7iK3a3EadkJPoBB3WPlfdFm60zJIghTHactX+\njr41n4x/X6qZk/4TiMNpeyhofC2iFXWpWLU86C2olnA/AHzRSICbMyrDEpoX\nv07jpr7Bee2+N671NPMDIczj1KqFNGRkOwXpglKuKO1rS4NGKH02JIFVpMve\nee0i\r\n=6JYC\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEjcz/lzPaQ3qp/FGfxmdRG8psP/8MSlcgZJsIEfqCkiAiBiuMtVTQ80SZZVJVkFRQkF+aTldlVOh88xFp/3XU+5nQ=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.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"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-formfield_0.20.0-canary.a2c088dc.0_1605018217072_0.4287705540977784"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.b04d71d4.0":{"name":"@material/mwc-formfield","version":"0.20.0-canary.b04d71d4.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=9.0.0-canary.b39094d14.0","@material/mwc-base":"0.20.0-canary.b04d71d4.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/mwc-checkbox":"0.20.0-canary.b04d71d4.0","@material/mwc-radio":"0.20.0-canary.b04d71d4.0","@material/mwc-switch":"0.20.0-canary.b04d71d4.0","@material/rtl":"=9.0.0-canary.b39094d14.0","@material/theme":"=9.0.0-canary.b39094d14.0","@material/typography":"=9.0.0-canary.b39094d14.0"},"publishConfig":{"access":"public"},"gitHead":"6c9d3a1dee5f50ad7d82b0f0e59f7c21d9524452","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6c9d3a1dee5f50ad7d82b0f0e59f7c21d9524452/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6c9d3a1dee5f50ad7d82b0f0e59f7c21d9524452/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6c9d3a1dee5f50ad7d82b0f0e59f7c21d9524452/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6c9d3a1dee5f50ad7d82b0f0e59f7c21d9524452/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n|----  | -----------\n| `--mdc-typography-body2-<PROPERTY>` | Styles the typography of the formfield.\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.20.0-canary.b04d71d4.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-B/J/KVttaHmvHbCmMSWDd8R4JQGLroX7aMkrgyl5okjnJB6pi2I8okxGdiFi4KKqSfMMAf09e/JRdPLrXp/Kdw==","shasum":"1118cf35855a9d172220ec90efb35bc6b302c92c","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.20.0-canary.b04d71d4.0.tgz","fileCount":13,"unpackedSize":40613,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfrRFkCRA9TVsSAnZWagAALxUP/0Ua7uFbq7kyQoN4I4RO\nU2pJUR23WLjAjjbvKMwnfsfgBOKdLGfQ8rXdqkJJziFpSNBMA4dqqJHqyj6C\n0pgyygInxBiep7d9Mn++IQQLS3P/xW7yv93WLQNdj2mKrqYvmdbQIkdndqLf\n01biJ+ZmmRE7LJvWi5cY5E/WjSFDeJA5iuLZPxfPUejiL/p0GXFejhUNNaG6\nSXmnlvI7GPz7lS4wlNtk3BlKFwNOcNjFwXXffo1ZqxxNuMlfEe5EXBOtJHo1\nJHpMf1dDq6Rk6+WWj+8Yfg0omQsUsAksDkQNkhsJVifFSbOaYOeTezcrgPQZ\nUcJXsBWxUp0meK9zQeV6Y19gXtc973BSLmNCwCWU4O7kfrEkNQS2PyaiNxCS\n4R0qiy07LktP1cLa3qok7MTPL4qbHnWKfg7otLzGmeLMTgCC1dw0NUJy8hwp\nhcMoU9rsTQ2Dl8j7YgldKTfpdWsu0V6cz9g1ANkiNtVZQZ5Dt3/Wj+Rw3T/v\n9V1lZoUSvipFw73GpOmEqzetVTmClE3i8YcMO2ngLur8toWkNGLDKQBOya0j\nzWFBBo/F0Veg9vQ5PPT5Y1KOq/gihj83uqcA4SkYjJ5GUhMmRcXVKDMyBXFZ\noZyXIcA7CvC7uBv0pLwnHvFv3ZDJHpkKUtSsWrWmfMLtFk9gHGStYePpuitc\najyg\r\n=K5/7\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDdaRFR2y1BXEv1Sa3nhD14JSrkoVqFg9LHT9WW7hOk6AIhAOJICEznjQeBX/TSPbI4fxnSEhnM1+pujXuGqO1VUHUi"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.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"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-formfield_0.20.0-canary.b04d71d4.0_1605177699547_0.7672663571918334"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.2c553352.0":{"name":"@material/mwc-formfield","version":"0.20.0-canary.2c553352.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=9.0.0-canary.b39094d14.0","@material/mwc-base":"0.20.0-canary.2c553352.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-checkbox":"0.20.0-canary.2c553352.0","@material/mwc-radio":"0.20.0-canary.2c553352.0","@material/mwc-switch":"0.20.0-canary.2c553352.0","@material/rtl":"=9.0.0-canary.b39094d14.0","@material/theme":"=9.0.0-canary.b39094d14.0","@material/typography":"=9.0.0-canary.b39094d14.0"},"publishConfig":{"access":"public"},"gitHead":"7a02baa2ba85467edeb67014cb8c6e5bba77edec","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7a02baa2ba85467edeb67014cb8c6e5bba77edec/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7a02baa2ba85467edeb67014cb8c6e5bba77edec/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7a02baa2ba85467edeb67014cb8c6e5bba77edec/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7a02baa2ba85467edeb67014cb8c6e5bba77edec/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n|----  | -----------\n| `--mdc-typography-body2-<PROPERTY>` | Styles the typography of the formfield.\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.20.0-canary.2c553352.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-bX5k23LPvZThKj09o99YKxE/Q4FAxsIjs/qyQ2k/+wHfLLLBb1TOhviUXCF9+iSaaJHPO16qV4LIzImFa1TCPQ==","shasum":"e465dce4678618de64edd7ea8655a1b9177a7a8d","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.20.0-canary.2c553352.0.tgz","fileCount":13,"unpackedSize":40612,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfrbpMCRA9TVsSAnZWagAAB2EQAJnYWUdqDSrBZfpqulOW\nySBAG48/E7bcaekHWo0eRXgpGjNsx8MSNO5zCYtq1j4WI0B2H1tNDwV7D51w\nHirxlI20vW0DxibSZyLnBh9OLB24khi2b3uVd+BOowcxqqXkfz+LVm/n2cp1\nkuUQA17kNNBGUh20OXACkW+opzfk96vBiMFv7ZqAr5Ye3ZsxFZnyzSYYQAr3\nPVIOdJWnu0N+/qdETbmvQyU0xZPRIG3ALnSnBCvVAhUBvWwKcTm81LAmUBfH\nd0faohT1/AqNZVcy1t6fuV9SGNAXwYtW6JWGWAFRUwL1xznKUA1bf50ZROo/\nhl6Vod/aPvz5nCra2cmxo2YwD/ojLIOt37HZgHvmHd2+0+/kpGukQLacPGlA\n5ni06dwdaXjdLUZADazp2OpAU0cJyZtiXUwPXqoxP1KDIdEb1qgTJGWrDmjj\n+vUZHa9rPK71eRd8Xett3v06NNrySI0rVHcQzxr3c3ljpU/bemaH37o3yz5Y\n1Rl77rHcPiD7MpqGra20uEXXIRIG6S7NU1xqDrH+3S0j01fYgNnZiNLiTTjT\nvavoQ1vX9Mec09wg/CaE3KvdnF8g1Rh+MMNY68DSp7JdAmqUai7ykxCohxft\nSkDYGmxEEE9G5yAjmqBuzCHu52pmgPj4dzIonf7Wl+0iBUTvftqk3u85BcWt\nD44K\r\n=PrzG\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHU4KPfOCTkyd9k1grpo/lZ/WF3q+4o54dffPQYRn0j5AiBF82o9b97n5xeEZh4vv6y2T8leW0k/0NjcnUUo0AVRoQ=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.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"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-formfield_0.20.0-canary.2c553352.0_1605220939864_0.9298510594589364"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.6560d19a.0":{"name":"@material/mwc-formfield","version":"0.20.0-canary.6560d19a.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=9.0.0-canary.240c5f74f.0","@material/mwc-base":"0.20.0-canary.6560d19a.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-checkbox":"0.20.0-canary.6560d19a.0","@material/mwc-radio":"0.20.0-canary.6560d19a.0","@material/mwc-switch":"0.20.0-canary.6560d19a.0","@material/rtl":"=9.0.0-canary.240c5f74f.0","@material/theme":"=9.0.0-canary.240c5f74f.0","@material/typography":"=9.0.0-canary.240c5f74f.0"},"publishConfig":{"access":"public"},"gitHead":"2b2093b7a8ece484614a94718cdac5a72d7e9cfa","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2b2093b7a8ece484614a94718cdac5a72d7e9cfa/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2b2093b7a8ece484614a94718cdac5a72d7e9cfa/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2b2093b7a8ece484614a94718cdac5a72d7e9cfa/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2b2093b7a8ece484614a94718cdac5a72d7e9cfa/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n|----  | -----------\n| `--mdc-typography-body2-<PROPERTY>` | Styles the typography of the formfield.\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.20.0-canary.6560d19a.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-XuyaE6IYysUtuW5/GeAajwAIWxk7jYT90yxPJnv1yzj5R5gf0MrXy6ddRvLESMjLNPks8qLSXaC7a6XmsVxU9g==","shasum":"83b34be84c96499a67f62ee0625df6f6b35b0ba4","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.20.0-canary.6560d19a.0.tgz","fileCount":13,"unpackedSize":40612,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfrvEDCRA9TVsSAnZWagAAmCMP/RWAekBV1s9MPzxF0CNp\nhRfm0k2cG4x62IEk4HMd+nD7Y5BUGtZh7Lg7sMNMd87e0TjhDekWWIi5UEYs\nU7g73Q1fmRzn8ngHE1kfbVpRFHzd1K8Y/E8BekwUwtakNlSOo2KmwjhUBmam\nA5waKKw5mp2biRPWS0cRv/3eArbTZrUgJG0uDXS3RUB4mrZLocoLxat0UDsw\nn28EP6vIXkYQhBNCSZrVyI5KPQIm59LKvi39DSswluw8OImRHS/kUVyyAyem\nIVncTxGgtx2dGiUbDUMLz8X+ihYCNEiRcudKA7h1PZhmtV33QTPIXM2xZ11x\n1RUrZWheKw2VMkYtKrvBHXoZAQJwV8NPZdCE8uCNaDfeBNhR7MTy+U5xQARD\nWr3jTOu3qHUG5hCGm0Z0y5cjWHEzghznC6/AJAFhNTZTIP4ib4Q2sJSsszWM\nfMUJ0SQgwUBOubN1OIEugwdFhlV1IdRNc68zcQ11q83JvR+zyN81xTMYO4tx\n32+6JjtHdzSEcf6Np7mQvW48YtM/S1WdTBesX9YRSUOlo+ZsAlmjnGjQ9iNC\nqdtZVCi5D11lrH+Lbf55nyclHxGs7Jwr7qLTdfHqUly57WTMMFNq+0QGAm5+\nOZ/sL82Ie3yp7RgoB03d3bZ1RV6rnZq0K7XCEIsGSQVXHKGJ/87V4r4rBH7L\nn01u\r\n=cCRd\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCID1RVnI7DaA5CUVWhC5pVxfDXy3BpzCxgD0ZxHbaU64BAiAyINc5bgLR8uMoEwBp9bgBYF/XN3EcqIYvbNSJqnzFiQ=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.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"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-formfield_0.20.0-canary.6560d19a.0_1605300482828_0.08559544068955471"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.a28d5ec3.0":{"name":"@material/mwc-formfield","version":"0.20.0-canary.a28d5ec3.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=9.0.0-canary.240c5f74f.0","@material/mwc-base":"0.20.0-canary.a28d5ec3.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-checkbox":"0.20.0-canary.a28d5ec3.0","@material/mwc-radio":"0.20.0-canary.a28d5ec3.0","@material/mwc-switch":"0.20.0-canary.a28d5ec3.0","@material/rtl":"=9.0.0-canary.240c5f74f.0","@material/theme":"=9.0.0-canary.240c5f74f.0","@material/typography":"=9.0.0-canary.240c5f74f.0"},"publishConfig":{"access":"public"},"gitHead":"f24283a75330ef6de8cd16f8373ab1bba0eabec6","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f24283a75330ef6de8cd16f8373ab1bba0eabec6/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f24283a75330ef6de8cd16f8373ab1bba0eabec6/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f24283a75330ef6de8cd16f8373ab1bba0eabec6/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f24283a75330ef6de8cd16f8373ab1bba0eabec6/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n|----  | -----------\n| `--mdc-typography-body2-<PROPERTY>` | Styles the typography of the formfield.\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.20.0-canary.a28d5ec3.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-fkWkStx48xRwABdqrmT7tiWZTf5V7NnITVCcm3l3i4gYYW6Eel2wGl9cRES/bvzdYnK1sAiGFwlCDCv5mlmU3g==","shasum":"e932354786457a0bd66d5e6aaeef9b6f13a8c726","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.20.0-canary.a28d5ec3.0.tgz","fileCount":13,"unpackedSize":40612,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfs+r0CRA9TVsSAnZWagAAvA8P/2GTf+cU+lwJota1f4vx\nBcL0bc+8k1LfvdmdH/SEcOECTP9+0hvM8xhqy2GWzPhFf2arztVGoB2A+P6W\nYKADNIBsxW14naqq9wGOjfAeBIShmy2/XzfaxP/jCW3MvaxQKHlSZ5URiQS3\nv+AyOEbmi2qXPIzvQ+NtETvvAdvzwYd3Vw6xdRoSNmWjUryM3ecTvPVpIfMT\na5ncIWpb9OdGGHGwGmuNTYj8t2i1/Lj3ETm138RWrbkYt4U2Qyfw4CvLucR/\n+BbYt4LhFW7XvgX7+hwGB1kJkb4HGaqZlT9a0gvPdAbgAspryJhoTYEbhPV8\nDnSGqAGFRf0lXlpIwIWC4aQjYPsPMxH18S8ehL546c905sOKRc/qrKMllKxE\nqyRTlCs0lzc2YtSj+uds5ovRxe5ok6NSbwadKHSdnlgd9P6nnN+z7B02ERJB\nlkWbLLlM+3suTonCspzmzT6A7SI3xAaYAoL/tjiUGxg8XPQLI/WdMOsczgIG\n5TBiLdRFvqJv0dICDIinIntktHSXRTCzgmoECxWTLTpCJp38KpKBzFhfp3Vp\ngZjDMWgY7rl3wH2wdH+lQPMKpxjLzGjOW3lEcI9xXD6ycCMoaGp1mqdfFrZ1\nMlWAP5HOem1KT4I7w9pxFBLzKvC38sc/eflND3NNKhP3CxBFMd6OMVHVZ4g6\niz7J\r\n=IGzZ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDP7oZdufc8wmUr+UeMpiH1YAIIpGlGpX/LSxpdo2mIXgIhAOEqRr04AighYuGmQXAZC5yX3fA67QHDbqkqL/jTp9jZ"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.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"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-formfield_0.20.0-canary.a28d5ec3.0_1605626611424_0.5419014893283558"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.03e7e778.0":{"name":"@material/mwc-formfield","version":"0.20.0-canary.03e7e778.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=9.0.0-canary.240c5f74f.0","@material/mwc-base":"0.20.0-canary.03e7e778.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-checkbox":"0.20.0-canary.03e7e778.0","@material/mwc-radio":"0.20.0-canary.03e7e778.0","@material/mwc-switch":"0.20.0-canary.03e7e778.0","@material/rtl":"=9.0.0-canary.240c5f74f.0","@material/theme":"=9.0.0-canary.240c5f74f.0","@material/typography":"=9.0.0-canary.240c5f74f.0"},"publishConfig":{"access":"public"},"gitHead":"b828c4befe76e485a57dc3be64c348c56f37f89a","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b828c4befe76e485a57dc3be64c348c56f37f89a/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b828c4befe76e485a57dc3be64c348c56f37f89a/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b828c4befe76e485a57dc3be64c348c56f37f89a/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b828c4befe76e485a57dc3be64c348c56f37f89a/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n|----  | -----------\n| `--mdc-typography-body2-<PROPERTY>` | Styles the typography of the formfield.\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.20.0-canary.03e7e778.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-T4JoFXxTFvxYDj0YpMf7SSlBXgSDZRNe2vy5AjGNd0XsewxIjd3cvHECLmEPe8lkHKnjIMMIPgf/SFf6x+p0yw==","shasum":"3a8fd24bab05a6fea76a005377535138897250f8","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.20.0-canary.03e7e778.0.tgz","fileCount":13,"unpackedSize":40612,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJftCOTCRA9TVsSAnZWagAAyDEP+wZ5a4i6k/tOasL/QziM\nabbi37PouAIWIbiYK26UWMpTkbf1D71JvFeH8NIiT2oL/+NHUAlVnxu1Blwv\n7fdCtk58CkoHn+aLb+s2AXuZ3tUFW4FvWT7MDZnepEWOlGDSG8/1K3QFnJC7\nCgL/L5QPlWuvDGfaDedwckDdBgJ0NOkgb0f+/B8FLCS0M5y0MlVtJCnIMLuH\nnjIzx5nRYoT/ZbZJxONQs325BRF/tB4AxvOCUa/rBTRW24RhDJBMpJ3L6MKQ\nmbOSfqF8mlbEoNi0V2RWo+wAvPWYuvWSEMqrI5X4LFCwLXogQ+XPK9iowHWf\nWvNH4RUWl7+XSibcF+pq60dJ3ZC+DGHgSBeAw3RhOjTGUoSyR665b8WgMgJr\n2qBRy2Ouw1Kg8apvFiMfYOzxRYIn+feNw3JY8lhjZHTlYT10fgwQWPwYmXWP\nGZG0MDQJVLV4iY7b9VJLWFLxcHmkvXWWrxtjIJ2sWJPjLvhrtv8mYyN6Df9z\nXZ8o1QzPrrdpUo5UDZk52x4EXNRhA2pXTzq2RWRgu0BqpIDd1msYdInIF61D\neGKh2pRjmsQDxpw28wCG2ZFeK5AOvwnrMcZtOalRvuhjKH60urABJHF7Qw1I\nXacgYeMAVs5uJ1KAksAmy6DXeJS6rdJw13CuRct2n12VS0RQ5QV/DPkdsqw4\nLBwE\r\n=H/cX\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIE0MshoujedZj6dsD/HeatmUYiV/R3WzuEQCUKUeGwT3AiBDuDStpf+VB7OturR0Ld7oYasNE0Ht360RiTEl7/+hAQ=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.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"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-formfield_0.20.0-canary.03e7e778.0_1605641106715_0.07589029925354551"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.ac8ed597.0":{"name":"@material/mwc-formfield","version":"0.20.0-canary.ac8ed597.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=9.0.0-canary.482ff9091.0","@material/mwc-base":"0.20.0-canary.ac8ed597.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-checkbox":"0.20.0-canary.ac8ed597.0","@material/mwc-radio":"0.20.0-canary.ac8ed597.0","@material/mwc-switch":"0.20.0-canary.ac8ed597.0","@material/rtl":"=9.0.0-canary.482ff9091.0","@material/theme":"=9.0.0-canary.482ff9091.0","@material/typography":"=9.0.0-canary.482ff9091.0"},"publishConfig":{"access":"public"},"gitHead":"324571445f4ed0575cda7f727c54e156bce8d624","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/324571445f4ed0575cda7f727c54e156bce8d624/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/324571445f4ed0575cda7f727c54e156bce8d624/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/324571445f4ed0575cda7f727c54e156bce8d624/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/324571445f4ed0575cda7f727c54e156bce8d624/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n|----  | -----------\n| `--mdc-typography-body2-<PROPERTY>` | Styles the typography of the formfield.\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.20.0-canary.ac8ed597.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-QYadko0TVKdIJhW0yavFVKTPl8HpXBg0S/DMa45s+CsPum/7mkEvOKVvCuMR1qAtLvPlYS1cR2RN2+9Fd88drw==","shasum":"cf5996ec5d42f4a1658ae5bd44e279e6330f7de9","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.20.0-canary.ac8ed597.0.tgz","fileCount":13,"unpackedSize":40612,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJftEqJCRA9TVsSAnZWagAAYm0QAIOg6rrNmjdg11rivm7S\n42bBWVEwp2GNEdTvl+H5YbFeLuzcfli/auYd/a0eHK/7W7rEo2TYtjtstti+\n6wDf0km2ChivsCnBOUB5l1t/muqiiUmY4oM5+7dvS48Hovab0FrUTVh/UUWF\nluDG9iSJtHlBjyp7pCSP9mfkt+dT0lKlODcFk6I766duj36ew8Z1vNNgeuXr\nfxsLYN4LwzBIttlkq0z4zAo9sn/PNS5Te7dmn/aOCJJZnJRR7O4G6F0UaAyE\nTkprkoABZvDzNc2T71G6eWD4TBfqocuuhouJ93sA9Mm7Uf1d07MKWuG2ZC07\netJCMVjpnRYZbw1O9wLWzR1T8t+Cx+vTaRgBRyjw7ULwnKie/tzPt3vHqPiX\nB+b61wIUMjNa/AKLOUDp7g47GprWFY8kWzI4SkvfceLAfzpj1vMu8zXMeeeq\ny+MFAe2DURpge9+fHEu/7XgWJF0GscUcZtA+kombczqe2uFP14a0xjz2H/N7\n1uzvYszuyYw6RlB17uRM+QHykkYUzOMrytGfA07ixwrI+wvafPx9QL55wPzL\n/tZQfLJJSI9LQchw0nK2/d5pMNyU5mVTcOtS64VQXeW5mfFovbpDPQSwFnsh\nU/k0oqglPRJ739AI/HTEeYBsSgvbiD4nTYMv6om0XYmELFctfUEjd+AYW0vu\nay5I\r\n=Y1G2\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD9Y5JBohaKZam2/g4/ijdXdug+IbQ24wgLmotazMohdgIgXftv/h//ddD9Bo/hx9yuulu5sGnm0rEn9vvjQOgCMkQ="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.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"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-formfield_0.20.0-canary.ac8ed597.0_1605651081249_0.20179518633709592"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.b6a60f60.0":{"name":"@material/mwc-formfield","version":"0.20.0-canary.b6a60f60.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=9.0.0-canary.482ff9091.0","@material/mwc-base":"0.20.0-canary.b6a60f60.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-checkbox":"0.20.0-canary.b6a60f60.0","@material/mwc-radio":"0.20.0-canary.b6a60f60.0","@material/mwc-switch":"0.20.0-canary.b6a60f60.0","@material/rtl":"=9.0.0-canary.482ff9091.0","@material/theme":"=9.0.0-canary.482ff9091.0","@material/typography":"=9.0.0-canary.482ff9091.0"},"publishConfig":{"access":"public"},"gitHead":"423d1aee62c72c8c88e9e5e792712bc5d4d10b13","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/423d1aee62c72c8c88e9e5e792712bc5d4d10b13/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/423d1aee62c72c8c88e9e5e792712bc5d4d10b13/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/423d1aee62c72c8c88e9e5e792712bc5d4d10b13/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/423d1aee62c72c8c88e9e5e792712bc5d4d10b13/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n|----  | -----------\n| `--mdc-typography-body2-<PROPERTY>` | Styles the typography of the formfield.\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.20.0-canary.b6a60f60.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-uosZDrG67Q8fXMErUHElfHjznt23NqqVBFh8atfD9FthbvaEKYaoX+RmhgMn69nIu0RV17Ie7+R4/4Blg8IWLw==","shasum":"6df46564e48f4c751727ec9d899039961b0381ca","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.20.0-canary.b6a60f60.0.tgz","fileCount":13,"unpackedSize":40612,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJftFP/CRA9TVsSAnZWagAAQr4P/jsCRjHpj3sqiPe8xoxL\n6aI6lWAB+DtIEb+7IMg2hO1eLltixoq7U7ugsNrBl8z89a9NgeRKiLiWDP+P\nCktxId8jx+zfjQnCuXIJQ5iBLDWSG/c/I6pr601l5pGnwmsedt3b4jRgZ1bC\nCc1Bn/+0nypqsZqcbWUglMpiw+pOIqAsZXJICL7ge5KOmM1QyTYDBXLSU4Bc\n+nEzL1COdGuDdA1PZ9vUyq+nDmsmnSjDc1rI4eVsG37wTvxaa9HGgAVfpMTm\nBcymyu/qEfIRx852DDbF57rLhmyR5F2yxcyU4UfoPcSE7t3834BuEBb+qnlL\nLihDn/PwB86ZEY6xWn/oegWTKPQs9Rm27JfkJ1QjLk6DrabytMlmR24q2deo\nTX9hyXtuD443nN2/qU5+oWn6vptI6dyR+aC2I7pjSabhTXHUBDnLUWZRjJNT\nzy+nWGYfMIA/FaA8t9C2BNCQ4cL527a1GDSu7+bTd7UvHOyVNVpC7SiYIpgb\nAKbvCQkO8dReOlS9O8oQt/Q3YnFKNSgolPfIl+Lv7tQx4PghdI70NdMk0xLB\nXWqQqVe65kDjWeaDCgbWAOc4btt2lwjNHhr3lP/sFfElKZPoEdaN86XemwVY\nt42coBOQXwstpfWEjfLuRs0yCkSb7vUCcRh3r61Mc2eEDhsADrxaAFMxrTFM\nZBO4\r\n=GVFO\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDDxwxs1y5r5Evf7VRsZGwCJrL6O5etlPmHH/8GYR8nmQIhAPqvdWAyVFLY9EDDQx2QojdBkE9vrSkton36u0cdO1lQ"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.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"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-formfield_0.20.0-canary.b6a60f60.0_1605653503177_0.35675273146746833"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.71cc24fb.0":{"name":"@material/mwc-formfield","version":"0.20.0-canary.71cc24fb.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=9.0.0-canary.482ff9091.0","@material/mwc-base":"0.20.0-canary.71cc24fb.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-checkbox":"0.20.0-canary.71cc24fb.0","@material/mwc-radio":"0.20.0-canary.71cc24fb.0","@material/mwc-switch":"0.20.0-canary.71cc24fb.0","@material/rtl":"=9.0.0-canary.482ff9091.0","@material/theme":"=9.0.0-canary.482ff9091.0","@material/typography":"=9.0.0-canary.482ff9091.0"},"publishConfig":{"access":"public"},"gitHead":"04fde8dbd7934f14927b0407ac285d7396fe68e7","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/04fde8dbd7934f14927b0407ac285d7396fe68e7/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/04fde8dbd7934f14927b0407ac285d7396fe68e7/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/04fde8dbd7934f14927b0407ac285d7396fe68e7/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/04fde8dbd7934f14927b0407ac285d7396fe68e7/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n|----  | -----------\n| `--mdc-typography-body2-<PROPERTY>` | Styles the typography of the formfield.\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.20.0-canary.71cc24fb.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-L7VBGTiLR3fR8ZxxGqLvP6JBdbRpcScg5YFmbL4bT932NR1cG5pXurfJuI0FOPr/PGlK9jKH8vETaBOjkYv/Fw==","shasum":"46fb5c363805f942baa66dde8128cbdb0ec28868","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.20.0-canary.71cc24fb.0.tgz","fileCount":13,"unpackedSize":40612,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJftFnBCRA9TVsSAnZWagAA8tQP/Ak9ezFvM9XCae1Je7QR\nqGm1ghgEjAh0m3yoz3+OGEsXbX2fqQEWS1UzIQi+HArJ+anqibOGEotocDIT\ntLIZr0wMuievnkoUgdPNtQJT0LBtxAxMZXuk1XNQwGXAlV1CC/+OGObuoubI\nH0YvrPvYIKitvJy8kpLeG9RLmeMWw1cEvOqmLRnErDk+3U5toUcjztZ3mOXC\nz2ZOCj5WHqeVxGc8hCkJ7ZYJaTUi3em7AVZGCgC1so7EW2hmterrCJYCCyM+\noG25JfoJPJ9TcrGRJ18/mNfQSpyEKVCRc3eQll4zAnOA/tCIIdeStxh3tLMO\n8y/2vRU0oD5SphSR1ZOdo5OMHKhhqkr24dT9dk0rki+eb89EjIfmzD0UXabl\nSn0P22hhJvOVAMNQ4W7vSbdKZ+Xy9HD1P3HEm0B/40k3oCiA1r3xu4swxReE\n3gDuuaSyvezyiA4+1ddv7zJLlydsniWT+Ofz0XQLsxoybvr4DXyfiqx1YuO7\ncjuUqcUGXs3E+Lu+Gm2biI8XHhwYmYhp1m+m3tsxkPi7wAu8WIKfiEF1RppP\nli5M9mXHM1I/w7Y2IZRW/3COmP6WJYrd8LNgrXk82y6LS4tC1RLDt4leUJQd\nSeWRYXfhIkoCmbHESBFmVCzMh7+5OokTbVFE+kFIbnjc1P5yS70wcNM7irEg\nG5jW\r\n=Z58c\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAMW8ksGtd/7TYFzeSA21xqasHPK9LBb8qBfygyZngz/AiEA4+A5wcbKtt7+G6ZIyXuRYv4SXi/JuD98vTCazgUOHkQ="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.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"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-formfield_0.20.0-canary.71cc24fb.0_1605654977182_0.9880642894976739"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.761027ff.0":{"name":"@material/mwc-formfield","version":"0.20.0-canary.761027ff.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=9.0.0-canary.482ff9091.0","@material/mwc-base":"0.20.0-canary.761027ff.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-checkbox":"0.20.0-canary.761027ff.0","@material/mwc-radio":"0.20.0-canary.761027ff.0","@material/mwc-switch":"0.20.0-canary.761027ff.0","@material/rtl":"=9.0.0-canary.482ff9091.0","@material/theme":"=9.0.0-canary.482ff9091.0","@material/typography":"=9.0.0-canary.482ff9091.0"},"publishConfig":{"access":"public"},"gitHead":"eef81b2f51aebd88194386f191f7a40e504b6a70","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/eef81b2f51aebd88194386f191f7a40e504b6a70/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/eef81b2f51aebd88194386f191f7a40e504b6a70/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/eef81b2f51aebd88194386f191f7a40e504b6a70/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/eef81b2f51aebd88194386f191f7a40e504b6a70/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n|----  | -----------\n| `--mdc-typography-body2-<PROPERTY>` | Styles the typography of the formfield.\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.20.0-canary.761027ff.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-lbbq8Y1yB2t/TqvWg8IwyMRHQDoF1TcHGQc/Wm6I0ZSQ2qnpnV3gfTxO2DUfe9nM4Kv7QYVrPnKtvi3wP8nPkg==","shasum":"a05f497b9b396384e34d1e811cc35be50a806bc5","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.20.0-canary.761027ff.0.tgz","fileCount":13,"unpackedSize":40612,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJftZyKCRA9TVsSAnZWagAA2IUP/2hgi2G56829jZ8Rn1T4\nZQMv2fDjW9ZEVLQdK1+PLC2TWyR6Sc1vWR/i4YwK7hsP45bfM/RgIiHRzvyU\nXIElWZABs2mXQeIvI1eQkI7Xvg4IgXeDQpTicc6GoH5aRYuCJ6R8JUnecWXm\nEgnWsWErozlUIZmJFgXvfs+uMLvlbJNTzVD/DDPI0F12wunomOLD6eq0RZ6s\nMssuWg20KK8ctayTcejQ/WTk1nUWrE+/FlNcjNZhZJtt9G3++AIp+80daNXw\nb/Y0AfogYKa2A6wBT9ER0iG4/x9plLpp6akfZFUKt6NdDuTMlnIQIGvQOuB3\nVvDoOVNLP5YQLinrUyasXCPUSDmBkrStSDnVWKlMRVAgpYLf2Evor7ENHgkB\n4ilhKTOfBZ97JX0OMbvMwqhbxRf2Dr5KcNS8CTn7aXyfNOVSo8vA6b67CNop\njI1pD94FC+ntOJXX5M5H3VDX62PaOpspGP3uPLUjtI1g36jAnIEK0xusXCGp\npbAMS14BiGqysj2Wd3fh6lK2u6W81IZdH1CyFlVMxK6TuuOl5a+xghQgo6Rx\nuoTASgM01VxjMJu8Wtq6kwpLaJH3BfiUfg41BcqWmjtMNQvpukr0MAMblI2b\nGTuiJ+MCBqIt85REniApeOIdlcSQnceO9N6Jsqy77uozlHE32TZYQ8GZHxhV\nd3Ew\r\n=Mzml\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDA5R+XFY43ZGc5l8482m0k3URwaLUaWWpSLo+0LDlwpAIgYeFGFdyfVJTvywexNlRRCyVQAb0modYSdmMg1ERMHyY="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.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"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-formfield_0.20.0-canary.761027ff.0_1605737610079_0.905696220306383"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.dc93d04c.0":{"name":"@material/mwc-formfield","version":"0.20.0-canary.dc93d04c.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=9.0.0-canary.99cfb6bd5.0","@material/mwc-base":"0.20.0-canary.dc93d04c.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-checkbox":"0.20.0-canary.dc93d04c.0","@material/mwc-radio":"0.20.0-canary.dc93d04c.0","@material/mwc-switch":"0.20.0-canary.dc93d04c.0","@material/rtl":"=9.0.0-canary.99cfb6bd5.0","@material/theme":"=9.0.0-canary.99cfb6bd5.0","@material/typography":"=9.0.0-canary.99cfb6bd5.0"},"publishConfig":{"access":"public"},"gitHead":"c3e20c69c9dd47eb0b31f0ff51e8150d8d27ee3e","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c3e20c69c9dd47eb0b31f0ff51e8150d8d27ee3e/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c3e20c69c9dd47eb0b31f0ff51e8150d8d27ee3e/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c3e20c69c9dd47eb0b31f0ff51e8150d8d27ee3e/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c3e20c69c9dd47eb0b31f0ff51e8150d8d27ee3e/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n|----  | -----------\n| `--mdc-typography-body2-<PROPERTY>` | Styles the typography of the formfield.\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.20.0-canary.dc93d04c.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-/UUlhAQp3qI+hkX7HLI4Hhev4QG7zCWRTJAUcLp2Ppz27HneQMEdq60q89/M7IXF+UPQqb+iVbxZivR87DvdPQ==","shasum":"43da3f2645467247caaca929d49a0c5328611c6f","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.20.0-canary.dc93d04c.0.tgz","fileCount":13,"unpackedSize":40612,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJftZ3uCRA9TVsSAnZWagAAXM4P/3k5RKQlbgfc5g/LGh6C\n6s3GXREkqlJln48WOgJLsv7n6ftIJ8u/Z8DwQ19pUJ/4ip0Ld1r4ueR2nzh8\nyl1WBsGK0sbcAiz0UO6bsd1b1CwLwwkc2fONNagn/CpnpCTsYjCU1Cd7LW7y\nGYygN90wDBrpSzK6+PMlYLCpNk6kupjIdkvK2DeI5dqfTzDx6B1il/egnciq\nnYd4IESrsvKlPvmCangloj5lnq+qb+BLjuTHL2bHDFvayvXNWPnAgl4rEIRc\nihOCG9E5LwyRI7JTtWD04U/67Bw2sv4Ryitjuej5JoLfDClWa8ihHKCnHNrp\nCp0R1GdnGiCv/5AO+AoPI/Dr5ED3I7VHCLVcCpi7U1VyJ09S5MalxlP5plij\n4AE6tgHOaoaHPJJ+Wt2R6dujq3e3BBj6FwvbEvCyLB6y7uXwWqszt65Qn3vQ\nrUMfDQsxdqtEu1ud5wJLLRRP5CEGesl7I/z1U8v3RsnmAvrX6PEXw6PiuWza\nya+pHxfKLY3Iv4u+xJEO6Yq1vWJYtQfSbD9l6/tVcstUgbcwmIW0VeMoEPsh\nRdpUmMlEXNrnnPjPXvNEo3ZXKqGBOioLOrB2zGUf7Lo3CT8tYGyFy7O8BcfN\nLmKVKxe7m8oP35ZGSmCSgI7EKksCGjqps97rXBYs+QjYkhGhvzoIVT1FekbD\nB4c/\r\n=FgjA\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBnLXH0/4YV1+eiXpZ52ngJZW0L8YPmj6lA7F+3c9iGoAiAQInyeLYz9VMmYTYigK6QteDrtST9H5tLSuG616llVoA=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.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"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-formfield_0.20.0-canary.dc93d04c.0_1605737965562_0.8440873499033488"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.4a5d4eeb.0":{"name":"@material/mwc-formfield","version":"0.20.0-canary.4a5d4eeb.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=9.0.0-canary.99cfb6bd5.0","@material/mwc-base":"0.20.0-canary.4a5d4eeb.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-checkbox":"0.20.0-canary.4a5d4eeb.0","@material/mwc-radio":"0.20.0-canary.4a5d4eeb.0","@material/mwc-switch":"0.20.0-canary.4a5d4eeb.0","@material/rtl":"=9.0.0-canary.99cfb6bd5.0","@material/theme":"=9.0.0-canary.99cfb6bd5.0","@material/typography":"=9.0.0-canary.99cfb6bd5.0"},"publishConfig":{"access":"public"},"gitHead":"6b9b0de3adf5b550661d63baa970642b71da5fa5","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6b9b0de3adf5b550661d63baa970642b71da5fa5/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6b9b0de3adf5b550661d63baa970642b71da5fa5/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6b9b0de3adf5b550661d63baa970642b71da5fa5/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6b9b0de3adf5b550661d63baa970642b71da5fa5/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n|----  | -----------\n| `--mdc-typography-body2-<PROPERTY>` | Styles the typography of the formfield.\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.20.0-canary.4a5d4eeb.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-n6aTz0Gw8Up+AvNR6xGq0AhuakxUNoGsW6/8GW/mPemNK9NkkV5I53B4WbKFcSWB2Qw/EbfJRiZXeWTacaI3jg==","shasum":"fc4d200ec44f65cea30a7bb98d063a2bd3785d8a","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.20.0-canary.4a5d4eeb.0.tgz","fileCount":13,"unpackedSize":40612,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJftldDCRA9TVsSAnZWagAAhpAQAJZIi1Uhh/wf0amXFLcK\nBhxwP0ygGi2UyRmLZjl5GBEOF82qrcxZVUKH/IP7YY75mISVZ9svhIAK8JZF\nXkyImpF/9up/H9hXBBCFYicoqO0AvPS0JvWyrogWUbM3oDUlNO50X2oWPLyp\nS0FTyhT0grG+ZsPf9kVknLEUazreFqhAwYUVLfL9/iuy3mubopXSb+z8DYxp\nRamJXcXfAAk4nsZ/o6DiqbBy2qD46dKgZPqtgShTQciCx7iHroC+FZodCDxs\n9lRTbtIV+Zf62SLEb6WA8RkFXvM15F+XUprJSLiCFSjmS0HXPkuz5cg/eLOs\nCIUS/XzJh5DnZzCmrhRmfRUTeZh6w6GGUuORG3xwM9Cif0opB/wkcezQ1gtt\nO9fCZEmHYSov+jF0j6EPeIprz+H6kGJbx2e9p759IyCuiuJeTB/LKmFlixUH\nwze5+bdeMjAC707cxs6P0ExUffwen+IYiKPjWVY3abbpXLESxKzi9P9abpqY\nVVwGc5yKvkamWKHPSYhLqu/05VdODlu3Z8JIe4RHEPeKwdCx6LEbDFix1br5\nYrxZP8s/as9BEaP0OL7j/AQZvqBI2yRh4G0p03ZgHXyJQJrpYzKGywu6ENwB\n8ZMfGjEw6RjusCls8rBId/tjJ5Vui+BACLFTLvBbn4H5yB1mL/vFJlRYj7YE\n9+L5\r\n=kPvq\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFIcQPTTApvYbImY70+8Cda4JjR5Gvp1eD1oEdlLNAVwAiA5doMuc/doFFUEMm6p1eLRlRcR1YDjdIlkeueSc0g8vg=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.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"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-formfield_0.20.0-canary.4a5d4eeb.0_1605785411241_0.23757788612285657"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.bd176a15.0":{"name":"@material/mwc-formfield","version":"0.20.0-canary.bd176a15.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=9.0.0-canary.30c11bfc2.0","@material/mwc-base":"0.20.0-canary.bd176a15.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-checkbox":"0.20.0-canary.bd176a15.0","@material/mwc-radio":"0.20.0-canary.bd176a15.0","@material/mwc-switch":"0.20.0-canary.bd176a15.0","@material/rtl":"=9.0.0-canary.30c11bfc2.0","@material/theme":"=9.0.0-canary.30c11bfc2.0","@material/typography":"=9.0.0-canary.30c11bfc2.0"},"publishConfig":{"access":"public"},"gitHead":"8c9d27b834d60d0f197616dd1acd74cbf2cada07","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8c9d27b834d60d0f197616dd1acd74cbf2cada07/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8c9d27b834d60d0f197616dd1acd74cbf2cada07/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8c9d27b834d60d0f197616dd1acd74cbf2cada07/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8c9d27b834d60d0f197616dd1acd74cbf2cada07/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n|----  | -----------\n| `--mdc-typography-body2-<PROPERTY>` | Styles the typography of the formfield.\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.20.0-canary.bd176a15.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-ayMXKJEC3y1iP3VLyVAYMba+t3vKsGStCnThVSaoa2BjK5OP0RP3obqxGu+kEtuOWrsYdHFqT7jZ9wT8pYU8Iw==","shasum":"4196796e007520c0695964d7bfc4cf8bc2270339","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.20.0-canary.bd176a15.0.tgz","fileCount":13,"unpackedSize":40612,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJftsL5CRA9TVsSAnZWagAA3AMP/jc+s1hmPiS890Tjl/ni\nPm9hSMM+P6hyXKdxIcV+fxAua+PlAg2n6/18Mb63+F1QbzpODvdVfDvL6Mcw\nE0sXhd9UGNzSe2ArMbdiqDhxsjTlE2+/tv9hSWf1jcYGHyFzu8WoXmaXekqe\nSYqzpK9eT8Hro51bYG001gQL4JqufPK8Y+3LPvPVpeCaYeATi9Jg3uF0AP68\nWFpXMe6RN0B2gZtICarXhpNS78DtP1blHfYCDdsFT7igMLpJQn8b6/IvZgtV\nq7Loy4vbwI3+ARpRwwVYkKazHhBMgf7MV2sv6NYGaRKutJsuhXwcM69ZyCmA\ncoazxaIekU2aMzntlmnTIlenxmVPnUlDlHxv83g6ewrNQ/UL3dDnqBHVTerP\nMuA2u/eCoBtKp/b06WqaUMU20XTOiF4AW4ZKcdpZaOQVxSJlYDQB1u4o4Wc2\n2KtBuQC3s5YOI3vgcbPlDTgqes2X5v8i8w+KKoIDSebHBnt0oOdTYI9SCqnJ\nGzkuK0HiNe/DWF71wYXv1xsesCHcF9LHxzaTNLomYVi8J/N2ATJcneFHhaAT\n33lzg+HFBYwduHbclwO7/JDcN0JPHdjFHODs598nydcdOYZXJS5g8wFrkuXx\nhDKxcJUrCktNKbITfVdRm8lmfNBZCepn0oX8UMVSoGOyI8wZ9Ex4O6uVDpbz\nZ/8l\r\n=3NSL\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIALAXPw4cuCO/oAT1jO9v6840yRoYvM9k30gZ3SG1Gk0AiEAmuqQ/yqCsyas+egEULzSsZPeeX2rzKrTY4lWoP6ykFs="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.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"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-formfield_0.20.0-canary.bd176a15.0_1605812985113_0.3864310293928612"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.e85aa60d.0":{"name":"@material/mwc-formfield","version":"0.20.0-canary.e85aa60d.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=9.0.0-canary.c927a5d05.0","@material/mwc-base":"0.20.0-canary.e85aa60d.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-checkbox":"0.20.0-canary.e85aa60d.0","@material/mwc-radio":"0.20.0-canary.e85aa60d.0","@material/mwc-switch":"0.20.0-canary.e85aa60d.0","@material/rtl":"=9.0.0-canary.c927a5d05.0","@material/theme":"=9.0.0-canary.c927a5d05.0","@material/typography":"=9.0.0-canary.c927a5d05.0"},"publishConfig":{"access":"public"},"gitHead":"3a749ec8278eb0b5833500696f08308837328144","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3a749ec8278eb0b5833500696f08308837328144/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3a749ec8278eb0b5833500696f08308837328144/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3a749ec8278eb0b5833500696f08308837328144/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3a749ec8278eb0b5833500696f08308837328144/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n|----  | -----------\n| `--mdc-typography-body2-<PROPERTY>` | Styles the typography of the formfield.\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.20.0-canary.e85aa60d.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-x+KqtpVwoKWcfoU9+NZuyUb01Ypi6Eo5KGXMb201PoUze6+xQZQKCZKaqr9D3zaJ6aDk5TUHsMrGwXqBr1eBog==","shasum":"b378af813a89e252b37ffe9f063b957a965bc918","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.20.0-canary.e85aa60d.0.tgz","fileCount":13,"unpackedSize":40612,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfvDaKCRA9TVsSAnZWagAARAUP/RsZ0/yZbJtzj3muAhpn\nspufnm672GTQx4+/feYOeRlSJbL/4xIWyvkQAYLxKsnIIRooNuD+h8mnXPoi\nSdeu0n38l/yXA/aF0MimhnFJNZtol+bMeEKv8Cze6sV05GbaBxsTCaF3BxwN\n3HIYKSW/7k1XXpuOfpGaQyfR3Jmf9qG3+erAXLC14vrCCoJ62YX72lDgFkaf\n0SUuuU+7oBqWUD+mymxZk0LmeWqmE3n4YPDvXhTx3kIvDB70NGX23hw1Jawq\nG163mK6cSNa9fr4qTHnjYLCigs1qUugdlSOT9ycE4Ofm3SHD59cN5esdeXgv\nHbArT4XEjPPZnZcQm6Ekr2iewgnnPIXK81VpfIdXueb8kRcEJgQWKSuXmhAn\nLTsCQSEpuAjX3ZpbNuB2cF4+6w4M2BtMSZARhUdQHsf16k5snQh+sG08Vsne\neePKv02Gyxn3AMmPzQ94/Mi/Wm/qmA+hQBHHaG1PcAJSlnUi3l1jRfCvvmF7\nK3wt6ROeQiGOBYp7VnwGjYTaGWoU0qxKW2fdSeNwSY1nLCD4mROlbA1iM8LK\nxbdE8wGGe+XzSiPhKXteVy3kEJVkBXDT2DucoEv2L/sNAvgzIRBiraiXD7ad\neYzo9Jh1JTFaQKEMCh2BchIRDu6IKh/Ck6ZUB2IRdn6T3RLEDo6/l+Hsd/i9\nQGo4\r\n=wXNM\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDEZMUQRw+WeFUGurFBvZVfKvx2eyDAMh/mC1oR8e4bDQIgUYWsIkOx11MMJbNeHrNlGYdi4lpFfEIQ398PFol7ZA8="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.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"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-formfield_0.20.0-canary.e85aa60d.0_1606170250396_0.1455959395975619"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.72092360.0":{"name":"@material/mwc-formfield","version":"0.20.0-canary.72092360.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=9.0.0-canary.c927a5d05.0","@material/mwc-base":"0.20.0-canary.72092360.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-checkbox":"0.20.0-canary.72092360.0","@material/mwc-radio":"0.20.0-canary.72092360.0","@material/mwc-switch":"0.20.0-canary.72092360.0","@material/rtl":"=9.0.0-canary.c927a5d05.0","@material/theme":"=9.0.0-canary.c927a5d05.0","@material/typography":"=9.0.0-canary.c927a5d05.0"},"publishConfig":{"access":"public"},"gitHead":"ad7741df1b6ab1f1eaee400d6026dc5ab7821d66","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ad7741df1b6ab1f1eaee400d6026dc5ab7821d66/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ad7741df1b6ab1f1eaee400d6026dc5ab7821d66/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ad7741df1b6ab1f1eaee400d6026dc5ab7821d66/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ad7741df1b6ab1f1eaee400d6026dc5ab7821d66/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n|----  | -----------\n| `--mdc-typography-body2-<PROPERTY>` | Styles the typography of the formfield.\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.20.0-canary.72092360.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-4D3XXtSBfej0D8reyvR9+dDkvrcP5ty2Hm+5R/SL5Nt5pjNBUPhqCSNWzOglA8XLzn2fs2VREfO6KuDu/M27zA==","shasum":"5ba0f51828e4e4a2aab97efaa67cbe6739985c2b","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.20.0-canary.72092360.0.tgz","fileCount":13,"unpackedSize":40612,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfvIloCRA9TVsSAnZWagAAiWYQAIvmoAvEEv/cgAJjQzir\n8sriBxJ/eb3yLTcGFroqK8gmTVUNAYyjohnA6T8YcMGBEbzJaqmtnEGlCm0+\ndx0E5BtVQLsa5FRr2K7wVebA3/0VbSZqUz/LWYsMiORHN7ON89NbDTik9LNd\nIUONW/uH3PkFxwK/Knt6DCjqRMXXvP/dZvx6QULB8RQKhKsAY/4OibgDufzs\nwZHcxYonogUnPt6xP2747aGDslexdc6DzH8c0/8ZfgDz256tMbu9zivRZwDu\nH23GrwRzn0bcpO+ayh1iN6/GdgOheKGt6RwI/djHZr6Uut5GxDRxFc7U04VX\nfR6l9gAFwCSiRNmSsVSAvqGmS/EHHB3vl4zag1231I2gPwsl1q1UBQR1jwsx\nRvoiN0MXTHhRxTZ/aUrqPEvtjJl7dgR+Lng+eTHJTA4FpxbEUDtnnc2JMYIZ\nRHBgkfNAYVxYkRhcC4t0rGIqPIaYqci/AdlvYTwl8Uk2zaswkVHcazL8xUe4\nI2wALJ1Qbq3+tHF9Qm6vjj3MbQKH+pak01/mauqpbLPvfs+1KlBJSLKcOW/7\nyWWVgmNRmCxj5mj6DtlEoY7+2MrJn396xj9tcZnPqtpNkodBvSFrm9caJie9\n1HCSxeozf9L2BTafNHqQFoXaYruChbZ3SqYq/MLKDBy3i2I1kS97g9M8e5ZT\nHPbO\r\n=RvIE\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAcXRW4DH9ge93QxeX2jFPuoIWcL2QtYwaWcDwJo3hG9AiEA9g0/hHpM79zyVCYeUG9XJPqweCGglDPO2O+FPNvS+8Q="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.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"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-formfield_0.20.0-canary.72092360.0_1606191464318_0.3801525277282263"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.baf9d39f.0":{"name":"@material/mwc-formfield","version":"0.20.0-canary.baf9d39f.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=9.0.0-canary.ae27b44b0.0","@material/mwc-base":"0.20.0-canary.baf9d39f.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-checkbox":"0.20.0-canary.baf9d39f.0","@material/mwc-radio":"0.20.0-canary.baf9d39f.0","@material/mwc-switch":"0.20.0-canary.baf9d39f.0","@material/rtl":"=9.0.0-canary.ae27b44b0.0","@material/theme":"=9.0.0-canary.ae27b44b0.0","@material/typography":"=9.0.0-canary.ae27b44b0.0"},"publishConfig":{"access":"public"},"gitHead":"aaf8660af2b57dfe4523a224abf621deb5b5d3c0","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/aaf8660af2b57dfe4523a224abf621deb5b5d3c0/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/aaf8660af2b57dfe4523a224abf621deb5b5d3c0/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/aaf8660af2b57dfe4523a224abf621deb5b5d3c0/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/aaf8660af2b57dfe4523a224abf621deb5b5d3c0/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n|----  | -----------\n| `--mdc-typography-body2-<PROPERTY>` | Styles the typography of the formfield.\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.20.0-canary.baf9d39f.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-hZo4QolBLC8YDNU+ZTJhN2e/uUvV3RVHtFM3A5GnB/sDtPtI6oVN1bVspS1+av7s+KmQ/Ly5K/aljeAYFtSboA==","shasum":"7dc485bd2b1ae07165944aefb77aeba26a678eaa","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.20.0-canary.baf9d39f.0.tgz","fileCount":13,"unpackedSize":40612,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfvtEMCRA9TVsSAnZWagAAfegQAI395IAwuOLJ713VkyJH\n3ZW3x1pOnrd4jIAR6xe5p8CK5witIPB6/G50ksoYVcYhat4ZpFgtkPJ/8Y+m\n1i+54P2xsVMQP5oNS5c+utDdA/8/kKWHiGqqa34Q5fWiqbyiN2ZQdhuaTQJF\ng5/OsbYx7webL8qRYTDUDAlZ47BPoDhEY5qLDjdLZPgyPxaMo08swz/B0J3u\njLu57yLlxktCAh9nswxy0l7OIiNZ7mb1HfjiNmq0X1CdeFvsDG2tTkT7WYVU\nUpT9XEPqvTxBfWK/ttwFOm2gVWbcYXqFmPlcNRhBL5UPFNIAOqDVjpqvDVZw\nbSAzo1YCxNWrRu138ZGTCGhTPVnQxMttt/OYLc6xF0h142UJI37Spf0LiL+L\nXlcjBrAByB2nxmmoxT9EMmEiz0KrsA/Ar+zlM0UjxPXR+yUiMPCK1PdOvPiC\nKjf59GqxJip+BJKIUsJk+Qsxp4pMFb5uKu6BNdzA1WLXrOp4Fwrdw3XVD4/A\nUNTye67+YhQE6AXz30XqcF2uV31u1W9TXjNZxHH0UBWjvP9JdYKFlI/xTA3O\nbA2FTLk9FEWFbkB2HuDifxXxCPDsJE0oaXqLbyb00XR07UREPsfu39bt/0Ar\n1ypHz6Vv1VEgK/zXKkliyEGDvcePHGc0104Yg5dE3NdK/8zv0WpVNPrKTzIx\nM4Nb\r\n=99Jn\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDyuVudLxpocDJfPzB9MojhbXFyRhc+XUKtIZp0psszJAIhAPaonGAwWOG4jfmNL39hfjysFFJo7thYVhncrdwG/K9w"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.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"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-formfield_0.20.0-canary.baf9d39f.0_1606340875471_0.9320924278789426"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.51aab0ad.0":{"name":"@material/mwc-formfield","version":"0.20.0-canary.51aab0ad.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=9.0.0-canary.ae27b44b0.0","@material/mwc-base":"0.20.0-canary.51aab0ad.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-checkbox":"0.20.0-canary.51aab0ad.0","@material/mwc-radio":"0.20.0-canary.51aab0ad.0","@material/mwc-switch":"0.20.0-canary.51aab0ad.0","@material/rtl":"=9.0.0-canary.ae27b44b0.0","@material/theme":"=9.0.0-canary.ae27b44b0.0","@material/typography":"=9.0.0-canary.ae27b44b0.0"},"publishConfig":{"access":"public"},"gitHead":"ec218298fa6cb371e229348142cfd266d65cbfa9","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ec218298fa6cb371e229348142cfd266d65cbfa9/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ec218298fa6cb371e229348142cfd266d65cbfa9/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ec218298fa6cb371e229348142cfd266d65cbfa9/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ec218298fa6cb371e229348142cfd266d65cbfa9/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n|----  | -----------\n| `--mdc-typography-body2-<PROPERTY>` | Styles the typography of the formfield.\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.20.0-canary.51aab0ad.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-dG/NNpn5YAfqeVJJb440cZvJ16GLpiFE8it7YMcP8SpSCeUprb2JcjyNx4awZJlzc9QeeWKHbiv27wNXfCdesQ==","shasum":"2fa238e2d9da71d8aca9733d8ab3772819e97f6d","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.20.0-canary.51aab0ad.0.tgz","fileCount":13,"unpackedSize":40612,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfxZaxCRA9TVsSAnZWagAAOqsQAJDFy8bRaNxV5vYHYQf6\n2WXS6BWDmyI1tRC4qEHN8ljkmheslrWfMyPXNM0Fydre5lYPM00nfW63NH35\nAKaXYh5fKqEDLW48BQ4tj0O5BXJDapcUM2ltcz7Oe4o/490AWeplpT34Lq6q\n6N5N8Tvg2oeJwDI+ODZmATmNCTArVM1pMisk7iDetprsa9SJfJgCFzdO1+8y\nB3UigjAcjimNCS4zcvSwuZuvQMhrn65gZqEuxHuMFdqpjFSW+PEYythLiOIy\n65hBLEEO2qOFT/RBG0m8/dpUDQeg0uNp/edpG/Gf2Lt5jsE1Co1jcdd33eMw\n9D42dkDP9dH4SyFlnvSI4LfR6damLjljEefEb3tl677jaz5/gJF4jg8UE46M\nqo0HFvXjeI3RvaFLZojCCVVo8wmyIeiGmy4heI3iEfVyydwSLawFwiPfwScD\nM1g8sNtSbcukUTCIye4+6sf3rWy/ejZxqLjwR9gBBNBUl0X1Z/PSD1+VLuVy\n1IdumA4PPD6IZq/gPgDY6nicjJGuJSqhOG/56hNk9B26Kev+vofHZwtR+uXb\n39IdfF2xtg7NifdAUGyj5PTTo9D9Mj/lhFIJWWMjZuLq20f2cM1rBCMIS4pr\nS7CdzcEoPbDojb0cSqMMGPYLlSWIRTjPWCU8UcVAi169XSjqFd2wGo6Dn1kJ\nOMJL\r\n=F745\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHDjzStOxPeKXcAnxmiyBRqieNTyEc1q9k53DeaN4CQdAiEAwL3eZh0ZZUP5Ru9jJ1xfaAglteGwBFtv6+fVchjS+84="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.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"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-formfield_0.20.0-canary.51aab0ad.0_1606784688838_0.24292805261602823"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.8fd4af5b.0":{"name":"@material/mwc-formfield","version":"0.20.0-canary.8fd4af5b.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=9.0.0-canary.ae27b44b0.0","@material/mwc-base":"0.20.0-canary.8fd4af5b.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-checkbox":"0.20.0-canary.8fd4af5b.0","@material/mwc-radio":"0.20.0-canary.8fd4af5b.0","@material/mwc-switch":"0.20.0-canary.8fd4af5b.0","@material/rtl":"=9.0.0-canary.ae27b44b0.0","@material/theme":"=9.0.0-canary.ae27b44b0.0","@material/typography":"=9.0.0-canary.ae27b44b0.0"},"publishConfig":{"access":"public"},"gitHead":"5b16bb5535dfd0f880b710b51d20b7085d91658c","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5b16bb5535dfd0f880b710b51d20b7085d91658c/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5b16bb5535dfd0f880b710b51d20b7085d91658c/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5b16bb5535dfd0f880b710b51d20b7085d91658c/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5b16bb5535dfd0f880b710b51d20b7085d91658c/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n|----  | -----------\n| `--mdc-typography-body2-<PROPERTY>` | Styles the typography of the formfield.\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.20.0-canary.8fd4af5b.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-YvlOjm5dcQxd9eIGLuiSdV+p/l+fIyHktEulAeyAdSLScN2u2DhDISZI7YOCmT49LUpIULDItPzoFKtmBdfnOQ==","shasum":"4c158c12db8ae83ee1cf22e4cc0fc8f67bbe7983","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.20.0-canary.8fd4af5b.0.tgz","fileCount":13,"unpackedSize":40612,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfyDDBCRA9TVsSAnZWagAA9RsP/jzBRubU+1zugQZbTvXY\nPfhaKF+fEuuGCDuUqoEoJGjlSFdMilyovB242jA+6qQvkFFjXtY/fHQAnVwo\nkCWyxh+3stjOCg8tMSlPs4/3G0GqPqRPzM1A9KYMIVtVjMoD9kknWCUAhgMo\n6r6fnb/5pXalGBMpP8+c8Cd02A2TuAhzrfAPKgh6f8PSr/ASTpcnM5Bgb2la\n53NHpNCJ8rGj2F3rneHy3Z3EX48PhaixD5+wcKihKBMAzINIQd6TGQ5iKW2w\njN1MHvQsEePntIJWWY6L0g8EnWFNuKVtpkrsheivYeQ1bCY39MKi/FYLxtqb\nU7l6Uel5CGTky4vCL4Qaj2o1aDhpQ/MxBkqyHl13WglgcBVorkrHp+exNmtv\nZCVdBHZwMbNG41iyGYOw7i3iYQyT9Fo5fFfPkyjoY7chnjupgIrGpaQ5y/VV\nTPaAgc0q/GqtRRcwEaBW/ubxJlUMzSY837XTYeWKulzNtGRKaDVm/XVuVz9c\nQOxs6lVzK1DEauEhC4/TXKX2sWhCJxo9tr6jigNigyRSp5r8YJzA5u5yyzkY\nD9BYRPDNA2ywwNKZvlzH7AhTvU3Fhj3luQab6tBS9YHVFzFMr4PIepl0ccm9\nSKxSk0gNxA/DbwcEb1myGbzAEKbZ+0Hc3cU3uSXYq1VzGgEBg5ptxfvK3jLt\nQlTT\r\n=k3L1\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCJ6tB8FR2xugc0XsbUa2D1akxb7mUWfHcXg/ojY1z8ywIgSUsaRtzqPFk5es00S+CqaV/XIOQlcO3ptTy5qLOS/W8="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.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"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-formfield_0.20.0-canary.8fd4af5b.0_1606955200537_0.16776120381209125"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.26d14d2f.0":{"name":"@material/mwc-formfield","version":"0.20.0-canary.26d14d2f.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=9.0.0-canary.ae27b44b0.0","@material/mwc-base":"0.20.0-canary.26d14d2f.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-checkbox":"0.20.0-canary.26d14d2f.0","@material/mwc-radio":"0.20.0-canary.26d14d2f.0","@material/mwc-switch":"0.20.0-canary.26d14d2f.0","@material/rtl":"=9.0.0-canary.ae27b44b0.0","@material/theme":"=9.0.0-canary.ae27b44b0.0","@material/typography":"=9.0.0-canary.ae27b44b0.0"},"publishConfig":{"access":"public"},"gitHead":"50590c8a7415327322f7e0115bead5b6a56b9d50","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/50590c8a7415327322f7e0115bead5b6a56b9d50/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/50590c8a7415327322f7e0115bead5b6a56b9d50/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/50590c8a7415327322f7e0115bead5b6a56b9d50/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/50590c8a7415327322f7e0115bead5b6a56b9d50/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n|----  | -----------\n| `--mdc-typography-body2-<PROPERTY>` | Styles the typography of the formfield.\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.20.0-canary.26d14d2f.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-ujr6HvPu8CqWE8Guihk+HtRCCJJk05A0L/Im1lIXgSbdIrtIRMWBhltHCC+InN6U4IQ6EvoM6UQGr1LtwtyUfw==","shasum":"3d5dcc10e030771063a8eb77f914ac3988d83e2e","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.20.0-canary.26d14d2f.0.tgz","fileCount":13,"unpackedSize":40612,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfyDd4CRA9TVsSAnZWagAA2cwP/3gG8U3+rn4kpscwJiWk\nDbc6pdHkbw5gCS6MmfB1UQMSKpIUUi8bOYPzKnp1fZl8HJAT9M9BCzuDyjoW\nLbCZzdofKtIO3M4ark1ee+tkRxHZYLiWKKXCFvzbK7xeKLPSAXeZpOPmF0Df\n8bGU4bBDCCAgcC/h7i65elkpFCrQpk2VxLMQca+regTRdRJITmBlTLQHBHNY\n5RAVtfZf72qK55y2rZ/6XBTII7W/lR59bbKy19cxTLlZS3e7YFpX1VczT5Vm\nETWWxZmm5AMLLdqsA7go2URwbjRo+T5CXkl531I09Zd+frarGVwa1a6KnD85\nUdqy6PZIsGtJASxn4lrLISOH+Ff47AmYXhRAlJJGdu8LNmDzzm/qTnc6qJmP\nIxD6U5ZE3SaFXQCw8rwKTr1dKhUL0US/QTqdX2ciuDmoelW44curX9xeW7bM\nBUE93ycTt1vaFKQ052zt9wVdcTLXc0aEyHdRCL6B2sCYP7lg60mH1aHmt5Gy\nFR5cOdUuT5zyRPmX0yKuC0vjhUKbwBZXX6dvVJ2P/9TihsyUBnCpGfekWqza\noXlf5nlUryCHuHqwFUqDslpDqpWAx9v4mzbnQRskfI1Am5T1j0raFBd90V22\njqrTE+SF5aMLP7dA0IDS+68VbFRr5tgYEtMqy6jEqAgELLGuDIOMYoeddmw9\nVXK8\r\n=VKpu\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCCTi94+X3p7Uh+mGIblUEE2MR9P+u0sbVvUAVuLO+ToAIhAOjVtmMA5RgB0N2Ifdug4jOJBzrQRUzE+hk/7JbxLPsu"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.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"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-formfield_0.20.0-canary.26d14d2f.0_1606956920175_0.48325558253603385"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.1663d7e4.0":{"name":"@material/mwc-formfield","version":"0.20.0-canary.1663d7e4.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=9.0.0-canary.11da3c0db.0","@material/mwc-base":"0.20.0-canary.1663d7e4.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-checkbox":"0.20.0-canary.1663d7e4.0","@material/mwc-radio":"0.20.0-canary.1663d7e4.0","@material/mwc-switch":"0.20.0-canary.1663d7e4.0","@material/rtl":"=9.0.0-canary.11da3c0db.0","@material/theme":"=9.0.0-canary.11da3c0db.0","@material/typography":"=9.0.0-canary.11da3c0db.0"},"publishConfig":{"access":"public"},"gitHead":"864efc8adbe583a57a2a7554cb0b3d625f3d52bb","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/864efc8adbe583a57a2a7554cb0b3d625f3d52bb/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/864efc8adbe583a57a2a7554cb0b3d625f3d52bb/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/864efc8adbe583a57a2a7554cb0b3d625f3d52bb/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/864efc8adbe583a57a2a7554cb0b3d625f3d52bb/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n|----  | -----------\n| `--mdc-typography-body2-<PROPERTY>` | Styles the typography of the formfield.\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.20.0-canary.1663d7e4.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-GWf5Z254jh8WEuRaY9HbIYm7SZ1TqR72m2zfAdM+U+6fgKKpZ4GCSBFbv568Bc201t7WZltIZkB9clrlrjDMbA==","shasum":"50770a4d450377d7ddce51e31144d2437b7daeff","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.20.0-canary.1663d7e4.0.tgz","fileCount":13,"unpackedSize":40612,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfyDxOCRA9TVsSAnZWagAACiAP/AvZ6cfUT9ozRjuRFmNi\nmtUtHwlt3lkLOmt0w9psGem1e5CHvVDuHNI2MQiKaXT24JoParPgK2iFfzRr\n4c5Lxj9QJBmWu0/mwfvtfc51alQGiCQdTeVz9wurNa3sZDMRUn7DV0rBS9jN\nelx7bXYLEywbqJNYnoOY7HcGweUWIdAWpBEkQPjSCNE00nOP7GwG63QkB4i9\nQBM+NQTzcdXUzT+cgxeUBWU6EJfU9oYTzMV/bmopUk4WU+raGCC5Ez6vnoyA\n2QRANyMEbWEmKJoC+JSOulFcw/IRBNWyu0X2amULiFHE4krcW9/3qqQAfFbt\n/TLeqj9T7gDF7OQbo03/cOtuQGuzurbkarwPd7jFvVxsT0tT/dY4RXq3mtu8\nzqluD+VFWbMiUAnU+9Q9wxyntc2zoLPgI9rMz7nerY7qWkpjK1Yg/8QjIbmg\n48/Mj2bsaw/ZCoVYubtUo4rfgd6WUAMJMRucGxyZ0fu32h16R0ZMKkF+Pxi3\ng9mDCgHT3WEwT78QYQYnEtE+CvLDix3KHexamJNLHrWOXjAqlwptCMhszq2x\nI9uhLDgw7uUbALYNUnYFnlNKmtCbbMEQf5NWYBtLtoas4uFoqrtyj6/b2qyo\nom7Xah45Ufxp97hm0+ENkNAqjVMICxl06wNc3D0+h+WJTaUaR5H/OP/xO9xr\nquxt\r\n=g9AG\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFtNV+7y6SJDnZs34s1OuLtm8qz7E67Thriuwjbt7GX6AiEAnslQjKlzZHM5B7mB58Oq5BXS+9ww4D+1SkMkIvXrcT0="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.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"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-formfield_0.20.0-canary.1663d7e4.0_1606958157189_0.3169671944455428"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.cbe9fc12.0":{"name":"@material/mwc-formfield","version":"0.20.0-canary.cbe9fc12.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=9.0.0-canary.11da3c0db.0","@material/mwc-base":"0.20.0-canary.cbe9fc12.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-checkbox":"0.20.0-canary.cbe9fc12.0","@material/mwc-radio":"0.20.0-canary.cbe9fc12.0","@material/mwc-switch":"0.20.0-canary.cbe9fc12.0","@material/rtl":"=9.0.0-canary.11da3c0db.0","@material/theme":"=9.0.0-canary.11da3c0db.0","@material/typography":"=9.0.0-canary.11da3c0db.0"},"publishConfig":{"access":"public"},"gitHead":"ecbb2ff521324d43ca1ca402e290e52618e0454b","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ecbb2ff521324d43ca1ca402e290e52618e0454b/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ecbb2ff521324d43ca1ca402e290e52618e0454b/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ecbb2ff521324d43ca1ca402e290e52618e0454b/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ecbb2ff521324d43ca1ca402e290e52618e0454b/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n|----  | -----------\n| `--mdc-typography-body2-<PROPERTY>` | Styles the typography of the formfield.\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.20.0-canary.cbe9fc12.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-jwXNWcgNk7vD2VJc02jRo7wDE2KKOUfWGlw4L6z/X4LDIZ10xzEd3hsPWCFKRpUyXpDDJd5o4IkSVnFD8LvXeg==","shasum":"7592b4695d540eadcb412a96e36c6647aac278d8","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.20.0-canary.cbe9fc12.0.tgz","fileCount":13,"unpackedSize":40612,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfyTdCCRA9TVsSAnZWagAAZpEP/iveCiQPiyXMLV/DNzff\nVcjqNedOgY3HXojAdb8+HD84WzW3bkMRVt+IKrSgJFkI68j7WsH9IPJgpF8T\n2YcQcOyXHr/SsB0PJ+Ww5stViz4vCOV+VWQdVgJaen7eJAJ3VlH009qmJuFG\nKv68CKEtlISxTx1FMMs4dTYyjhYKQrPmQGKruvCWerOg7JY0FNPTq/hcZ4iD\nBvPcnZLwCLWuUf7MNuG9zm/opPVtRA6Twit6MMjWyMnbOQvKWPS1KkOkw97+\nwXIFqd9i0FMUNsy67yDEtHHx6gXKyntbNi1jgYGE9VS8mw1xG3/IPRnU+dc8\n4VAwSZqt9FJUzBuUiHuue2ph0+mb2/9nWEb56teFRATsnuMdf2kelqsPYDG1\n13VrR7EROLdunabuJg0T3IypgI1b3DYlFFP87qgH6lL+ILMdeZ+A9KVQs17l\nkTPplqDlodty7wXVFknhMJToNelNqQHdPoeLzgZXjPYhnUY1o7g0/aQB7CMd\nvR7raqfwDTfMm8bxxHZDq1Anikvy8oPdiNGJuhdhcDi2VB3Q6FODAHINaobw\nEaRcxj5+u4/bc0Dq0nCFYW7wvcH3vThoGttSfp4Vf+7Nwp6hUgVsrrTuI8gm\nIXXB5RZcqD3GrnP+dJUpa7GXAgElWKAPfOsKK7zhGyZVd8EjuArbpnBM+qUS\nY+Xm\r\n=aYV5\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCWGNh32bd1DKkwrvr0MtGwm3g4rgfGYOKKEvAIIZKicAIgQ05LP+XtcpJbaDGsfSs3c0xouoGDNdDgRB9Fct7ZDsI="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.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"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-formfield_0.20.0-canary.cbe9fc12.0_1607022401835_0.7511903826877124"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.9755be10.0":{"name":"@material/mwc-formfield","version":"0.20.0-canary.9755be10.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=9.0.0-canary.11da3c0db.0","@material/mwc-base":"0.20.0-canary.9755be10.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-checkbox":"0.20.0-canary.9755be10.0","@material/mwc-radio":"0.20.0-canary.9755be10.0","@material/mwc-switch":"0.20.0-canary.9755be10.0","@material/rtl":"=9.0.0-canary.11da3c0db.0","@material/theme":"=9.0.0-canary.11da3c0db.0","@material/typography":"=9.0.0-canary.11da3c0db.0"},"publishConfig":{"access":"public"},"gitHead":"45ec0e755bfb97f054d48e3543837f693347d6da","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/45ec0e755bfb97f054d48e3543837f693347d6da/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/45ec0e755bfb97f054d48e3543837f693347d6da/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/45ec0e755bfb97f054d48e3543837f693347d6da/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/45ec0e755bfb97f054d48e3543837f693347d6da/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n|----  | -----------\n| `--mdc-typography-body2-<PROPERTY>` | Styles the typography of the formfield.\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.20.0-canary.9755be10.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-Jy9pRGPUbSTbQh3tMOZqgc1e7GddTRIOt9133rr2774mhGBTbQwXgwZ6/9Jv2RLiQuoX8hGw/rCTVyOg4V0OrA==","shasum":"cd5deb7fb8cb1cd8bf1c0b942c491b9b55e66d92","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.20.0-canary.9755be10.0.tgz","fileCount":13,"unpackedSize":40612,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfyTuFCRA9TVsSAnZWagAA7MQQAIf/AX2adiKVaypJhGgO\nVa3iujNFfdamQk92ocp7o1uta+BiuPtr0cJ+QIeXSMPgXvu+866gqJrz8/Jh\nxdjYueWAqWW2uD2gfb+RHtCMiJZYmqh16Wvtk7hUBkmoR5jJRFsdQ/W8uQOC\nyAigT6uSONgPZQlmY6KdhPkUXgw6tISgpK4k5TeDbBBlNssdkPvK8aKofA/4\nbHV0zuArFnxNYXT9oTSHNLgL79gZi4Kev+ThKm3pgTy5w2fGkhJl6U+juvZP\nJFUJSlcgjeoOSr3Etz3tEsMBJzANhYmPj9xquv7HSfTRdGC6GigTenRrBg5X\ndsRD4B/EL1P6nGDnrmrhZZuqB5luKHw+xexTbXm0s/rj67KboQxBZFTN1tYA\nFdfyx0TPs4rMoqa/uB1CbTYYIHymO1XCmb3OqiotBGYZv6i5PCJGp3u0xcmr\n+Cuu1r+HM93o4qrQPRytZJfVcxgds86EZJBC4RQiYjl642CHQhTpqJm3pIGI\n1+3FJmL1Yfjdo0dMmJ8Bel5d7cKUJuWYA5sfs0xa3OyslBh7ENiwmeQNRWvo\niIDJkTtxnbWIak1P7yFsh/sYuSV1/f81CdWbAixU+e/Weu7Yaq7OFH941OgB\nu5UiG4lsRsIvRKu8y3ynYnEiZSYj99PxD+IL/6TwIIndw8NO7s0pKNLMp1Io\nSmp8\r\n=/+BV\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCrbkvs/sxYOUr460aohomcyjzFHy/3i8U8ElNbhJN6bwIgaMPiQRJp47RKK/Jr5Zw4gCjuAmFh1fjxjh/0ZBbbYh0="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.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"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-formfield_0.20.0-canary.9755be10.0_1607023492895_0.2710954834437238"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.3f64270c.0":{"name":"@material/mwc-formfield","version":"0.20.0-canary.3f64270c.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=9.0.0-canary.1c156d69d.0","@material/mwc-base":"0.20.0-canary.3f64270c.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-checkbox":"0.20.0-canary.3f64270c.0","@material/mwc-radio":"0.20.0-canary.3f64270c.0","@material/mwc-switch":"0.20.0-canary.3f64270c.0","@material/rtl":"=9.0.0-canary.1c156d69d.0","@material/theme":"=9.0.0-canary.1c156d69d.0","@material/typography":"=9.0.0-canary.1c156d69d.0"},"publishConfig":{"access":"public"},"gitHead":"048e0b4e0ee67cb81910736a7dcdae5e949a5eda","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/048e0b4e0ee67cb81910736a7dcdae5e949a5eda/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/048e0b4e0ee67cb81910736a7dcdae5e949a5eda/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/048e0b4e0ee67cb81910736a7dcdae5e949a5eda/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/048e0b4e0ee67cb81910736a7dcdae5e949a5eda/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n|----  | -----------\n| `--mdc-typography-body2-<PROPERTY>` | Styles the typography of the formfield.\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.20.0-canary.3f64270c.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-zzMarpzCqB8630Jkh6yK9AFBUA1gmY7ziRmvOAh0SskO8YWYSDXbRmqUO589OAWgpJ24LqNHPPyHWHCPbXUMug==","shasum":"1194f2a5fda8aa344c2907584838d38140d0421f","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.20.0-canary.3f64270c.0.tgz","fileCount":13,"unpackedSize":40612,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfyV1dCRA9TVsSAnZWagAAOJcQAJS45coq2ft06XT2Okf5\nxA8GNBUA1v5RQkYh8B60UtwxKATs/eiMpDh2LBJu64FI9ncMGxL4W+xPEl7L\nVNfb8n1gkbrjrpfx325RDzYjH5gYlz11reznT9p6JDROmdknnCe3cQXiy/C5\nOKh9S9CFR4rJUsU0NNGXtyICjQAf3vXA2OCDjL/xfnGWSXh4TlBCTHbd6Ueh\n/tsrg/mox74d7h6VjDcef1t2OE/sbyxx2dZCdQ7gjaOX2EJgHBlPBoYEs1lB\nTeDLOk4afHha1h+xVjPrz2CiqHfwWT93gUC1llnZ92Ox4epoEGuapd8Lru+v\nAFogJd2xyO1OsmVAStA9+pLnTdfUap2a4m2P42JNm8OwicahkB29IRZwSF5+\ny5Hs5RUECh0ppiXJnroYb+Fvi5ufSizLVdfdpixhK3NBIZFlRpp5HzD1lowX\nbJhXmI7C0bX28XjLm0tXw/3mJj/Ke4hh8wTrHJrDTLT/va6faT6zhXLxWbYv\nGdlcRUQDHSBz5seNK94lQn/4M0yEIpTBS2kPO9ZhYGD4TbdGcyK1x8E2loa3\nSS89y01ypoEbxBK8r+k4nl5iJiTnX5pcvd7JGD+rdHzz2XYKVWntDex9pHGk\nFzS0xj0QqZdNGhYEhrKaJLdDiHLNEw7Vaszi4PGrcEBprVbiUiKEWfH8L5TK\nUH7k\r\n=fvE0\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCH3FwkHBNoY7QFevR1gKLrSFjuUv1bBpY82O8Emqw2gAIgYdqvSdJ7cJSJZI6hUcjKaVUh4PQaR5m1kTEzT1+UNXI="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.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"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-formfield_0.20.0-canary.3f64270c.0_1607032156941_0.6914627232670905"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.d893b14a.0":{"name":"@material/mwc-formfield","version":"0.21.0-canary.d893b14a.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=9.0.0-canary.1c156d69d.0","@material/mwc-base":"0.21.0-canary.d893b14a.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-checkbox":"0.21.0-canary.d893b14a.0","@material/mwc-radio":"0.21.0-canary.d893b14a.0","@material/mwc-switch":"0.21.0-canary.d893b14a.0","@material/rtl":"=9.0.0-canary.1c156d69d.0","@material/theme":"=9.0.0-canary.1c156d69d.0","@material/typography":"=9.0.0-canary.1c156d69d.0"},"publishConfig":{"access":"public"},"gitHead":"d85f7378e0640c2cfbe4f96436e664222a4c2571","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d85f7378e0640c2cfbe4f96436e664222a4c2571/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d85f7378e0640c2cfbe4f96436e664222a4c2571/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d85f7378e0640c2cfbe4f96436e664222a4c2571/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d85f7378e0640c2cfbe4f96436e664222a4c2571/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n|----  | -----------\n| `--mdc-typography-body2-<PROPERTY>` | Styles the typography of the formfield.\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.21.0-canary.d893b14a.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-4WYk3JHLVE4EUiO9zzR3jrNTrmE1nwyoYaew0G6+h16uBAEVIlih14EKZvtND6gBQnE/1Qe+LY0KU2fH39/WEA==","shasum":"2aca90e9da909906e719877ff1ba806d815f665d","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.21.0-canary.d893b14a.0.tgz","fileCount":13,"unpackedSize":40612,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfyWXVCRA9TVsSAnZWagAA/wEQAJZ8JL/acDfDm4doNmQf\n5zKMquGFHnSBckOQWxrqsEGH1BrNVR59EDLz5chxh10SwJ8hsql5mzADRpDx\n/nbJJ74wAEQvAWRAwJHIwJnNetws3UzY4vHHMLiXp2mRb4W8mZp2j/XmVPBr\nWc3+KiUfxqlzCxLRikXB/88W6WyuRPoKu/mBkReCmb01ofKfO2d0Aip9nJKL\nQarrZdsresJ4p1F+vdm49+pZcDwLicQ4vdyyi5/Vc+w+rO7a5MSFe96r00IR\ns3UPMhFs5j3K1zolIXJ33NCqg5GJ6/XjI9tpxg9iNTk3pLWiOrKHpEBR0n0y\nn5GFm+3FUdlX/bZyan4vhlcXy8VXH2A3RUaH7inNFEQsw9wpd/eqa4dNqIm+\n4V5qOsB6Tk2YZ9QFHwo/RL+Dwms/WIsOfSPwTELkCASy7DCiuS9fMXIdT8ts\nYLxwqIsOR/sMF5deOG6D0kzXEEFtMcrfbEdCf5p8say72MQrtLK13U12m2G0\n2uiWa4MeHdHgwGYRRkOqG4S60MrlNzC7MJbPxibCPf1kiXZkTuxSE6IeJ0Wa\nYBqSH7IUYkVew7DxuPJLJT2GZkuWUj58pcMD1BF29EKuVJMBmnP3FScSrnft\nFunWX2eSiRhsY7bHHHyfpo1L5mW9FFrvpvI5Wvw4a/fHqQNM/2hZJqEZTOKk\n/SzP\r\n=hqcx\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICxqNpEpB46erdruzhumHVakw4Z0Q+L6XTBmGdaezOmnAiBymHGnmZWifvGTEXQ8nKfxnsSoekAZP8DeKSfkcsaz3w=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.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"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-formfield_0.21.0-canary.d893b14a.0_1607034324936_0.8053383946756008"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0":{"name":"@material/mwc-formfield","version":"0.20.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=9.0.0-canary.1c156d69d.0","@material/mwc-base":"^0.20.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-checkbox":"^0.20.0","@material/mwc-radio":"^0.20.0","@material/mwc-switch":"^0.20.0","@material/rtl":"=9.0.0-canary.1c156d69d.0","@material/theme":"=9.0.0-canary.1c156d69d.0","@material/typography":"=9.0.0-canary.1c156d69d.0"},"publishConfig":{"access":"public"},"gitHead":"d893b14a0846777b90c10839f3d05c36bc34692e","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.20.0","_nodeVersion":"13.8.0","_npmVersion":"lerna/3.22.1/node@v13.8.0+x64 (darwin)","dist":{"integrity":"sha512-Rrk2ah5gNHD4O/yYWdwHvH3kGddaZXbdiZPCTpYDlTHG63CMUsAENJy8Fu8ZCC23nxbWfBeejtbB/Da+0VZWig==","shasum":"dd3e25778aad624a0d13f5b8a33c95bf1aa3883f","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.20.0.tgz","fileCount":13,"unpackedSize":40526,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfyWaXCRA9TVsSAnZWagAAzvEP+gLwOAT5P7NqDm7HYY8o\nZTgoaSZGt3+Tp3Id+PCn4T5AkLCn2u84mZ5Ikn/cR/EvzKXMHkzTFlX0v1Z3\n1QcMhrs94Z2lp068hzTfjLVqpjrsNVD+At5rUbS7ZtfFzTywKc1ML25f41mQ\nwlFsry2GG9c0LQuqQPODZUVHT1mM2DjDQzQPIi9r9SH9yQfIqfHaYM7t3rfN\nupGwo7gvswzOGFhxpr0gxirxI5wsWnFq+8izK9Sb/RjDwQWhyC75goy4rCBs\n+KXBtxnopx8q5lHUBbzrqNXh3faJTrR1rf3XijHT9z1oPa1tEX5D6NMHXnyQ\nE+3q0PKTnQoBjqTaSk9WsoF5pSVyuKxZJF0xBnfirtPsuWc7OZyfZyXSnAVS\nUeMYwLO7fqSQCdJhkAIwhHZXTsaz6Ld8pls7KkFdCqLBZ1SPvWGweGdy+C7I\n9eoATk5MObqvS9reQa4fCXhHkmB/Ophz64ozl220tBTa+86PkszvaJcLl/R6\ng+9mwzTXScEixNpwxucTy8TeoH1XFTYeYBFo5xxPhNT0ixchc1eVID53M57r\ncTVv72DqsTnsql22G2eXZNIxDECAgTUuI+wCL6/6oisXWcBhLhj0v6IhxGiy\n51NS5KdkU/aiZ0vqSeGHgvR9CgOwZPPuu5lQW+2QDrUOQ6Sz30okUl3eSP9/\nWUEs\r\n=poi+\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCVsz9Pd8RnuhGSjTuTc5r41AHK5v86+76TQtnG/SJJ/wIgOgq6Kn/mccuUR0ULvOTyAZ8RWFu9q0AFIYz4VnBXSCk="}]},"_npmUser":{"name":"emarquez","email":"emarquez@google.com"},"directories":{},"maintainers":[{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.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"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-formfield_0.20.0_1607034518632_0.1335387968474404"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.47c7d7e5.0":{"name":"@material/mwc-formfield","version":"0.21.0-canary.47c7d7e5.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=9.0.0-canary.1c156d69d.0","@material/mwc-base":"0.21.0-canary.47c7d7e5.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-checkbox":"0.21.0-canary.47c7d7e5.0","@material/mwc-radio":"0.21.0-canary.47c7d7e5.0","@material/mwc-switch":"0.21.0-canary.47c7d7e5.0","@material/rtl":"=9.0.0-canary.1c156d69d.0","@material/theme":"=9.0.0-canary.1c156d69d.0","@material/typography":"=9.0.0-canary.1c156d69d.0"},"publishConfig":{"access":"public"},"gitHead":"670d83aacd771290b76b657bfe6ee631865c037c","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/670d83aacd771290b76b657bfe6ee631865c037c/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/670d83aacd771290b76b657bfe6ee631865c037c/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/670d83aacd771290b76b657bfe6ee631865c037c/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/670d83aacd771290b76b657bfe6ee631865c037c/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n|----  | -----------\n| `--mdc-typography-body2-<PROPERTY>` | Styles the typography of the formfield.\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.21.0-canary.47c7d7e5.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-zriJMdgQNgKf6HXfCAnwGWXBvAhsJK5X+L87r7PIfZlwO3NwJvFTXkGImdb8R9T4mSmz432rfrjhYmiof5RRyA==","shasum":"4330446e59e477c391ac1d94b7a573b2a416ce1d","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.21.0-canary.47c7d7e5.0.tgz","fileCount":13,"unpackedSize":40612,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf087oCRA9TVsSAnZWagAAYfYP/2LnVYhwwPKpxS0M3tAl\nnDXYMdj3Fp0uUCsxSOVaF7VUSNwvwqNmbfqyXrHO/BFbdENSiGZwiao0HUpS\nbcwUqL+2q24y6+m6g4oETQzMmsGlbCMc5uIQ7d2kZX1wfDI1pqEa6phwA7S5\nF1CToK8wb+OpZT/Cl7fn0IrsjwVXEQlIfUl0Ol2CdypEW+jWW9cdJipsvXJR\noclaGSrIvS33Qaq6qmqclXtkA1HEgf633DX4ntycp1BggDYHDeEydq4NBclu\ngmC8IEKNMaZwn43dyUTs+6PKYoZLT0gi2SYAznvHAs2MZ6BxLA+NVQWjE0em\nlirJwtMwKmePSL9UU0HKEguzXob8WRLm9XaRzsT3/OWJN0b8/KerENVKS7kC\nkMHm2Wc/jhSH1eKZovqTda/D7dHloXqG2lhHmTIQ5jfr9qhIQLA81TV59eZ7\n1UUaYf7kx+ZlNYrdBRmUUlQrfxEBaFFSX8cfQhpwrrV5Auxz+d11UdNEv8Lq\naHU3uo6Xkg3W28hTwQJ1xl8Xlda6UlDWVe6uzUPd3DlpmjAY3FpMhkTSfGNd\nxBNOq6YZyJyt0Eq8THPhevoDeVbqO7GwI7HATNaw3oPpc97Fn2lNi62BGTYi\nu58if/+G4wTupcsjuxXsMhcB2/id1zW6+oWLH29RzPwWKkdJyfawyphXXqh0\nQPbo\r\n=35eP\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEJhy+PJNhOOlQuanuvQJvdhVjCqgBMTMRYlIjQaCw4XAiEAjGwU8yt+AYxZi/SMonlbsRZc64UWZKYE3EAPvftgi2M="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.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"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-formfield_0.21.0-canary.47c7d7e5.0_1607716584472_0.8005106456195026"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.b304a78b.0":{"name":"@material/mwc-formfield","version":"0.21.0-canary.b304a78b.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=9.0.0-canary.9244508bd.0","@material/mwc-base":"0.21.0-canary.b304a78b.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-checkbox":"0.21.0-canary.b304a78b.0","@material/mwc-radio":"0.21.0-canary.b304a78b.0","@material/mwc-switch":"0.21.0-canary.b304a78b.0","@material/rtl":"=9.0.0-canary.9244508bd.0","@material/theme":"=9.0.0-canary.9244508bd.0","@material/typography":"=9.0.0-canary.9244508bd.0"},"publishConfig":{"access":"public"},"gitHead":"44ea71b47f36de83be1e3319efa93b6fd3690c2c","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/44ea71b47f36de83be1e3319efa93b6fd3690c2c/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/44ea71b47f36de83be1e3319efa93b6fd3690c2c/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/44ea71b47f36de83be1e3319efa93b6fd3690c2c/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/44ea71b47f36de83be1e3319efa93b6fd3690c2c/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n|----  | -----------\n| `--mdc-typography-body2-<PROPERTY>` | Styles the typography of the formfield.\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.21.0-canary.b304a78b.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-ZdZ5jt5PXuezwmQD7azKxV1WmXdRKb9PQZriwco4ZR+SaaqUEIRM6iWed5CJXYFcgyqWFZLwME8+vbxlk7JvTw==","shasum":"f2b99484b81d7fdee54adc5c7ea839c5afa0a70c","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.21.0-canary.b304a78b.0.tgz","fileCount":13,"unpackedSize":40612,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf2RaLCRA9TVsSAnZWagAAmZoP/inpIDM3c7MLdzwiEU7/\noIj5no4c7PwXXxtWATSQFJzCEIrHd59L/ioVAjoZm0tHGWjDKJYvuPFY4BCR\ngba0CjUvhjVtIT/yWlFguPa7QcIf/FRIAV/dJJSwPLLUTDO7GLFZP92HooYB\nitj98983ySGaTNVhvwR+5QoeP2ahWOG1wN3xfLdCmzf9fmAql1hSk7oMeLgG\nGj53/AX3ffitnZZTQGGhZBWQWWvJrORuyqPIbE3G/hpd0yDDmc780mNpWhFs\nZ9gBEq7lUQ+Sg2I9gL7Au+r46dmiOK0k4liLhsf2rhDfcq01Jrz1P+CMXPl6\nMB6sOIslhZhWpoVdOSS4Ik8WX3hC9+ykeTd3C3swcP5Yi+M6bLUqDpI4m+Au\nOAdO5280aPyay6QBNLjD4rf7FrkueiCMqucoAkzzHW4XGF3qBtbIYArlGO45\n6ciHaa0JeSqLGbhsa/q8itCK2/cRiVnmn7fUH+Kt4PD3juWIqOh7EIOOC96t\nlqYQW9+FFgJrFLDhB99H920ghOOT+RzNg15Y5ybOcG25I1Plst/R5Pc1MTtq\n0m3g/hayV1ZeqAv28lszTSMiugOVU/3/917K0aLwQWWlZwU5tT8E9SHdhOXg\n3FpvJg2QwM6431zBHr5m5pgRExqy0+meV8N7YaIXwpJxv9N+0vC9XoBPie9c\nK9Ew\r\n=JC7B\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIC4N4SqQXGmmvvWxZNcPqO/UT36WkvX87dhzlm8+yml3AiBVXpfsH52PC2iWl1WZB5Oji2UHJ426p/xaBMDstBmluw=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"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"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-formfield_0.21.0-canary.b304a78b.0_1608062603356_0.256207938147748"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.777c5fa4.0":{"name":"@material/mwc-formfield","version":"0.21.0-canary.777c5fa4.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=9.0.0-canary.9244508bd.0","@material/mwc-base":"0.21.0-canary.777c5fa4.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-checkbox":"0.21.0-canary.777c5fa4.0","@material/mwc-radio":"0.21.0-canary.777c5fa4.0","@material/mwc-switch":"0.21.0-canary.777c5fa4.0","@material/rtl":"=9.0.0-canary.9244508bd.0","@material/theme":"=9.0.0-canary.9244508bd.0","@material/typography":"=9.0.0-canary.9244508bd.0"},"publishConfig":{"access":"public"},"gitHead":"8e5f0e24042f2b54d3ebcac6c8bc11f89a7c1a1d","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8e5f0e24042f2b54d3ebcac6c8bc11f89a7c1a1d/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8e5f0e24042f2b54d3ebcac6c8bc11f89a7c1a1d/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8e5f0e24042f2b54d3ebcac6c8bc11f89a7c1a1d/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8e5f0e24042f2b54d3ebcac6c8bc11f89a7c1a1d/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n|----  | -----------\n| `--mdc-typography-body2-<PROPERTY>` | Styles the typography of the formfield.\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.21.0-canary.777c5fa4.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-VZk3mdHfGQzLNLT8sUhjtJ7ZJtQvHDLx/idsFHalTYZD06Z8N17KmYs8JnEcJiXq4wtNUiHUQW/hzRGIZDsYmg==","shasum":"4d41dbb1f53443a5c775add30f16aa74d3e325bb","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.21.0-canary.777c5fa4.0.tgz","fileCount":13,"unpackedSize":40612,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf2oHfCRA9TVsSAnZWagAAGHYQAIIiyWgjzAmIRW3oaf0D\n8XTmiig+e5s8KvLqmwOcamjPj+IWAXIHS/CnEHO3peZwiBqevQDMAwbUKdpP\nULUhqDtrshbpVNPW9K0mn/5Au/XwxH/SVv+/T49g+RMo5gnHg7W0Z7JPeXM5\nBYmkZnA0ksZBrEHoelqOHpTsz7Ry0K+WaalAnbhhOoS8ND/o2lKVhV6xiTjA\njAVw8M/4fIGtfdCR6KFhqI25dcKAgR+PMao8P89d3XdcsDEAJFT95JFwzcOj\n1bHTTvS+HrNBwrKygmtddk9A8QqHSiwawjXy0bPewgchrcDfAzmrb66Stiyd\nyOA2+nusn6haiJsU/frcb5WTGduV+ySdAwb0YiuhyXziJ7UGSEDNhLWSoXnO\nRsXHhqNWmGsTNeaM2tQ6ejlEugqqAeLuOnFDgREw+c2Na+eEV2RRz+Ykm+ZD\nTHAEy3/0WebPZ5w8ICJJTI4kGOTU6dn60dP2NzcfZgxDU5YR9yRDCC6ec+6d\nzyoj2S63mm6Ru9EJZGVpaUKvuQthLKQWeaa2lPFBb68pGz2Mo82i56j5P9xu\ntsSl3lY8A52vsTpo43B4cDmvHEgRzJ3pCCh8prlL9usz+BJXSRvLTVZI/wPz\nn7d9joJ7xR/JB/hcWZxCH4PZb+4Y4yQM3bF5BiSm+QyOoxSgo63RERWxBvIY\ntgS4\r\n=HAGX\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDaCta5XO29QUi6W4KJNebD4HiRx5KT2byciEnADvh7jQIgZZulUVXOqhidAb2RZita220wio02p84eGbGNXkWcn30="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"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"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-formfield_0.21.0-canary.777c5fa4.0_1608155614703_0.17821939336358716"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.635c7996.0":{"name":"@material/mwc-formfield","version":"0.21.0-canary.635c7996.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=9.0.0-canary.30fdfd06e.0","@material/mwc-base":"0.21.0-canary.635c7996.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-checkbox":"0.21.0-canary.635c7996.0","@material/mwc-radio":"0.21.0-canary.635c7996.0","@material/mwc-switch":"0.21.0-canary.635c7996.0","@material/rtl":"=9.0.0-canary.30fdfd06e.0","@material/theme":"=9.0.0-canary.30fdfd06e.0","@material/typography":"=9.0.0-canary.30fdfd06e.0"},"publishConfig":{"access":"public"},"gitHead":"a0b572136cec769df6b66314ae5710101b643ea1","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a0b572136cec769df6b66314ae5710101b643ea1/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a0b572136cec769df6b66314ae5710101b643ea1/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a0b572136cec769df6b66314ae5710101b643ea1/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a0b572136cec769df6b66314ae5710101b643ea1/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n|----  | -----------\n| `--mdc-typography-body2-<PROPERTY>` | Styles the typography of the formfield.\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.21.0-canary.635c7996.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-lsA/Nd+c+F5N5qmT5tlGbZw4kUW5tozLPJt7+3S96O1PahIA/qBwy8A4AwPB0hBqSl0reUqw2EHLToHgYAQm4w==","shasum":"c47eb170b4af7e4788ffd44c4340f2a4b6da5d02","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.21.0-canary.635c7996.0.tgz","fileCount":13,"unpackedSize":40612,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf2+pBCRA9TVsSAnZWagAAGscP/1eoX9ZkHehhxLxk37C/\nRxVIqPplX9FzTvrdecbxrTglDfIkSA4W/3aOQyBWUyXdUREf8RNS7TiWAuXU\nFWD3MLY92S4/9DKSMSn0tSIkhDij6+ji8u64lxciTuGsbX9CgeaCOTT3slBD\nMJsg0CxFGid0NQpGcVr2PptdzQtlb0jdokytB2HvzkHaiJbt2tAEzD6C1X5b\ngVAPZyoYcMLUJMSWgVT+LZieeZvdgsNEEBYD6IqyHBa8DW77yFRaAHUmgquS\n5yG8TEmdVGL9e7GrrlcO6NFFMNJycmipvuiJftlzUU4VjnA0JlyA784f9MCv\nOvvdR5Tapf6jeWmprooGXsUSOAsSXF0cUdXgKxoIGIhY2c1xvEdfJ0BNGxSd\nWPcUw+BcnzVDRE8YUr4sS/A40NsYxP9o2g0hLJLjGrPGMOtiYdRLTnD/MbXZ\nOV1Z18CiuIUzAkWjqdWiDwckPNku2tfEgPt5PVXXdDQogZsTKdPPNncBlUcC\nqNUe39aJDKVOeIiNVr1GYcBuLGE7fYiazRc5RKNBtdQjO8eG3cvST8OVfTd+\ntpRkk6Go72+xSmvvGJfiOabUm+e8ZoDTxg/YuqV1UKBDeGlleZ2eudbV2FLd\n/2aSwRvXfQfoeNNJi4lhdybG7bSz9W7KwE2aVvbVrMHPaYLjtoCC477yt7L+\narKO\r\n=//OY\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICXRdS+ZEZ37ICNUR14Kj5BxTr9wbb7ZdQyaH1zlfJsSAiEAmz0YgPp1uZ4pfW5q7yeViPWjmK2J0HpSSIoh718Bi/U="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"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"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-formfield_0.21.0-canary.635c7996.0_1608247872953_0.7931829767754539"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.20b0045f.0":{"name":"@material/mwc-formfield","version":"0.21.0-canary.20b0045f.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=9.0.0-canary.30fdfd06e.0","@material/mwc-base":"0.21.0-canary.20b0045f.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-checkbox":"0.21.0-canary.20b0045f.0","@material/mwc-radio":"0.21.0-canary.20b0045f.0","@material/mwc-switch":"0.21.0-canary.20b0045f.0","@material/rtl":"=9.0.0-canary.30fdfd06e.0","@material/theme":"=9.0.0-canary.30fdfd06e.0","@material/typography":"=9.0.0-canary.30fdfd06e.0"},"publishConfig":{"access":"public"},"gitHead":"a6bca4682b5b0bc23e8311853608b98f5594831a","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a6bca4682b5b0bc23e8311853608b98f5594831a/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a6bca4682b5b0bc23e8311853608b98f5594831a/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a6bca4682b5b0bc23e8311853608b98f5594831a/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a6bca4682b5b0bc23e8311853608b98f5594831a/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n|----  | -----------\n| `--mdc-typography-body2-<PROPERTY>` | Styles the typography of the formfield.\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.21.0-canary.20b0045f.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-Vop8DWNBTACUBI76OmlDDSfrAXLIAo6XguX6c3ufopbawpfYGkAywkKqQIh/zwwyo4c8TlXkyrfPlzErC/8kfA==","shasum":"442c5fe2cd84aad92fbf7675b2bba840aa18ea11","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.21.0-canary.20b0045f.0.tgz","fileCount":13,"unpackedSize":40612,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf2+47CRA9TVsSAnZWagAAQnAP/1CfiBKUT2eGLpoNB8St\nykWJYP6d+rTgtkGkjm0fDuA5mXS5Z9pLTdmdiEb4u6ameQ9yLUtol6HGrff5\nwYvr1cK1u66GsdD0atlAERQJBO4GSDIHWpDCAtMVSwnHGbqbn6rCIk2kKwJl\nzhz/85+IIEt/uAbIshGf6wJP2kSWpHEV8P4QRbns3k9q0czJ5/qMh4DE+aMh\njrSkhppzMXkR9GPTrwjF/rFpqMuqn50eB56oZd5yosqiREy/nHd3wTE/gxOV\nP2QwH/w+b2bk7ETroM/am/jSrYscpzrv8IlCcTJMQfWXMQMtdf2iCq3TrOu5\n4nT2loQN3jCm/ClEEAXTd11yYlGualQaYKgdv3geee6aq03w1mK9TRNz6hx4\nAvwm8TCnFQTV+8tzTT9eslua5K50W42DlQ6ZF+joELUhpgJU1sAl09/bIjEl\nM9egKPnYAdyFlx5XuVb9D7VauG2oKG1W31Lw5Y+lchQHuV+DF6soz1lVH+S+\ntv0a0/EsDNsLTW6ltYrZ4xDomBnVR3uZT7DE/mnod86YWBSuFeQy+P5Ux68u\n0JeU7PPBYAxGZBlJ4ucP8UGonIQyAJblxSvHCnIZtA+qwisPxDgn7U2rivIP\nSzplGaScoEwBU8Y28X+BcpIO4i+LwKnty67taPMiG3Pl5w4ZhM+icOVp/EXe\n9/Cx\r\n=hg/r\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDQLL735TcxWBW7gOHj5VFDlwwf5AulNW3zMfN3VPH5owIhALv1Mv5fjIGfhEYicXgPvhfCV3NR1uia/ryXYI8C97hw"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"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"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-formfield_0.21.0-canary.20b0045f.0_1608248890656_0.4285506594479698"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.41f77000.0":{"name":"@material/mwc-formfield","version":"0.21.0-canary.41f77000.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=9.0.0-canary.30fdfd06e.0","@material/mwc-base":"0.21.0-canary.41f77000.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-checkbox":"0.21.0-canary.41f77000.0","@material/mwc-radio":"0.21.0-canary.41f77000.0","@material/mwc-switch":"0.21.0-canary.41f77000.0","@material/rtl":"=9.0.0-canary.30fdfd06e.0","@material/theme":"=9.0.0-canary.30fdfd06e.0","@material/typography":"=9.0.0-canary.30fdfd06e.0"},"publishConfig":{"access":"public"},"gitHead":"59ffc250e9e7d85ede63c75495b12e981e365677","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/59ffc250e9e7d85ede63c75495b12e981e365677/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/59ffc250e9e7d85ede63c75495b12e981e365677/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/59ffc250e9e7d85ede63c75495b12e981e365677/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/59ffc250e9e7d85ede63c75495b12e981e365677/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n|----  | -----------\n| `--mdc-typography-body2-<PROPERTY>` | Styles the typography of the formfield.\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.21.0-canary.41f77000.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-r7myYunb3Juh67y3whgyDX9gzac0q+L7DG7/Wzd8lH5GOmqTTbDvvP7Od+rpGEYrXHhKI0IMw8rDbkAwNKX16g==","shasum":"fdde482621c9abe81cfa1adc0ef049ab4fa7851a","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.21.0-canary.41f77000.0.tgz","fileCount":13,"unpackedSize":40612,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf2/khCRA9TVsSAnZWagAA9NIP+wWXNwAFf64VA17hE2b2\njEvt4e1guYLxAlArNRMAAGGjb8AcHRfsOzzagA3pkRJu7aFtnXndVQC786tC\nxKaP17qvNcz3VbhuCxFZz216j/8dhi7c6FkN2lP9nuNUVt3ZuEzMVHGJ+3R8\nyghRwvzyIpACp3NK53jSDhS9SDbVIwgi7TbeP5INlDJrnoroMhUR9JlUSU2r\nZSMJF8jI4tzNbsHuptRy/HrFxU5J4bQqb7S5Q5bdXRcGgjOVSZ5DN/S53PLa\nj1KyFLWMRkAYrFbNRcKiQLM/59m9eHIUqDOGyq5YNOya9QHJY8CojDHyKjFd\nRrM6k7JZLdJv84mQ2xEt6tIaMaw0yBz48QsvCW5df0ciUtERAqCsLMtKlm/E\n6XhLG4gWgtuXlUvonoEwbzS7SQrz1TBQlNISLgH3uxXKyNJtkdRG1Q9aQ1Ui\n5FHOYnhJCs4ZQmeDwXzov9JnB3MfMTXVr8sIgQ0kO0bzRIAYbgR8jct5gknl\nDksKIInT6xfYdTq+/rvT2kZUK6gHbbO6/VEtXXqoP6TbMvVV+j0aacQTAQie\nywDrYZL4GhxKo8D20ss6JqT89sattqiMF5s2nTdKFG+pupbco2Nkmb6U1de0\nemv3tLVxcV79rEoSailnAZEb6cd0SPt3qzZad2OHyf2Q9lKeuH+YctssSKad\nk2CC\r\n=xqn6\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDcs0NUMP7rXM3QrXYno5XX9Vp5EVPco2y+Wi8E0rN+yAiBf2Lk1HDL5AMlIXdrnoalZki/62lxPcgEl2UeMq3HVQw=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"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"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-formfield_0.21.0-canary.41f77000.0_1608251681203_0.37929965483207373"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.afe4079a.0":{"name":"@material/mwc-formfield","version":"0.21.0-canary.afe4079a.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=9.0.0-canary.30fdfd06e.0","@material/mwc-base":"0.21.0-canary.afe4079a.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-checkbox":"0.21.0-canary.afe4079a.0","@material/mwc-radio":"0.21.0-canary.afe4079a.0","@material/mwc-switch":"0.21.0-canary.afe4079a.0","@material/rtl":"=9.0.0-canary.30fdfd06e.0","@material/theme":"=9.0.0-canary.30fdfd06e.0","@material/typography":"=9.0.0-canary.30fdfd06e.0"},"publishConfig":{"access":"public"},"gitHead":"aeb3539e673debaa2381e0aa7f186b95e91ee563","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/aeb3539e673debaa2381e0aa7f186b95e91ee563/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/aeb3539e673debaa2381e0aa7f186b95e91ee563/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/aeb3539e673debaa2381e0aa7f186b95e91ee563/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/aeb3539e673debaa2381e0aa7f186b95e91ee563/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n|----  | -----------\n| `--mdc-typography-body2-<PROPERTY>` | Styles the typography of the formfield.\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.21.0-canary.afe4079a.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-2LfhzsrD2PyGlL9GclYW4Tkr7QdvRITnGZ4tfiWV5vi+CQMWWxHmo7o2p4KZEF971KoCK2A05FSM1FyHmQEnVg==","shasum":"bb9967e96ce026c77c3d532131b65ddcda6bca74","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.21.0-canary.afe4079a.0.tgz","fileCount":13,"unpackedSize":40612,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf4i9ECRA9TVsSAnZWagAAxH0QAI+h2kuyLTdEA6sIWOXW\nNaWb91OCYArn34cMLVEiWwXSx/6dOyxVu47E/YZWAitnK9K2yxDV65VhD0Bu\niIB7s0wczIosjDfedUkctGw5csr+pZzXKPtg1Vg+vWg8dstA+WE+lSlNx8Ae\nnpOH625FI0fSgatzBs7f0qYrqvEeXE3wTkT7Bp9s2tSWOVFr7hOhJhNthqe/\nUNQrLnMNJv9hQ3qjUKv2Pgv8QH9/xJwIk2IdCiBFRQAeijgijNyZwBTA8hMq\nkcnziBLQcrJ7q4nyssvvoe+d4IBU1eoVBnYoPlAqTGzNtNBkIrquQBr4ApbK\n+j8HA/pxkXuPM6UU2D40EtKz+cZAq/3/RrqmU0C7Ys8F/sXqLAIBe5PYG3wr\n8YisT2VF8vgFYCakJ+Ca0t5EjfzCnIjthDBQE/92jiRrk98EAs7Kptx6tJZi\ntMHCm69aD50OW6fxgiGB038sFPhFe5H8K5rpNnDfhRyhYG9pXAq1iPR9ECuT\n4hCatkuXA8Ema14WPr9VyylZu+2fm5v4N2lc5HHrnIduuVRMSr5mBAMZmbC6\nJ3VRHjeswPWqMc2S2JKn9VM1r0dwNbPBROcm1imK9sijnG1vh/xR8VmcrZf9\nkDoIyNPQ9RsfKs5SvKjlRHPYveIb6AUiXz7Boo7Rqk2FZTrc+ash++cik/We\nQCYQ\r\n=hb3R\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD7aYv+quMDgxVCIcvQaB26QVbGqJ7CSX66JbqJzRyMvwIgcuUG+Y6CtG3PpupvtqZIXdPxKBJkFue3Cx9EMwOP9bU="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"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"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-formfield_0.21.0-canary.afe4079a.0_1608658755844_0.07605898250117726"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.407ef8f9.0":{"name":"@material/mwc-formfield","version":"0.21.0-canary.407ef8f9.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=10.0.0-canary.671d72d95.0","@material/mwc-base":"0.21.0-canary.407ef8f9.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-checkbox":"0.21.0-canary.407ef8f9.0","@material/mwc-radio":"0.21.0-canary.407ef8f9.0","@material/mwc-switch":"0.21.0-canary.407ef8f9.0","@material/rtl":"=10.0.0-canary.671d72d95.0","@material/theme":"=10.0.0-canary.671d72d95.0","@material/typography":"=10.0.0-canary.671d72d95.0"},"publishConfig":{"access":"public"},"gitHead":"b600a06f2f54a052373cbcc038980333a8068672","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b600a06f2f54a052373cbcc038980333a8068672/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b600a06f2f54a052373cbcc038980333a8068672/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b600a06f2f54a052373cbcc038980333a8068672/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b600a06f2f54a052373cbcc038980333a8068672/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n|----  | -----------\n| `--mdc-typography-body2-<PROPERTY>` | Styles the typography of the formfield.\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.21.0-canary.407ef8f9.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-C//T/acGeVfe9PCesqcHhw7vWdaeIuT7a3R5QZqycSb4b5db++msUT2EeCN/5mCgwe4yrvQ4IlCMnzfAzFZW5w==","shasum":"afb6b200118466efe3673987565bc8f1499d5b75","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.21.0-canary.407ef8f9.0.tgz","fileCount":13,"unpackedSize":40616,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf7Qb2CRA9TVsSAnZWagAAFsYQAJdyjVHkuvyxKPIiEvBJ\nFygorRFnpbOR0DNi9L1qYdPPckAkXvprSpnXR+s/aXHCG7knTvur73nB/kxa\nmN7B4rJTA+PCiAkAsxOoESBMx9/6yF3583vKk+6Rpnc1WubTYQCDPyDyC03V\n8d+dcm2fttdAexyPAtJQeI4dvfA7BnL6VPBjg6AnkxFUzRQU8YmBA/lI4IHP\n2Qnc69avXOCpAmaNtFbVEpQ/wwxiZtbCF/q5S3srMObibeWdi828f/TronDU\nyfMtVRG5TAlnHvBfxiwtPuXWFBx3D5w3fzgPt/Dotyz/y4PADpCS9jr10ekB\najtNY5XxX83nTEz7WlbHjWVaxekLKPCjwFPthzVRoHQY7+OIeK3y6KVdj4VF\nH1BBbldLWQeqP6BFk95VppRafvMlzEW9WuRj3g0n6kbmDFlyYrVXj9GzC4La\noBrsBjW3hXwmfmYpLfVjqQnUElaZKQyKACAFDZ+oEWCvjxa3xNXz/otg2jUD\n0L9D4yJXV/8oGGEi0QbGjh/21dZbK3FIkR8WMgbtvLmi9kT94pM8ikJbWzcV\nX4MW+XqRlxL5ZftdLgG+p4Mik5FbEDwrNpzVkZVxrUW3uaq3elZa3GbLXQBp\nyBWJsW5MjbyMlEINS1EaXpFmF98hh/AhoXkRXyGMyr6VPXVhsFkZyurgCu/F\nTFGo\r\n=s8NM\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEnZVjjFMaWVvQHkNs6ual7VgGclmRH8YBWea/7sZa1QAiEAsa+6MC5tt6TDqFVWXn8My7DJdSbq0S6ipOlSj7uPsrU="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"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"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-formfield_0.21.0-canary.407ef8f9.0_1609369333847_0.37518066142096584"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.2e26e137.0":{"name":"@material/mwc-formfield","version":"0.21.0-canary.2e26e137.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=10.0.0-canary.365c69360.0","@material/mwc-base":"0.21.0-canary.2e26e137.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-checkbox":"0.21.0-canary.2e26e137.0","@material/mwc-radio":"0.21.0-canary.2e26e137.0","@material/mwc-switch":"0.21.0-canary.2e26e137.0","@material/rtl":"=10.0.0-canary.365c69360.0","@material/theme":"=10.0.0-canary.365c69360.0","@material/typography":"=10.0.0-canary.365c69360.0"},"publishConfig":{"access":"public"},"gitHead":"cd3d92f8ebc04ae6cd6d286c7983e3028e380428","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/cd3d92f8ebc04ae6cd6d286c7983e3028e380428/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/cd3d92f8ebc04ae6cd6d286c7983e3028e380428/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/cd3d92f8ebc04ae6cd6d286c7983e3028e380428/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/cd3d92f8ebc04ae6cd6d286c7983e3028e380428/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n|----  | -----------\n| `--mdc-typography-body2-<PROPERTY>` | Styles the typography of the formfield.\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.21.0-canary.2e26e137.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-3CfyXPhsTO7gENgw1GRDBxVoPGsMp4hqfQx10ks9pwnAvUC0uK8K78tJ2IEpKUJkhdPGSobxgz9f2o1u3dJtmQ==","shasum":"24c537d8f1cd531e32bd4ac64654dd3de4dc13b0","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.21.0-canary.2e26e137.0.tgz","fileCount":13,"unpackedSize":40616,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf9LSjCRA9TVsSAnZWagAAAaUP/iG2OrlVTyEB7wXPvxHb\nPXx422BEMniPqnCaQcwXgWCkZaaj4RoFHY9wcEah5IN2ow2AH1RQBfswr9Kv\nn1OKbsurkJgHc0jlGM4ylTDW+OGahRwr9vrsCXwJSuwWDXLqv261sMiSGuLU\nsOmwCIAs/IBbik3hKNAq/px5sOSUFfvo9nb5pSwi4ookAtUsr/MjhlEuNOm0\nLCgWToALlJ/2mpboX2nsL7B5n+/lmjavxSnDMuzngPfLd1am6OtSmeo5Z0nH\nnDe6ilhMrWtOWVlxT8qFBfh/rXYQ888ifLMR/dXioSIPlaluUUwOeM28YuTj\nN0IMOqxvTeDRKxJVom76tSWVuTFPOE42xXfCjsETIItgTj9KiDJTLvD/LwUc\nDZjk1MUt4bosdyON/jKL3XyyZVjGYWNBbY3tX6jX1QyYNc9l1DIMRPOmGPJf\nTfjtarp5R9vDbNVh5IAu/j95OyG1IkqNfE05HSoyUbWtUEF462vDUElqCqKX\nYY+KVInBsP6Co1PuFXxM+GPeAH8sJnRnjQs6q9wrv9IDsqz+iooba0RBtnOq\n2omy3ZNFCs7ex8HsdJFsf5QfkZIX4L2Oq8QQ/kgbiQteI9w9mRlHLmaZJghT\n6k+F14ziSp+dltBBPM3QDBpKklp5bF2giA9G/pcHelUw53W1BpRjg2voVWyE\nEOtL\r\n=20P5\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBQNQ/ALPZzCYStFU1voYsrpDR+4/lC/pRKZm9w/CCZNAiBDdpzONO7cTCW753wJVX1PPzCsxFsz2zGdEz4zhoH/lg=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"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"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-formfield_0.21.0-canary.2e26e137.0_1609872546654_0.9691443946166503"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.9009f6c1.0":{"name":"@material/mwc-formfield","version":"0.21.0-canary.9009f6c1.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=10.0.0-canary.abdd10065.0","@material/mwc-base":"0.21.0-canary.9009f6c1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-checkbox":"0.21.0-canary.9009f6c1.0","@material/mwc-radio":"0.21.0-canary.9009f6c1.0","@material/mwc-switch":"0.21.0-canary.9009f6c1.0","@material/rtl":"=10.0.0-canary.abdd10065.0","@material/theme":"=10.0.0-canary.abdd10065.0","@material/typography":"=10.0.0-canary.abdd10065.0"},"publishConfig":{"access":"public"},"gitHead":"d6f3ffc9298b3af3985946aa3bdd75c862b5d8c3","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d6f3ffc9298b3af3985946aa3bdd75c862b5d8c3/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d6f3ffc9298b3af3985946aa3bdd75c862b5d8c3/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d6f3ffc9298b3af3985946aa3bdd75c862b5d8c3/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d6f3ffc9298b3af3985946aa3bdd75c862b5d8c3/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n|----  | -----------\n| `--mdc-typography-body2-<PROPERTY>` | Styles the typography of the formfield.\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.21.0-canary.9009f6c1.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-UNOn1uFd9JLaLJbh1G/1fxj7/NcQuCZJ78lKN5fVEdxIXZQIB6M8YPSy1Td/qr85LB2kEjWGB0Ym3HugsXxr4Q==","shasum":"d57f7fc2514514ff0dbc385360511112c03a86d5","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.21.0-canary.9009f6c1.0.tgz","fileCount":13,"unpackedSize":40616,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf+LhMCRA9TVsSAnZWagAABdUP/iaXycXi2vuc42IKcGjq\n3nEQ+dbtpaXhOnCUMWaq1OwF7ievlIIcelXX4ZBN+0HrC2ujZKgcBvK7vGXi\nKEX5jTwpHtX80GBq/7zclXRzJuXYA4w33/9Yu9gmvpEnmCsb7D7LM7UHWQ4a\noPzW6OV4Ar9V4d2xEzcyI7EUMNK6TlGl7O3MCRVbBX/Bvhu/6cUG/8cFUBLY\nx963Gp+SDeyF4hUbiexGdpPRb0spCQFi/QEL/AtkmpfsTN7EQT29yLLOaTpH\nkKjGoxq2Y9WAPwjLaQ4su4Dh4elOIidmgRT9jR66Z/x5nvwQcxyllXtcxExk\nj/papsF3irIMNzzaIuBT427hjoORM7cHBKhtORWiuHH9j1zSg1fy6Gn6cO/D\nlHFxYNwn7hAahn1O9as0oti2+N4lv2kt2E2BgVljSRR9UavSYER3teFDh3bL\n1Nfswo4DvZMDUMBXPWpUqAHk7rV4/+yEKUk7CqWHunz3FeSuOowPw7knIv+C\nRBac8a4iB9Il1JyA+cDxwfzVKAVV+MRj/aJYIFVpJ1j639D11wmC84XtcvSZ\n2zymhww/J5TDAEQ6LKywzByYrPp6G3sbVB8Oqu5oM7aSL6EYAuyoPWDZmvdL\n54jdk76jZXqbZp9QGvPJVGAqm5QAokV5JWcEelLIEQZU3eLYq6HRJ22wIn/t\nGGQE\r\n=khTY\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDxhgbAM0K+ljeNBxAMubFXPqb3R/ne9UESMIW5AJq67gIgMnUkpIa6EuCr6yO7OANcocugxYMB8CSi42w2WTEP7zE="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"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"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-formfield_0.21.0-canary.9009f6c1.0_1610135628531_0.30820657731867485"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.ee99b646.0":{"name":"@material/mwc-formfield","version":"0.21.0-canary.ee99b646.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=10.0.0-canary.b8a1a58e4.0","@material/mwc-base":"0.21.0-canary.ee99b646.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-checkbox":"0.21.0-canary.ee99b646.0","@material/mwc-radio":"0.21.0-canary.ee99b646.0","@material/mwc-switch":"0.21.0-canary.ee99b646.0","@material/rtl":"=10.0.0-canary.b8a1a58e4.0","@material/theme":"=10.0.0-canary.b8a1a58e4.0","@material/typography":"=10.0.0-canary.b8a1a58e4.0"},"publishConfig":{"access":"public"},"gitHead":"e3bf8197782f6099f32f339bdbc9218093828cdf","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e3bf8197782f6099f32f339bdbc9218093828cdf/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e3bf8197782f6099f32f339bdbc9218093828cdf/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e3bf8197782f6099f32f339bdbc9218093828cdf/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e3bf8197782f6099f32f339bdbc9218093828cdf/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n|----  | -----------\n| `--mdc-typography-body2-<PROPERTY>` | Styles the typography of the formfield.\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.21.0-canary.ee99b646.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-MoGv1YKWczVkCsBgZjZARFmyG3AX16snQJwjGjJuUXEIZapaMRSrCRGuEg8LM53hLJKP7RayVVWWDt1L9jYO8A==","shasum":"e2adacc45c5a99706db032c57860f985f49d6065","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.21.0-canary.ee99b646.0.tgz","fileCount":13,"unpackedSize":40616,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf/No5CRA9TVsSAnZWagAA5K4P/2JK+8kEesOa9fmssIyx\nnWSB/n4hIixE9f6Mn9rnJoQ7Yh7opLETY4trEt5MtpDVcKXiWSQExYRP+U7R\n3l2gSoEXccnffFZCRBwPyT2bltp+U4by6UzYLSUSGJzoLHZhM5BlOTGnZIZY\nlBSTCAeTcjJv8n8Ywz+vDIUCzspDMSxybYO8aBvij0qcBKCEAgE99GEDApE+\nLxTrmJI0/+M3GUVOkV0WLrEbMBcYNXBufFPj1M+JI2BP/NkkGR1AF0lbCTtc\nAQ2vw/SVJrduVQwuYSef9j8xMlNh/g0OW2UjbdT4AoQCRNSUk1/uzErjApK7\n9IR7u0bykxUqMAsHlDRoFNLyuN6O7VB7s/QWeFO5bIokLkZ8FBaGMrYbqOH6\nfojtN9Z3FgjC8rsZ2nWB3sE4R8DS+/PLrYEt+3AFboh6zM0JzySuNGlFXzT7\nQM/7sLz+ZVXNhjh2k31pHhVsLGwVjr1hB7lk/0nJYVUAOEdR8eGsMuKApOpI\nU9OAfT/nxWsQgbISHPLPdsAwL7chqFRt6nP/k5pjNKaArTFJPahrkiB4rVNE\nY2VdD/fTky6y+OFRaGkhwmdIkxFdFtn/Eghhk34b+WrsbJSSnHp2SNjgxU4x\n6gTvBAsy/TiWUnaCgmlkWsc6oj9U9FugHEMI3F/rzCsQTrjI8HevwKj5pMNg\nak4G\r\n=ViZh\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDnb/LZDP8H7DroNb/a0bZOI1tMlbjUaLH+xhUO87eYTAIhANSmbjmQNuOvTflfAVfEJuTZJM4NCtM3eXSmSSJyPe4Z"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"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"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-formfield_0.21.0-canary.ee99b646.0_1610406456651_0.18648963260215945"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.740ed33b.0":{"name":"@material/mwc-formfield","version":"0.21.0-canary.740ed33b.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=10.0.0-canary.7584267ff.0","@material/mwc-base":"0.21.0-canary.740ed33b.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-checkbox":"0.21.0-canary.740ed33b.0","@material/mwc-radio":"0.21.0-canary.740ed33b.0","@material/mwc-switch":"0.21.0-canary.740ed33b.0","@material/rtl":"=10.0.0-canary.7584267ff.0","@material/theme":"=10.0.0-canary.7584267ff.0","@material/typography":"=10.0.0-canary.7584267ff.0"},"publishConfig":{"access":"public"},"gitHead":"fabdf055e5efb9cfb69ee02c46f968eb33e417e2","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/fabdf055e5efb9cfb69ee02c46f968eb33e417e2/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/fabdf055e5efb9cfb69ee02c46f968eb33e417e2/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/fabdf055e5efb9cfb69ee02c46f968eb33e417e2/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/fabdf055e5efb9cfb69ee02c46f968eb33e417e2/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n|----  | -----------\n| `--mdc-typography-body2-<PROPERTY>` | Styles the typography of the formfield.\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.21.0-canary.740ed33b.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-HGJYe/DqenjCz1xa7+taOodPR2nX+qOa8CZdcbZljwWot3PLMR6XxAyQGQjr4BD3gJAd0zwRUi5R4Bo1qw66zw==","shasum":"cac8ba7933906a067675e96da5f41b93a4328652","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.21.0-canary.740ed33b.0.tgz","fileCount":13,"unpackedSize":40616,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf/eR2CRA9TVsSAnZWagAAXzUQAKJdcCu6esZXoj7Xn/Au\njWWzchcbFbeopWPcGosglSScMty8ihYWn1Y3vtb17P/JlXcd8V1Ahs/RUdNr\n2efiSWl8ANZTHwMo9LWPUPrJHyqzL7NRxoPLmFlkS2s9/8okqUNZGxp5bunA\ngjt0Veq6MxFjbz+EYZIiaTSW8hwuLkfeflCjUoY2l/tKPYtnoB765XoC1tDo\nljs3FAGssaKUqVuDW+lIiTFK1mbRnwVqIAAM6tkz5nDyoMkun3a7995Z1fsp\nGNvRlPnMjjE+lifPA57ID4kbYelkq3LV6Tot5YWbH8ANn2KgdMk3EjJcaOxW\nQj6NRDal+5LvKBAQIBuE0+HjJnYCA95Wf3FHQN9IEuZb9+UrBByeGqoV/M7Q\nxdeOA96W0E3PMmGNzp7zLcqSAxw72PqsAeKuhF7XTI7fXqbL5LRpims8tM8A\nmz4JtKDDPyzojQFW0OxsZpYM6oIfC5MoXY160wSFgQrBtRRM2/SUNN1si8lB\nTJ5171ojjqn98l6I+s22XT3vQQxggnf6+gwvScH3Q1qqHi8B8bFXBv7e5roO\narCsajZl7EIeD23r2xIMVtrvbuifI8KDe1yRuIFh0IxDXZ2Ub+b31kZC2jmv\nxJs0P0WBJeziSG446dIrSGNMmZND0hN3E76M7LFksob+QVHmLcf67iZjfDQj\nhMel\r\n=gjDG\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCq4JPyb9ydk/sHF7aPblWcVa7DV/j/WwL27Z0LtDImyAIhAMtbTDYw9B73RVoWkrtkDhNTGHtcUd9j2ZErA6+OAE+N"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"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"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-formfield_0.21.0-canary.740ed33b.0_1610474614425_0.2619149069068212"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.c5c541b1.0":{"name":"@material/mwc-formfield","version":"0.21.0-canary.c5c541b1.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=10.0.0-canary.7584267ff.0","@material/mwc-base":"0.21.0-canary.c5c541b1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-checkbox":"0.21.0-canary.c5c541b1.0","@material/mwc-radio":"0.21.0-canary.c5c541b1.0","@material/mwc-switch":"0.21.0-canary.c5c541b1.0","@material/rtl":"=10.0.0-canary.7584267ff.0","@material/theme":"=10.0.0-canary.7584267ff.0","@material/typography":"=10.0.0-canary.7584267ff.0"},"publishConfig":{"access":"public"},"gitHead":"2845f0e85b6a37bbfaf5110a5f16284cc8fda6ef","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2845f0e85b6a37bbfaf5110a5f16284cc8fda6ef/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2845f0e85b6a37bbfaf5110a5f16284cc8fda6ef/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2845f0e85b6a37bbfaf5110a5f16284cc8fda6ef/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2845f0e85b6a37bbfaf5110a5f16284cc8fda6ef/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n|----  | -----------\n| `--mdc-typography-body2-<PROPERTY>` | Styles the typography of the formfield.\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.21.0-canary.c5c541b1.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-OzeHwa6dGrqvkIWhdTdlgpERthNL9HwujYmP/Ucwo/Ixr8yGo31Ecqfr6SVzkuda5ltGGFwEqzuSMtiR6Bfnfg==","shasum":"48077bb27fe4921fa31021f5d940392583dece48","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.21.0-canary.c5c541b1.0.tgz","fileCount":13,"unpackedSize":40616,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf/e4uCRA9TVsSAnZWagAAigwQAICOGxnQlhFYlgKAQLtO\nEqDAqaE5eTlFMZDTRBX5Li/+5YJVPAMexQHzgpKsPn1LMfcZCx1s4EKgCrdU\n/3PflTQ2iHAPzqjeFgTf3hhXLwdWQMkY7VDyreWU8tl+TrotEdLyv75tU8Go\nAebAhIjSmnOhTzU0JkXO6knOZR+qTcBynB+C+vd52jnWy2zA5PR6fHF2foVl\n5mfNjKSWl0OPUB7UhJt4MUviTwhcrQ+kV6UhgqKNeG4rgjVdVdmekpTwqgE2\n+6ySHzTxMKbCuSQ2PPbaW9OXyh2FIeKKWwEznVeIKh0SQ8lOQ45NUYZGT4i6\ntDFFW5RpeewVPbr4SqNQPjAfszHhUBJh1g7NObObL0ivEd41mo/Yr95KwqPZ\nDaU1y+77gQIe4b0WbyqaeUT89HeeEU3iIw8hFSuCizLu2w/HGBwWyHNfpptv\nnjOkVmSbp+cSteYkKkT8vidMF8Mtkjqw40NurjigFrW6sgudvmV+Kn/QR3/R\nrfjkWtLvmiIiYkYn/hb0PT1URpOJc/4TMFRZmMMtsCbOvt1FUNSrrdP4IuUf\n3Qd/uuN45DT4ihRIWlrJ6i0TvtLo3NRAb8M80XZ8a3CWzIGegp3gUW9BFXR+\n3LZxfOrqhZGO9cYz1+J5+33cHR4EbAoqDQmqsc6aN2shttzi2iAPQEXk1hob\nfamj\r\n=zkH2\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEvcRz75cRceTJJtLyK4cCVI/BvhkWSoUByC+Xe7ErxgAiEA6IEuhiX78iIAVR6FDVC4UGkYYRF6BUbB98oabhrvNoI="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"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"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-formfield_0.21.0-canary.c5c541b1.0_1610477102386_0.17780011650169714"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.06fe9d90.0":{"name":"@material/mwc-formfield","version":"0.21.0-canary.06fe9d90.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=10.0.0-canary.7584267ff.0","@material/mwc-base":"0.21.0-canary.06fe9d90.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-checkbox":"0.21.0-canary.06fe9d90.0","@material/mwc-radio":"0.21.0-canary.06fe9d90.0","@material/mwc-switch":"0.21.0-canary.06fe9d90.0","@material/rtl":"=10.0.0-canary.7584267ff.0","@material/theme":"=10.0.0-canary.7584267ff.0","@material/typography":"=10.0.0-canary.7584267ff.0"},"publishConfig":{"access":"public"},"gitHead":"99a3aeb2c1659185c9597a59e5dc7599bbfd52bd","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/99a3aeb2c1659185c9597a59e5dc7599bbfd52bd/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/99a3aeb2c1659185c9597a59e5dc7599bbfd52bd/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/99a3aeb2c1659185c9597a59e5dc7599bbfd52bd/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/99a3aeb2c1659185c9597a59e5dc7599bbfd52bd/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n|----  | -----------\n| `--mdc-typography-body2-<PROPERTY>` | Styles the typography of the formfield.\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.21.0-canary.06fe9d90.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-R3xOakaLYJ8ygFH0UKXnbJYG//AO1cSD4khdjPcriGfDkXjoZiQFaaPmdQlcF3gV44pW/xnsIvMOhqvr7A8OIg==","shasum":"a62ac4b3082ba03129cc5abd193b353b8fcc31f0","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.21.0-canary.06fe9d90.0.tgz","fileCount":13,"unpackedSize":40616,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf/gyHCRA9TVsSAnZWagAAH7gQAIchIl5C2pbro7Dz4nkL\nkQ3BuiQkdn2pCykgJhm5xo5Ce3wGuEIVRZd3V9AiIkekS3S5k2QW+mGE5TNP\n6qJ6VZzkfKgGwfl5ZKGtgUMlFefRdm/RxGLIySDLIBfdu/bI5w+g3dZoxr1J\ndBZHKfuUPcBaAZBOxLv+sSDqKcwaLFQ/hS2ymekWWR27ymdglAlrtv6TXFVh\nN4SHrjq3aldfI3S0X11bS/ynGnvgZTee+9IHf/Gft1lXktnAXqPNK53LC3I3\n/OoSI2fwjBD3Awyfd2urpJS7iPx+3k7AmXR/AXJ7x9ymzv/wbVn1ywSwDAFc\nm02KahMWePRGcdOXLKyIDLStOdJ8Vr0DaR2zX41SNQeNOh2/AzoIF+K1rFDX\nVv6hGSAih7I/tE20ync+2K/pLojVAQ2CwmNoI1nhLHYg5WVbHRiHXsSdWm35\nrB2OaSjgZo0FsduwnpOlN9V2E2oQVw3abQkBpWsZdB6adLnHntkaKziZe5WT\nPPe//FBDsAfc+k8WEFjHt6+G8oDFVeMAxBtSJoL45Z9h8oKCzCDc3Dxb2+Ml\nFHseRB3z+xV6NChjbwB8yiVNfOpEFMcPLQ+ahD3tcayNZh2wchXI6U6/7RYW\nKhHgG0ouPRgUUHb0MlqTm+qZXcDq2Z7M5EJNxlFVNwVhCFKFYRVgOl+atIXQ\n9q7Y\r\n=LgXM\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIERt+18QA62jErr7oIc6LoNNjrzXxtssnbKHgi4AvU8DAiADvJw05Lpk4jLac345NYTFfm+dXdoWSmlNjoX5+0VOQw=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"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"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-formfield_0.21.0-canary.06fe9d90.0_1610484871365_0.40237649158179867"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.269eed01.0":{"name":"@material/mwc-formfield","version":"0.21.0-canary.269eed01.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=10.0.0-canary.7584267ff.0","@material/mwc-base":"0.21.0-canary.269eed01.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-checkbox":"0.21.0-canary.269eed01.0","@material/mwc-radio":"0.21.0-canary.269eed01.0","@material/mwc-switch":"0.21.0-canary.269eed01.0","@material/rtl":"=10.0.0-canary.7584267ff.0","@material/theme":"=10.0.0-canary.7584267ff.0","@material/typography":"=10.0.0-canary.7584267ff.0"},"publishConfig":{"access":"public"},"gitHead":"537a9df54fcb929f413d5ba5af0dacf0e2654c82","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/537a9df54fcb929f413d5ba5af0dacf0e2654c82/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/537a9df54fcb929f413d5ba5af0dacf0e2654c82/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/537a9df54fcb929f413d5ba5af0dacf0e2654c82/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/537a9df54fcb929f413d5ba5af0dacf0e2654c82/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n|----  | -----------\n| `--mdc-typography-body2-<PROPERTY>` | Styles the typography of the formfield.\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.21.0-canary.269eed01.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-76ZK0K63ADCN7UaG1CukDxO9HZ/TGVwyZfgyIxQTW4ZpVJUp6QtUax4v4NVR0w5+kt2+bp5P8iLsXb0FLR/wBQ==","shasum":"58c7e5fc7a4c066019b21e81241834b0346c7e7f","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.21.0-canary.269eed01.0.tgz","fileCount":13,"unpackedSize":40616,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf/2nOCRA9TVsSAnZWagAAD28P/2G3eiv6TgwrLKC4rT2r\n+FkxtpErcUxG/NNxkpMDvwEVWT2W4jn2Ksdapjb2b3B2szmGJpvysPbduzcg\nkaIzA7aNXzsG+1pROMaUzJL33k7UMPnorwCF+PIyhI2rlsgugIZGcNgwS7nY\ntr8EUCGqHviFzLBP0kkXota8WfOexXxir0EQkPIIW6qyxH0iqneTOG1ApQR2\ncLqojknS4ddQP85NrjqUX09Lm67KikibyRHb1frxpgd6ykP5ub+294ij7qA7\nCf+k1CmIIwzFR2KbXdfTNpF+Zbg057Q2TNR8J3+kzHty0HGYhZJdTnC7qMqH\nVaskbTcYxI7EMfpxBrRzCkKagxR2sT9tW2A4TUfFqiz1LUjR4OZ3eMQIf0yS\nLtDUtzBVqIdROCjaDYfxQb9qWg2yi4EH2dedFnuwaJOBbx4gIslSg0Au99Af\njWhLJLIw1adf78SZyGsdNYx0dNS+y0pfnxxlsLyITvvgBk6ToFxrwxQhxWtu\ntg7kUkE0Itzcqp/0AE6MGZbT9bm9fhu+SaSAPzEhq1waleObyLOFE4/mJY/U\nImLZmOUbKwhxjcQwCP5PXO/Fv+f9VR7znLIbP8uooH2Ycv1niCYFZubVxTSs\nxv6Ec0Qh9DCsubnSo6JIpena8XevgrZPEV9+2cs8Yvh8IM3x4VR/48w7wZio\nDsZ6\r\n=S4Ey\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIA9U1FFlLGvcaqc8Hl68ozYdp6aJuCkAB1l1NIgLLrAzAiEA/U4Me4O7XQSmWDZsT79XbWFwn28YkbpqG/6FT4HrBmI="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"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"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-formfield_0.21.0-canary.269eed01.0_1610574286432_0.6404813692628792"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.8c075f35.0":{"name":"@material/mwc-formfield","version":"0.21.0-canary.8c075f35.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=10.0.0-canary.7584267ff.0","@material/mwc-base":"0.21.0-canary.8c075f35.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-checkbox":"0.21.0-canary.8c075f35.0","@material/mwc-radio":"0.21.0-canary.8c075f35.0","@material/mwc-switch":"0.21.0-canary.8c075f35.0","@material/rtl":"=10.0.0-canary.7584267ff.0","@material/theme":"=10.0.0-canary.7584267ff.0","@material/typography":"=10.0.0-canary.7584267ff.0"},"publishConfig":{"access":"public"},"gitHead":"8757321e04ca4329877d8b8c9924f78bd58ccaab","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8757321e04ca4329877d8b8c9924f78bd58ccaab/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8757321e04ca4329877d8b8c9924f78bd58ccaab/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8757321e04ca4329877d8b8c9924f78bd58ccaab/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8757321e04ca4329877d8b8c9924f78bd58ccaab/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n|----  | -----------\n| `--mdc-typography-body2-<PROPERTY>` | Styles the typography of the formfield.\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.21.0-canary.8c075f35.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-ByyImbBB9p/NWk5JGnl73ayFX+Wd0Pd59YHASOhvrSqve37ERN4fuJYjfdMnuxsKMJ5+2qleew3HuJDjWlR0Og==","shasum":"154e36fde596c1682f947a084cecd93ac302569c","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.21.0-canary.8c075f35.0.tgz","fileCount":13,"unpackedSize":40616,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf/3zuCRA9TVsSAnZWagAAhAIP/jBjp2uqB36Cm7pjCFe4\nU956cLHGUlQbFe1swP0UEhqhAk5HYr3rGs2gecrNQArkMl4eV3gAFYwp5T5Y\nhINsYA5HYpolgTLroqr+YuXlJJaTNiIX9i6hJBG2/Tk644OfBV4vgLo4uQTr\nUYajf1L5rCSLqPzWUZStepjPz/fD1h3cU3L/oIxaEG6YH6j7cgflxVBce3ce\nQriZUsDjedfmS9ZFFWxfNiu/vEyKMr2okjZaAq3bvBR19cuArf3pzmwyF2R8\nKbej4xBPEGdYMZ5n7rLFlopAISA8UyHK6GSpbVcFBkb30ZL6sF/zua3CD92t\nJmC7HEiLSQE68YY5sg5p0gZ+sYmPQObWxC+DsZHhvZ9ITufPpG2cBeP8DOO9\nTp7wYE0crQ921Zh31FdLfM/53euv7xMt6nDAK+ID9ry1fJLnlutZZ5JcrVZZ\nNITjhAx+0FRID3JI5LBWffkLYnGTmMgPHLAqxMpYD/3sjsUdCSpm41BDigtc\nLcnKhiL6fWrI7lgN9vaR4PaN2bceKIH9ZnjoPQAKoScMjSmo87B7QPv6gqnC\nK/odOhWjT+8rghs14j0bMT8he4t/Gj9tfe5z9XbMG1C40ZzIx858j9t82ina\nPmyYdX3+eJ0hAKTZf+2xc653ElLD6YL+mz2CES0AIrGHZ2EDWdu5EXtBe8H6\nexPD\r\n=YM6M\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFR4arj7cjObTS/S7GxxM5bwpcyYTEvsPKHcpxAB53AYAiAauk8C4QIKPa/eeTca+xy2r5xaYLzecOALPb1Qa1qkRg=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"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"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-formfield_0.21.0-canary.8c075f35.0_1610579181657_0.5792557763703887"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.3cda381b.0":{"name":"@material/mwc-formfield","version":"0.21.0-canary.3cda381b.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=10.0.0-canary.7584267ff.0","@material/mwc-base":"0.21.0-canary.3cda381b.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-checkbox":"0.21.0-canary.3cda381b.0","@material/mwc-radio":"0.21.0-canary.3cda381b.0","@material/mwc-switch":"0.21.0-canary.3cda381b.0","@material/rtl":"=10.0.0-canary.7584267ff.0","@material/theme":"=10.0.0-canary.7584267ff.0","@material/typography":"=10.0.0-canary.7584267ff.0"},"publishConfig":{"access":"public"},"gitHead":"d660dc72de8b9d23247ab075b6f4f44053c9cb70","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d660dc72de8b9d23247ab075b6f4f44053c9cb70/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d660dc72de8b9d23247ab075b6f4f44053c9cb70/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d660dc72de8b9d23247ab075b6f4f44053c9cb70/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d660dc72de8b9d23247ab075b6f4f44053c9cb70/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n|----  | -----------\n| `--mdc-typography-body2-<PROPERTY>` | Styles the typography of the formfield.\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.21.0-canary.3cda381b.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-SSGFdr1NULBrznkwTt3L/RZAudJCFx9UGdPfOl/NdavEPmV823Yj5xTdOjrOOmni5tFQZsOxPM9+VhOLhBg0bg==","shasum":"5dc0ffbb39675f3295bcc00f1946320414f1c136","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.21.0-canary.3cda381b.0.tgz","fileCount":13,"unpackedSize":40616,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf/4pzCRA9TVsSAnZWagAAtesP/0T2L3bbkGTQ4M9ctHGP\npeW1VAj5AWttlJJTvm4hjULWRQoko1JQ91uKh9W4Mwrv+BaWaFitf50mTV+W\ns+Flliy7Bw2YTt2zm6/w4cbDZiIC0d+L8DfiRagziPnEACNrxuCp2mZJ8ogj\nFTkAbCWoGahAhMIes7JH1kXEFgHJ0TCffH676tPKBfpDMSt/rdUBkGIG6oAD\niKP95++bvayi/DMHd/VbPzNT5D9vwbEA/1h6O3S+JT/i7+Kh8tJpSo/SvTr8\nxyZMpJ16dh+eofGv3MvEdJQL5V/tsQk0bAIlLVZRgqKt/xCZ1t2OdTH9tFCt\n4T1w6iKiUHUWHBQVRT0E+KoEeaKy35wLcHP8MS7CuWw8BAbMlOlJw4W6LGpg\noUAKQIxM1UPgQ9TrrMZCijmZhEy68Gcq/gB6VHP5s846JD0knhwjEJW7OEMY\nEgF5NpxZaPVa/YIej2er8SUeLFDQ1y0Y+Rfi0JIIh4pg3dJ7dJrqq4shbfaI\n6LB3mgTMDUVlNjoRulzxjNdJykqbdGXp+9FEPjqPhk6uPDKDQLPfZZsrltL3\nKu4mVUQW82+5gZe/mflJ+42CyLyPNyJwscDZmz/9Q3Gd07ofP5H719uVCer/\nFb9tt5ofhuAZRLlQ8cq5NJ+JYxHZsKeYLgKyAqSnW+lRnZB7/btm+MSWmSPF\nDBhj\r\n=Uluo\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDfnVtXse3OCQ82U6yJZq60hMjFIu4aJLFpTSRLWyrbsAiEA7DCQSxOFQPPAxWxbpf7v6FC68JlusmD3F97N6V+r7Go="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"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"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-formfield_0.21.0-canary.3cda381b.0_1610582643279_0.08377304643428363"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.bc113605.0":{"name":"@material/mwc-formfield","version":"0.21.0-canary.bc113605.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=10.0.0-canary.772cc1068.0","@material/mwc-base":"0.21.0-canary.bc113605.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-checkbox":"0.21.0-canary.bc113605.0","@material/mwc-radio":"0.21.0-canary.bc113605.0","@material/mwc-switch":"0.21.0-canary.bc113605.0","@material/rtl":"=10.0.0-canary.772cc1068.0","@material/theme":"=10.0.0-canary.772cc1068.0","@material/typography":"=10.0.0-canary.772cc1068.0"},"publishConfig":{"access":"public"},"gitHead":"ec7a00c7b7cf2145c971f64e88b375c09a5409af","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ec7a00c7b7cf2145c971f64e88b375c09a5409af/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ec7a00c7b7cf2145c971f64e88b375c09a5409af/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ec7a00c7b7cf2145c971f64e88b375c09a5409af/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ec7a00c7b7cf2145c971f64e88b375c09a5409af/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n|----  | -----------\n| `--mdc-typography-body2-<PROPERTY>` | Styles the typography of the formfield.\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.21.0-canary.bc113605.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-b39+v4nUStYU0SjB0nVRNR3N2dW5jWbiCaJiZEgP5wQxw7hYbrLy2Lh8sEAOpXnTFFgJJXhXfo4vAMzcv0mFqA==","shasum":"e21c392f2177bc05e99d9a556bd7e41b3f8c1f25","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.21.0-canary.bc113605.0.tgz","fileCount":13,"unpackedSize":40616,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf/5QCCRA9TVsSAnZWagAAjkAP/ikU1gDvmBzL25mZV+ai\n0KXIWtgOVLk+JlHISNsYnLAIAChMlXpVQ5tyQGbzTZ9p95MAvziAGrlx4JVh\nCEMSs6DUuNgRjbLujxsJ60/c4tz/CJStE+nTwqXYtBwUCOiupQ5K4h7io+Sp\n/hZezbJWeeVG63rjzbfqiuPY7bjmhN5eW5PBciWp9jzgUCkN4IMSuQB59sIS\nhHAPmDYNMScPSZ5c8PTZvmKH4Ntb2Sg9nLVEJg059HOgDJSRxSae5d7S7E91\nI4EP7M/XYBn4C2cDJ+BJ/FSWVTZNd3s1yFEUyqqm7El/bcnGtXFVnVWd24ad\nukjcToKkmfGl+RvSfTUCHcUa/uAzdqg1dZerlw0o/fnEQb4Su2bltJ5cpiFV\nazJ39+Ucy11L+fMFLT6Ofb9oRRdzVNk2Q1hHWAS9PjO0I7qrIWpqS8ALyhiv\nPnoQF580S/S1e9PW+45aofyfnfKEmr3DdxpmyE0hKsboqGMbn+aXGRTCAsTu\npZbH7ZWzRNx9Y/9a+XklO8NDRlWQONI6vNW/2Z0SH7+5VPIVyriqAi63uiud\nSTYRjGmOU+WsrkxS9d41lIv10aNFG1OciutgdnYRcezxi8dj6tzWab8F2Ot6\niRlD8Tonin9/sw1ANH9QNgs7iDc/ulLS/j3l7nLsfwyZXZaKh/ZxAxS410BH\nHVLY\r\n=2SXc\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBYXoQZcKEWZrd73Std0aoqJsiLc4BbuKqml9/bvp6xhAiEA8HTJEJWTIJM0KVuS0iMtjXqyIy5KGbhLu4GQs/JWkXs="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"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"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-formfield_0.21.0-canary.bc113605.0_1610585089991_0.9847648492314811"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.0c1d6ff9.0":{"name":"@material/mwc-formfield","version":"0.21.0-canary.0c1d6ff9.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=10.0.0-canary.772cc1068.0","@material/mwc-base":"0.21.0-canary.0c1d6ff9.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-checkbox":"0.21.0-canary.0c1d6ff9.0","@material/mwc-radio":"0.21.0-canary.0c1d6ff9.0","@material/mwc-switch":"0.21.0-canary.0c1d6ff9.0","@material/rtl":"=10.0.0-canary.772cc1068.0","@material/theme":"=10.0.0-canary.772cc1068.0","@material/typography":"=10.0.0-canary.772cc1068.0"},"publishConfig":{"access":"public"},"gitHead":"5c7f60619e642de2f6951662670ef490a6e46e70","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5c7f60619e642de2f6951662670ef490a6e46e70/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5c7f60619e642de2f6951662670ef490a6e46e70/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5c7f60619e642de2f6951662670ef490a6e46e70/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5c7f60619e642de2f6951662670ef490a6e46e70/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n|----  | -----------\n| `--mdc-typography-body2-<PROPERTY>` | Styles the typography of the formfield.\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.21.0-canary.0c1d6ff9.0","_nodeVersion":"10.23.1","_npmVersion":"lerna/3.20.2/node@v10.23.1+x64 (linux)","dist":{"integrity":"sha512-77gkk3oCJdL7qxVMRDH5P041uw7SKZ9mDcMgxn14ZXo5NT2tQpcR1/SEAGvyZQ3279vXm0Mi0/c4s1LaKuDKnA==","shasum":"17cb235b495eacc8380bd9e9b8d843c59974da76","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.21.0-canary.0c1d6ff9.0.tgz","fileCount":13,"unpackedSize":40616,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgAfZPCRA9TVsSAnZWagAAAdoP/jYB1MiEWXs0GLACAihG\nB7bMGVRurD4jh4VYZKtxq/w5VcdZ4MPUuU9Qqkgsqo0EzuMmQEr2t8Hi7IzF\nC9kZthycssvyj6fRnQqeqDXz4u/L2vVLc97rmDAsS2rR+k4HnSdr0Tujw9C1\nbaG4GrC/QusDnJfMXps10ViAKwKCefiWFR2u1LNg/r1Xp6xHdf84MUhhhcSe\neVS87dk4gVphmHjtt7fjCBLrwQT+6oVmIampSmmMwBhYghzy+RsnJP+9aUZe\nIqTVf/0+Rth3vKcNcUqueQmVGCUfd1dHc3lSSA7VcUvKeQz5qX6cSWANTWI8\npikP1vBXAApa5xu+sCg+WFc0OMC/WYmLvAOjsa5ptVBXwsp/MZryuWOkgHRK\ncBkFqpJcDjxdreKG4OgIyWuL0XNMxJ/Y/cdq3juNeRM9yWmMxqn0QqLajqAa\noROffDKhguAqG5FfOnb64NMgNvEbvZ0AGhQjVGQsakMeP/4IZ/7iUfNSA5Ni\nK0olXW+JaphJr4/c5bE+68ua0AGtcfsz4ETpP9HPo9TKISVGVwxRpT08BYKV\nb/HZNkzIoylHgloNJgtwIo+OONzi5djKPEoidRvCt1JcWXYM1wnGty+a8j7w\nK9HtKDTSiH8VMA1AnNxpVPPV6+AUwQe8P/Q7Ae6d1ErIQ97OShjYAU1DUB7H\n2pkt\r\n=wbwD\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHff3vB3m3b4Is26/2YnX9RHBnZNXOjdy9LOxqpUQDvoAiEAh8xgyQHt1vYddCZ+9aoy+ibkNOPzPfcIBcTy5e3M038="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"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"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-formfield_0.21.0-canary.0c1d6ff9.0_1610741326593_0.6711950993559346"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.b4332e00.0":{"name":"@material/mwc-formfield","version":"0.21.0-canary.b4332e00.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=10.0.0-canary.c7c5da28f.0","@material/mwc-base":"0.21.0-canary.b4332e00.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-checkbox":"0.21.0-canary.b4332e00.0","@material/mwc-radio":"0.21.0-canary.b4332e00.0","@material/mwc-switch":"0.21.0-canary.b4332e00.0","@material/rtl":"=10.0.0-canary.c7c5da28f.0","@material/theme":"=10.0.0-canary.c7c5da28f.0","@material/typography":"=10.0.0-canary.c7c5da28f.0"},"publishConfig":{"access":"public"},"gitHead":"823027b19badea63e32aa35bfece324daba62e19","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/823027b19badea63e32aa35bfece324daba62e19/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/823027b19badea63e32aa35bfece324daba62e19/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/823027b19badea63e32aa35bfece324daba62e19/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/823027b19badea63e32aa35bfece324daba62e19/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n|----  | -----------\n| `--mdc-typography-body2-<PROPERTY>` | Styles the typography of the formfield.\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.21.0-canary.b4332e00.0","_nodeVersion":"10.23.1","_npmVersion":"lerna/3.20.2/node@v10.23.1+x64 (linux)","dist":{"integrity":"sha512-qulic+0gtrUS8tvf8fGYd4tTUq77VzkjvdiDwvtPB5Ds/lZIgY3FPGNoSUcvpdKh3zwtPObWxdKiUqnX7ovYwQ==","shasum":"511438e5d8eae9e531a04a3111c8ccb7dec46df2","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.21.0-canary.b4332e00.0.tgz","fileCount":13,"unpackedSize":40616,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgAhIHCRA9TVsSAnZWagAAGcgP/jppu8G8TLjZwzDY/bKA\nZuO571ONEYTPNUDLiPfiIhnO1wQwgNEpEVP7pR1AwM5R7SbcBz4dQZRAqDS+\n5sAcE2fVO16pUw+XLLg5vhxzmOlo+MgRFmOX8gRTbdCgzir5lB0sLOo0XNCp\ngVuVYXj3MzyS8/wqJVupKNRRbH4h8BnZxHXVUPHKvj6ED6AwXnxT3+FcvOrR\nmuv9IYxT0c9drOevIIbTiv48EwRZQT7aN+7pKf5bxQVAA6uk7EQFQK2zFS7s\na73LLI0t8nn7Yefj4F4UNN2tQk+shmaCDEm1RMttw3ArIIRYnJOpf5cz4AGB\n9/HrJ3KgMYfM7SDKBef6FUjldGiebZtlNCPF6ETAvYlgnaN/CqRFmma6I/cm\n+93vWYGQEFRDvIgqdG6s14rP+oZ7jX1ivG82CvTS+A5+7zb+xBBbMZW8w91C\n9vyQKsuLe0Tmpd9F1sdYSUcowdZPY2a6JTnL3L5dvbhMaYZNqmgSNVk0XokQ\nUZ/YH5Fwhem/m7FQi0cycZPrUYq0YWY6m5qJVpvZ35FwLZS3qk4K3wCdQJnK\nV1AjU1StYuZNdxsayZryX4t6ILdvJY6pecudR6s0zk+iD7xI/mR3TTKc5eBM\nEi6Ei5VrLrMngw2PWFwyXv9dNh8U5/GvrBwRrGIEpCc322BbTKCDqf7tlNu3\nWoz7\r\n=vsPL\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDubmXY39yUrU53EVF5lVKmTIMJUpQR0/2EZ/gfo2WvLQIhAI4OQh321fDHaVpSX3tj3vC9zhTsWuBqOE2HHS2eecRG"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"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"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-formfield_0.21.0-canary.b4332e00.0_1610748422728_0.7302436599977884"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.2899691d.0":{"name":"@material/mwc-formfield","version":"0.21.0-canary.2899691d.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=10.0.0-canary.c7c5da28f.0","@material/mwc-base":"0.21.0-canary.2899691d.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-checkbox":"0.21.0-canary.2899691d.0","@material/mwc-radio":"0.21.0-canary.2899691d.0","@material/mwc-switch":"0.21.0-canary.2899691d.0","@material/rtl":"=10.0.0-canary.c7c5da28f.0","@material/theme":"=10.0.0-canary.c7c5da28f.0","@material/typography":"=10.0.0-canary.c7c5da28f.0"},"publishConfig":{"access":"public"},"gitHead":"ad2d9fc5a5b47298a72fb5fe6e82b8c7c9ab8e44","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ad2d9fc5a5b47298a72fb5fe6e82b8c7c9ab8e44/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ad2d9fc5a5b47298a72fb5fe6e82b8c7c9ab8e44/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ad2d9fc5a5b47298a72fb5fe6e82b8c7c9ab8e44/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ad2d9fc5a5b47298a72fb5fe6e82b8c7c9ab8e44/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n|----  | -----------\n| `--mdc-typography-body2-<PROPERTY>` | Styles the typography of the formfield.\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.21.0-canary.2899691d.0","_nodeVersion":"10.23.1","_npmVersion":"lerna/3.20.2/node@v10.23.1+x64 (linux)","dist":{"integrity":"sha512-6jhFdWeYm15O1ZOpeX+DeoxTWVBP0uvsVLtnvYLhOdXfqY1jGBrw4YDoWkB/Z4o7LHMhff7QJJQmpZl4Zl7T1w==","shasum":"5c9dbf8300dd251246bad9b9032a220533de9992","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.21.0-canary.2899691d.0.tgz","fileCount":13,"unpackedSize":40616,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgAkTlCRA9TVsSAnZWagAAAv8P/RaNx0fD1RWhO/OccYdq\nGFbI+uiVTGUJ/uTY/28r0uryOgde7RGBCbtvQp+Y1gEmX3GrhUwBeSw4ohJG\nFOq4u8wpiSRe8Piohlmohv+AslwOiTnmb3ayhUGaCQ+M1J+FlxmqFv/qhPGk\niIxF9BKlK3dpFxrzTXONdywate+5Z+uicq5Tv3kcl9zFFfSdviJx7BGS8NmH\n1IQDWDQXZ16C9a85kmR/vQpql2mC0CD+/v4F0mDhCVTVDsCb5GudDIw1P82G\nuKoT24noVKOc47Gv+Gj++tmVCqM89GnQxt8n1ax4+yCn9mXBeZ0jvMokXUmF\nu93EUpSe8hlQDYmtAvpgVcM2fE5Erwq6k6bI6tjKG0s8Zg09Qum2f4eWZ4GF\nlCphgdH37i5h0jP3/Nnw1N+epWQ1V/oNrARYBhw4uxd4FL7vortgxNd7iijz\naPV/MtuKvjayJUKwvkr6s9/kwT33t5P5rHZ/n0mVZ22MzdYNsBsEP+ZWZWzz\n6W3OyYViUfFHGtkk2meK46Ctjl9Lh9RLUtimmvDzprGIg6zLsW8B8pfk/PIi\n5Xy60H5G3LJghT2lY37bEzIMecKVtaAbFQ1LaHSA9BCXeqCFNgF/UOXItKgg\nd/bG1hjOoMaNy+5Cz0LXDC1R9mSOlIOI697VcM4yi9LOmv6WgzvOgJwyZmQx\nKUNW\r\n=5Y64\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDn72Oj9d42OWaa7xYpIfyJkVPLFwa51Y+8j62c9qPDxAIgJC00rdXRt2olDLNFLvz78t4B96sSIMTtXYXp9KOqiGI="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"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"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-formfield_0.21.0-canary.2899691d.0_1610761445120_0.08059974461252684"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.fe73953b.0":{"name":"@material/mwc-formfield","version":"0.21.0-canary.fe73953b.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=10.0.0-canary.c7c5da28f.0","@material/mwc-base":"0.21.0-canary.fe73953b.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-checkbox":"0.21.0-canary.fe73953b.0","@material/mwc-radio":"0.21.0-canary.fe73953b.0","@material/mwc-switch":"0.21.0-canary.fe73953b.0","@material/rtl":"=10.0.0-canary.c7c5da28f.0","@material/theme":"=10.0.0-canary.c7c5da28f.0","@material/typography":"=10.0.0-canary.c7c5da28f.0"},"publishConfig":{"access":"public"},"gitHead":"2464e59ad6a1d74aed7f8ca3477c1f8d244eb8b9","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2464e59ad6a1d74aed7f8ca3477c1f8d244eb8b9/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2464e59ad6a1d74aed7f8ca3477c1f8d244eb8b9/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2464e59ad6a1d74aed7f8ca3477c1f8d244eb8b9/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2464e59ad6a1d74aed7f8ca3477c1f8d244eb8b9/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n|----  | -----------\n| `--mdc-typography-body2-<PROPERTY>` | Styles the typography of the formfield.\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.21.0-canary.fe73953b.0","_nodeVersion":"10.23.1","_npmVersion":"lerna/3.20.2/node@v10.23.1+x64 (linux)","dist":{"integrity":"sha512-arsQuQWj4tkHQAzCy01dKpLv0uc4n3jHl3iaA6avOB6Qzn5/o2kY9tZPBh9mhRzoseX2CX87qwRDo0TwIVljPw==","shasum":"3b17369d69b16e9c40208c2f9e8327ccedb4cc46","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.21.0-canary.fe73953b.0.tgz","fileCount":13,"unpackedSize":40616,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgBzEWCRA9TVsSAnZWagAAeBsP/07Rru+SiuFS179KhAdO\nSSPJ7OJmd7+k1iqhEnCoNc2DWDHRN2jJP8VDhfgSrEJdaelCInxQ23e/hteM\nnpxgGbcNbDH/R3tnghJRgka4xlGd3Wq1DLWOUyDtKGwoQsBM4dFaEYIQmtRJ\nh7OKK7ZKcsnJ4jBmyJG6UM762+Jw1H0tqRVaQoctsdqcX49DweXs7LwGLf04\nZKlCPcuQS7oNxF8GeAWAQi+3daGA+8jcNK+XMmlQ8ElPBM323QnFPvkBJSLm\netO3EzlNWEAA04Nh1Q/2o+97Yji1ABt8J5G636pl83klPpJjQkjTb9Fo4uwT\njSaUBQiqYbsmjT69glo1QVuDP6l1EQk8igZs3IH8g3H4ENo0fmvUz8266F4K\n94rIeaVYlcxjJYttMpvUTQyB0f6UrJ2uZAY+qaimW183WfwxRuP0QFxKPxTD\nIJ4hgE/+kedxuNgBjThyOh3zgS5ZDxeZYH7enODaMZloNj28Tmni48j/BY+V\nqCXoYGF7oHv3qt1P7+cSHVM5QgxP/8HsRo1RhkuMmtXjR1VIj905PJVV6Y08\nw7+QGr+O7c9F3Eeo3UEkF1yrPtJ4UgHrVIyqB/NzXv3urL7Acccu3/XvuxUu\n7F9EQLuCH3gNv/v/NKsGzxOTGor13aYXonFJobyTpOwf7dkxea9AUjDu/UIV\nI9h5\r\n=julm\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCaNvUYVBxHq3zgD3MMxByND6oY0/I50iFU7mXpTTY+AAIgWm/yB6gcLCOIvMRiyVMe3v4wSy5sqC4sIvaAD3U+dMo="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"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"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-formfield_0.21.0-canary.fe73953b.0_1611084053802_0.3649758230134905"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.d3a16455.0":{"name":"@material/mwc-formfield","version":"0.21.0-canary.d3a16455.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=10.0.0-canary.c7c5da28f.0","@material/mwc-base":"0.21.0-canary.d3a16455.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-checkbox":"0.21.0-canary.d3a16455.0","@material/mwc-radio":"0.21.0-canary.d3a16455.0","@material/mwc-switch":"0.21.0-canary.d3a16455.0","@material/rtl":"=10.0.0-canary.c7c5da28f.0","@material/theme":"=10.0.0-canary.c7c5da28f.0","@material/typography":"=10.0.0-canary.c7c5da28f.0"},"publishConfig":{"access":"public"},"gitHead":"cc074ab80b57efe95502e551eb4d0ce6a153094c","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/cc074ab80b57efe95502e551eb4d0ce6a153094c/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/cc074ab80b57efe95502e551eb4d0ce6a153094c/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/cc074ab80b57efe95502e551eb4d0ce6a153094c/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/cc074ab80b57efe95502e551eb4d0ce6a153094c/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n|----  | -----------\n| `--mdc-typography-body2-<PROPERTY>` | Styles the typography of the formfield.\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.21.0-canary.d3a16455.0","_nodeVersion":"10.23.1","_npmVersion":"lerna/3.20.2/node@v10.23.1+x64 (linux)","dist":{"integrity":"sha512-aSNJ9bt5NZG6bcQkBUPztqcqViWhC8Q/g6LSt4bsvp0ZvORR8rn4YopSGK6tT9HbDz7IsYNXebdA5Y3o3Myomg==","shasum":"75c8a322b4f064aa62014a5828ac15cfae2e74ea","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.21.0-canary.d3a16455.0.tgz","fileCount":13,"unpackedSize":40616,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgBzhUCRA9TVsSAnZWagAA0OUP/3cd8BRaEmLwBo6E95XW\nqLPikt1F/T1w1ltnKQPQRoLbxQmA/TJ63JCTIcI8r8wvFPcxezOpqsfbtrEt\nwhLTaWnqISwISL3D7Ew5F6MkgG/HQaIhwIcOHUb5Vn74GGvFk0hCnWRj+acq\nR56ZW3tdslcC0zzg3Ks9zB8JMEEKp9Lk7bjHx5MCKRXxRud5+cVw4TN6+4hp\n2ZKwNIXTDAMBZdLQ4aZ623q6niO7dvC27uxwbcvGQ1lTese6ybG7QjcMc7aE\nCNE33OdQrRDHkzi92n3MZgoW5225TqTu5PRFKmtJICaiZ4y2Z9G8EvdUXBOu\naz5Mx6TQsN9cYq/dN9Vzf/pxSRdZftz+bzwlJSzyxW/yyw2rbLOVYcv6Lad4\nVkhyVkj4jms9cnjK72Isn0/7ocXMceY7l0d4jOcIfMy2BJ0i8ZH05UtU3O5/\nVHFy9HUnygvlrbmtuYuNONt+KvwlML3mBjS/H0zbag187RMY2V86dFD/N+2h\n0FQbcxu75P3LWmK+6HaRAkIYI9t/XqOAgIQrmNmteh3UcTIsKNbU8b9n3NeP\nknmDPETgrt0cai5gQ4OQtew9pypuvdn1aKB918avxIb/yk+x7w9qnyPe11WE\nEdLESB0yy+jQf31bWn+g/Kyk+T/zXCF7HnjIznPFFsfg34P8qE+zkBhnFYhp\nbyxj\r\n=VNkM\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBpBV7ir8hIq3Ls8MVwCDVtoK2rYDKm04R2l4T/6Ed33AiAjFho8O8nOKYs1wqhxQzYTeYYbc1ptjvkqpzxqkxfn4g=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"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"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-formfield_0.21.0-canary.d3a16455.0_1611085907863_0.10672912878974605"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.597ca1b6.0":{"name":"@material/mwc-formfield","version":"0.21.0-canary.597ca1b6.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=10.0.0-canary.b2faa116a.0","@material/mwc-base":"0.21.0-canary.597ca1b6.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-checkbox":"0.21.0-canary.597ca1b6.0","@material/mwc-radio":"0.21.0-canary.597ca1b6.0","@material/mwc-switch":"0.21.0-canary.597ca1b6.0","@material/rtl":"=10.0.0-canary.b2faa116a.0","@material/theme":"=10.0.0-canary.b2faa116a.0","@material/typography":"=10.0.0-canary.b2faa116a.0"},"publishConfig":{"access":"public"},"gitHead":"2dea4d182145f148cba1edfd7b358ed05bc6c8ea","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2dea4d182145f148cba1edfd7b358ed05bc6c8ea/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2dea4d182145f148cba1edfd7b358ed05bc6c8ea/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2dea4d182145f148cba1edfd7b358ed05bc6c8ea/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2dea4d182145f148cba1edfd7b358ed05bc6c8ea/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n|----  | -----------\n| `--mdc-typography-body2-<PROPERTY>` | Styles the typography of the formfield.\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.21.0-canary.597ca1b6.0","_nodeVersion":"10.23.1","_npmVersion":"lerna/3.20.2/node@v10.23.1+x64 (linux)","dist":{"integrity":"sha512-7DOHcMYSY/q6zUZO2YMyHAJpXZk9Gj/9cmY8h8nTPhnTIJqXA8qepnQ4kCjFr4f+KlrhdhBog/AHpdRn+woetg==","shasum":"ee48272990bdf1c18177e398cc19fee1275f6975","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.21.0-canary.597ca1b6.0.tgz","fileCount":13,"unpackedSize":40616,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgB4BqCRA9TVsSAnZWagAAwJoP/A0aNKefFlpKtD/TU0m4\nGhgpV8GrJQ4MztEcegijvuMKWsyA2AnCnzFJQ3+/y03phiuBAr7QTZSeoqPU\nd00z6a9fzJidkcsGiNT/jXoILQ98aKZuWoxS1mfOSp70jZ/gROnf6No+b5uo\nFtR1/Kx+gpPTr/RkA4HsfmqwgcNQXbTjXq2rO5UCenQjC3IlqEvv15AMkyR2\nx3XSHvr4hJU20RGxKDhqpjoStb0F4EXZ4DUe1qKIyQb098OQSFuItndGOyMr\nAa13tVuTYZpPIf5Tjgip5KKqF3RSrOZpM0qUuDNq7Rgf5Qtp87AA6oYW+hCA\n24CVCinUpblZyqqkSshKZqHu5/35SObxXg/bbeYbMO5jihrFTzHGzRklVhc7\nUqkrHdFHXkPF26EPnSkZhGQ6QJDuZ0SC4b+jzeefw0XKRpOAat+dUe0lqNFg\nWDosdmeR+zulJd8BYA6OOnJummNIc273pqLHg/fnPZMqN6SVA6LHGPWiDmMj\nQxI+jZNDegR2SfNs7wsiJND87b2uiVniqHlv4C88+LVNenMsYgo6kgEmYv62\nu8MUiepjEkZch9BLRy9XiqcYaf7xfVmGkIrIfA3sbpqBF9cBj55h8ykdm+te\nHs8HXsRLglzFmgpy3q9nTkF7t5IjWogydjF6oHtDsG6kXEcaMgUPPxnbLxZw\nEA9g\r\n=cqrB\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGZkzueoUX3tO+PFKSGVFBvnNUVUJ6BuB5Eyg9152kYEAiBrrCS0g6RqzdEpAXwa+V8rK2R/qwuz2xtzmwUE6jp3TQ=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"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"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-formfield_0.21.0-canary.597ca1b6.0_1611104362103_0.994803443967001"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.3c195efe.0":{"name":"@material/mwc-formfield","version":"0.21.0-canary.3c195efe.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=10.0.0-canary.b2faa116a.0","@material/mwc-base":"0.21.0-canary.3c195efe.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-checkbox":"0.21.0-canary.3c195efe.0","@material/mwc-radio":"0.21.0-canary.3c195efe.0","@material/mwc-switch":"0.21.0-canary.3c195efe.0","@material/rtl":"=10.0.0-canary.b2faa116a.0","@material/theme":"=10.0.0-canary.b2faa116a.0","@material/typography":"=10.0.0-canary.b2faa116a.0"},"publishConfig":{"access":"public"},"gitHead":"5832b828afcaa6412dff007228c15a665862a145","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5832b828afcaa6412dff007228c15a665862a145/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5832b828afcaa6412dff007228c15a665862a145/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5832b828afcaa6412dff007228c15a665862a145/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5832b828afcaa6412dff007228c15a665862a145/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n|----  | -----------\n| `--mdc-typography-body2-<PROPERTY>` | Styles the typography of the formfield.\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.21.0-canary.3c195efe.0","_nodeVersion":"10.23.1","_npmVersion":"lerna/3.20.2/node@v10.23.1+x64 (linux)","dist":{"integrity":"sha512-sx6KZpVXHO297nAVv6iuMGW3sLKvO+QdF1jRO9rtcZz2OxhuRX+9hhdfeLlSMGVsIq8/ZOjYnNvo4wcUhQl+rg==","shasum":"48b3cc51224daf59fc70f48f994e7330d179e1f1","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.21.0-canary.3c195efe.0.tgz","fileCount":13,"unpackedSize":40616,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgB47dCRA9TVsSAnZWagAALMcP/1CvFS5HoHnk5HfHg5+p\nzbA+iSHP6WbzwVosQN+U6pbCA5g4CyVqxSVFdXDCXZHznpicngdko15aQ9zr\n24DG6G7bAWWNTleIxC2CCiGnFFjigCAvQ6E9kjxTUD1+8KkMGT7l7QnTPOG6\ncOoTFdee3JCPFY78oF0gBMB4lXjXSm4hyCzdLOic+cJpPRwKfVmoOk4a+fOC\naC8KqgwMwZkYBhSPUWYhZ1JOB8gQwERx+q5qPik361sN7lXeddGFJRikhw5b\nFsWTJ8k/Z1KY3Kt46aw5bb6UGzN7yLkqnDKD3rRCKY+cAqJxKJSSzYysHt/I\nOnSSLDe40L+19f6wf5bBWCfJQnCvDGUiUpf6ei4P5CVhlaY3m3+N28431Zuy\n0AfFTJVKn5BrgfK5SlEoMQWgnD3fT2zQAu9c0vWG9eqVlK6rI+toFkZLjvmS\n+Ecc4ctv1mEyl/0XrS9H/r5U3/3HbdOye5Rj2ki3zJoGP9SlIpVc3bK1dlyd\n3HU3PIfmBcUAOlXVScy0843Ah7Fu7ZlvYKJ/gqPNzMgORNM+zWojm9eaf/N0\na7ckZ2I3ylu3F88xoj2gCpWU09Lx+BGpwndgFuUObak9r4teBiU8dmxvzWpd\n/zL6hzIash9rW6mYxAFprHu66Eu427e3A/wjk4/2grYf6es9tJlgxLWSiwEY\njY62\r\n=6fSp\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBUIWiAS/I3hY1piZ90EILEgEPfmgHrRHRKov0ZpbnhSAiAeQOFHTgxQsSMfrBxLc+jb3PO8QHm7xHqoplm5c3I1mw=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"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"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-formfield_0.21.0-canary.3c195efe.0_1611108060735_0.4537866430976434"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.f7b8755f.0":{"name":"@material/mwc-formfield","version":"0.21.0-canary.f7b8755f.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=10.0.0-canary.0c95c9f7b.0","@material/mwc-base":"0.21.0-canary.f7b8755f.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-checkbox":"0.21.0-canary.f7b8755f.0","@material/mwc-radio":"0.21.0-canary.f7b8755f.0","@material/mwc-switch":"0.21.0-canary.f7b8755f.0","@material/rtl":"=10.0.0-canary.0c95c9f7b.0","@material/theme":"=10.0.0-canary.0c95c9f7b.0","@material/typography":"=10.0.0-canary.0c95c9f7b.0"},"publishConfig":{"access":"public"},"gitHead":"189595c9eb20e25a71796a5720374331d50a7f72","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/189595c9eb20e25a71796a5720374331d50a7f72/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/189595c9eb20e25a71796a5720374331d50a7f72/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/189595c9eb20e25a71796a5720374331d50a7f72/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/189595c9eb20e25a71796a5720374331d50a7f72/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n|----  | -----------\n| `--mdc-typography-body2-<PROPERTY>` | Styles the typography of the formfield.\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.21.0-canary.f7b8755f.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-IzDEsd3tyJNG5sFaYc1E5u2MPapL7ipXLb0fC2ESnY+UHZSSzBSr73GAGr+zNPqZoATTOCUW0HyWqrzHIXzqHA==","shasum":"c4eb1426462a41aeda4e65b3d1b2f0d2ce3d0b25","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.21.0-canary.f7b8755f.0.tgz","fileCount":13,"unpackedSize":40616,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgCJR1CRA9TVsSAnZWagAAz6EP+wXDSuoADrCPf9KZQxae\nfU91GNil2q1K/oSX1Xxu6B+kLJFi4MZPz8hOd7c/2JuICE8Pdce6Pd9I1haW\nSoSEQ/dVi2vurfR9MfNYrJLGcnrKA1Oa73ssasuimAOJMuAtBFhNGXIhOf82\n4LnfVZ3fEMOh8J9wqelcRTRL3oKEHLCSCiiW7dJ37ds6DvdvCppeoexEzVdh\n2c4bbdHUhONnyXCI5JSLbQLTy+E9tYjMiqJ3LbcYkVULS251o3AhWn7+J3HT\nuUZbIXRW6r6i+55KRWd4pbd10XdoMmwkL5FT9/Zf/OBLU2y+G7viPbtDA66u\nV2mSLkpOIGfnKLCR7N06tVqUPyN0xGDJ6ziehvPHFGKboTAv7Pdm3TcFTjl3\n8j8wEkVr1YaMV101kknqOLQhFB6uaX0lzQmgmVZYUYuGMdmtMg4tw0YGaEVY\na7TIn9korkg3Vf6U3koUcf67tymecXImcaypv2yAfpKB6KfqZ6wAM1gjeq7t\nJ4PJjBp0p9LMCEznb4O2Uu1z32EMdmoqiGcoOj9p+KTzlMkf3wJd4paokR/k\nk1WyVT5/cC0tzwgaL8r4wIStnsoSCfGeE62v/wyj82kw8xXlSoFXvwQOacz+\nDxmjxkBUIfpzsaOJ/hV0LjC1VLdr3QgIVt2sSN8qDHQ5g7xo07hHYRiTiCjP\nc69k\r\n=R+V5\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDiXnfUAKUJnScDS99y/XFoUDFcqbvTWRXSCB5zR/VmlAiAt8ak3Fnq/TNbJnGVF56/0wZPQVj3/ua4iNAuAJhKKng=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"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"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-formfield_0.21.0-canary.f7b8755f.0_1611175029537_0.11239244587494612"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.f60de7df.0":{"name":"@material/mwc-formfield","version":"0.21.0-canary.f60de7df.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=10.0.0-canary.2ed2d829b.0","@material/mwc-base":"0.21.0-canary.f60de7df.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-checkbox":"0.21.0-canary.f60de7df.0","@material/mwc-radio":"0.21.0-canary.f60de7df.0","@material/mwc-switch":"0.21.0-canary.f60de7df.0","@material/rtl":"=10.0.0-canary.2ed2d829b.0","@material/theme":"=10.0.0-canary.2ed2d829b.0","@material/typography":"=10.0.0-canary.2ed2d829b.0"},"publishConfig":{"access":"public"},"gitHead":"ada07a353340882b0d087ddf967d399be3009123","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ada07a353340882b0d087ddf967d399be3009123/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ada07a353340882b0d087ddf967d399be3009123/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ada07a353340882b0d087ddf967d399be3009123/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ada07a353340882b0d087ddf967d399be3009123/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n|----  | -----------\n| `--mdc-typography-body2-<PROPERTY>` | Styles the typography of the formfield.\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.21.0-canary.f60de7df.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-NknIJLhYCM9c8ywBhNEbB3F7DLwMImhQp6ZgK+68gHnujR2kcZfLnvpvRxcweMXaGb6aeGqzD4UUo+cJglFzGw==","shasum":"e13972f8a943462c60b1a24a105f1b789bd6b55c","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.21.0-canary.f60de7df.0.tgz","fileCount":13,"unpackedSize":40616,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgCL5tCRA9TVsSAnZWagAAJtEP/1S1aDTF8RncVUbw6I5c\niCMI5mKZ1UdhdRtfcopeP9ov5XOv2H8fxY10e1Nlv1EATbudtuqKI645HzfK\njlzzjcdLFF0Gbfpk3Ono6ex/jbYSt0eue8jk6aZR59Bdc+6GL2aqwpihAcxD\n+eFN0iJaKe5GaYAsJ4YS581Ow/Hop/dKvylgbh1cSz67wyaHvAn1zr+ufSgK\nXsxi6OEgCAERFbY2p2/5XkXJ+hym2+MllG6qcCpbjCmlykRTvIn1ibu/FyKQ\nkK7YppEKh0sp+g1rzvZHQyTZkrpeAhyNNtJaOGHq57j8hgePTgUxYl/8ekDS\nnN4qw5vvE274Pw8NH/SAVTvru6XpZ6YmGhyIpOqOuHx5yXR7IY0eOvo01ndt\nnDJHTbDm989bYPBz7ExjLjPTsMbSX5peyy2lJNXZ6B1WOsXTQMxXuuXX2ZDL\nuweGUuqVeSdY8gg7pkZsDILb+lfZJW1LlfuEy1jw/tIisExEov1LofcSDFeI\nCBHnQE+x1r2g5NuoL2NFvGQJrktSbQx2i5kUSRxRbjQWW/5foNkesIHrqFZn\nHPEFhg/pBSwa9EBnEYH4ubgOreP5p5HjiCYaVoUvlcna4SGidEdvTm05hN4K\npVturQQ9dRYw/ffHEWJsvO7spPmK89AWIq6OHOAUGbkSQmTlqXfqVaC5h0hQ\nnJUZ\r\n=69Gj\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBpPeyDKQ+KKljfmcnk8az5CIdX39+v3BjXCavfsiPuwAiEAsfKhsJJ604dz5xNqUvjvV6auHIyF/jQbE6OB03q5yGo="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"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"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-formfield_0.21.0-canary.f60de7df.0_1611185772781_0.31944246801594134"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.664a2927.0":{"name":"@material/mwc-formfield","version":"0.21.0-canary.664a2927.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=10.0.0-canary.2ed2d829b.0","@material/mwc-base":"0.21.0-canary.664a2927.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-checkbox":"0.21.0-canary.664a2927.0","@material/mwc-radio":"0.21.0-canary.664a2927.0","@material/mwc-switch":"0.21.0-canary.664a2927.0","@material/rtl":"=10.0.0-canary.2ed2d829b.0","@material/theme":"=10.0.0-canary.2ed2d829b.0","@material/typography":"=10.0.0-canary.2ed2d829b.0"},"publishConfig":{"access":"public"},"gitHead":"af2f8cdb8d2e4132b15e0b5a79f060d43a3431d9","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/af2f8cdb8d2e4132b15e0b5a79f060d43a3431d9/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/af2f8cdb8d2e4132b15e0b5a79f060d43a3431d9/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/af2f8cdb8d2e4132b15e0b5a79f060d43a3431d9/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/af2f8cdb8d2e4132b15e0b5a79f060d43a3431d9/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n|----  | -----------\n| `--mdc-typography-body2-<PROPERTY>` | Styles the typography of the formfield.\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.21.0-canary.664a2927.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-S7qfBukAYl6rt8h152cjM+hCEMAldB7tcYXU5QOklstMwLsvZkimW+C6ouRCGLrNoYDwL+zbhIQ6RX7kM2P3EQ==","shasum":"28e3ea3488c2cb117b4dfa636d2770eea7d6918b","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.21.0-canary.664a2927.0.tgz","fileCount":13,"unpackedSize":40616,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgCdNwCRA9TVsSAnZWagAAJh0QAKSnyrXShNR55lfUhCbL\no+kF+ACq2d9Zkk1GDa4fOobUg6Ir2STZ7TeMhTYIO1BJrz084jLmQfK8I5PW\nn14m8bxOrXaIeCnQRw4ZFTbhfgIvc86HIXxROJZTCs3XwmHAZiiaj+J2o0vF\neVP7nOofLJmayNZ9ixK4l81kt/KmqgFDnuj8GZGxcSIt05dpzfDULMLPlfzy\nfQavqDU3AsQRvqK/C52KvCfy8XnY+2EBRAGEHl+EpzqAwmjo+a3JOAb331Zu\nd6HmMC63KcBa1rXCEBWTNT/nww6Ep724EqcqWm/F3Q9SG4j+QP4QZ8IqzgMQ\ngxtJ5irrUHxjuUd3wTpsrKW1PEIUSN/Rmko5NhFiPweUgckctZqXmBIaAdf7\nkB7LbxrZJZ/L5w0k8Q1NZ6xJ/nmJRxKwXtVsZ0QgqvbK+Q58kb3/fUSYgZb4\nuP7Mze4wZ6J3IetxS8hiSyNUgf/1Z5PQXw6ASUVW2iKmz76VT6reR0oLd0wb\nw5I24Ap4y4c8sLKqIv866Mt+3XQ39xiN5oF7nrsrv5ICQ+5uiVZpw3C3hUzr\nds0Nps5ZjtNdQEi1uO+EXIgSOARRSGH6LISpC9tMVrNt5nRZ2A3kmJ00JHz1\nLf93Tm5geaPfLl8jRVUw5IPkE6HPdDgYwRgUxWSrfJibfWcsBlQy95XU4Ow7\niqSs\r\n=VeiL\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFseigAzLg+ko/MDXYBmpy3wLE4AHBGm+sgaXxm7mrnoAiEA17NGh+IpN6QtQ1lFGsMdluYwbflwObl/4P+X7OBcGrY="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"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"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-formfield_0.21.0-canary.664a2927.0_1611256687528_0.8265448273773384"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.a6d312e5.0":{"name":"@material/mwc-formfield","version":"0.21.0-canary.a6d312e5.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=10.0.0-canary.fd61b0476.0","@material/mwc-base":"0.21.0-canary.a6d312e5.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-checkbox":"0.21.0-canary.a6d312e5.0","@material/mwc-radio":"0.21.0-canary.a6d312e5.0","@material/mwc-switch":"0.21.0-canary.a6d312e5.0","@material/rtl":"=10.0.0-canary.fd61b0476.0","@material/theme":"=10.0.0-canary.fd61b0476.0","@material/typography":"=10.0.0-canary.fd61b0476.0"},"publishConfig":{"access":"public"},"gitHead":"c9a270f0f64518469d960de40537a07c4cbaf812","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c9a270f0f64518469d960de40537a07c4cbaf812/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c9a270f0f64518469d960de40537a07c4cbaf812/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c9a270f0f64518469d960de40537a07c4cbaf812/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c9a270f0f64518469d960de40537a07c4cbaf812/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n|----  | -----------\n| `--mdc-typography-body2-<PROPERTY>` | Styles the typography of the formfield.\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.21.0-canary.a6d312e5.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-jIHo2GSXVW9t8TyGDja8TqeC53rJdu1G6ieM5Kd0qNF+36oEwr/9Id2NFSuX0F5X2B8pTj83dX9MLVCQQFC9dg==","shasum":"d58872d9be6e72e78fbaf803c7a2e8e6ddbca4fb","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.21.0-canary.a6d312e5.0.tgz","fileCount":13,"unpackedSize":40616,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgCfZYCRA9TVsSAnZWagAAuGcQAJOMX38rzLZJ8AYl4gBU\nlaCxJUq1TelZftWRHjO5FeENszCvgx8Y+YAvBw+TqUX6i6/X8ASza7muhrNw\nuVCx8PipyV1EpRa96QMJ/l+Hway1yoUeAW0dKofaOERWenXaS5dp3jxDf2GY\nX5SvYVkSYkZubdGxdMS9577PJYb1RJReGhAbVweSJt4mCVWXjlmdndBPl2/s\nrlG7jPpLM1p5d2yPdKhECIXdBia0gz0OXNFARBgLEs3QIpoENE1AlyJQ2pzq\nPjPpkGp8e31bc3We/iCsWrxF39GXvu5ShllIBEgVZuLwIRFzyfagUnQYW5wz\n7TtI5oVN7UKAs76Id856Vo01yegZJK1dXo9E09Wfs5sCiKextfPm5nqlOQKO\nGLXh1AaWXmbF5ByOEq7E5dMQbZW/smac6gPeSd/V2gswjohZIUvCNCYvFn+h\nzQp68i2dBYPAAbc4NaI62XeJ7eUZGdtyQ82bVQDDRE1JMJDe9pqerEg1EGs7\n86FZlwT3ZVt0mrSXLErkXaMdyRoi4vXFy+5b3wc6hhzL2H1aX7BlNJAX6MZH\nSxhalyomljzibkQTI7m09D2s1RA8EFjcwgpF6JEWz7zBiDQ7EcxcN1bUHL/+\nG6vHUETjElUesVz9S1cadH/XKKEV7p7saTWdly+6hQBJdU9Zcag/IidEGJ3k\nb70l\r\n=qpXZ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDBEJwR5RryzIMk4+sJdoXBpIdyqB6NHOduIKsr/HgimQIgRqOrY6IOjwqYD69Zmt1aeGF+QSWradOYyZefJFx0F4Q="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"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"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-formfield_0.21.0-canary.a6d312e5.0_1611265623614_0.9391856920294652"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.027365eb.0":{"name":"@material/mwc-formfield","version":"0.21.0-canary.027365eb.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=10.0.0-canary.07deaec27.0","@material/mwc-base":"0.21.0-canary.027365eb.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-checkbox":"0.21.0-canary.027365eb.0","@material/mwc-radio":"0.21.0-canary.027365eb.0","@material/mwc-switch":"0.21.0-canary.027365eb.0","@material/rtl":"=10.0.0-canary.07deaec27.0","@material/theme":"=10.0.0-canary.07deaec27.0","@material/typography":"=10.0.0-canary.07deaec27.0"},"publishConfig":{"access":"public"},"gitHead":"85e9fc6866aaf5bc83721e8c823275ba9232a536","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/85e9fc6866aaf5bc83721e8c823275ba9232a536/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/85e9fc6866aaf5bc83721e8c823275ba9232a536/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/85e9fc6866aaf5bc83721e8c823275ba9232a536/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/85e9fc6866aaf5bc83721e8c823275ba9232a536/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n|----  | -----------\n| `--mdc-typography-body2-<PROPERTY>` | Styles the typography of the formfield.\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.21.0-canary.027365eb.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-DcDLmBohD6P+agzCmehp5yNG8AtIHPV9hD3Npi03AcLwkMZT8BKHzt+VucDbutEZOdLUa1GJKtNzrVZ8vlLBVA==","shasum":"a859151b9063b991b0c3568e2d25e0fc9c2adf05","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.21.0-canary.027365eb.0.tgz","fileCount":13,"unpackedSize":40616,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgCz52CRA9TVsSAnZWagAARGkQAIbgZpisQnz90tXIO/Pv\nbMI/sLY8naY9tEXVJgYGskw44DjNFU5A7zEwgf6eVs1dMiLy97kNYrzkAxwt\ng2yPrZLNIkppkVvfx2Y+JcGY9bHnTL4mHxdXqv4kKOEyHKQnjyBw3xgnNFf2\nAcBDCO8Z9Vp0vMiHZYuWG5jobwZ/i1tMgMqmlGTnH6IKjVrHDdHFsytz9gtS\nPCLeYNV0WcohM3GMFu5my0FG4NlcsFArx5/krwUphiBrdSxJuOlcuzybqfLd\n33zi6vWZGGQlfvPAHnhShBuh3hJJ9vt+Ki2FaXvpeBfFTRXGYJwdG9DnCtsm\nnsPJGDG0pCifZX3ZKt5m5BF/WWMz28Qz7ry5AdRXetsQVT/i2TrlOTJQKYFL\nzUloT5zJrVaHdQ7iWs/fErFoS1R7a0dMNm3eiwa455nP5UpWMYe5xZj4RzzF\ncXeVgZp0zsu5epV2Avr8A8ErcFmLSeIyHt5b4dH9IbxFydEDBNrqnPw5jHv8\nndnUBHDm5Hp9R5R5m1z2cfhcdEm//UqXktG9UimKdB0toPqhabuCrApv7OsO\nH1K2tbiyBAn4D6LWkVwdkWVOwktSUJrHe8NmwrLoLmuOIFqJvXX3m7bX6R2G\n3Puqo3Wwj76P5YWQsqdY0b7P0Sx59KOyKAcBskMBdRUDQJVaJYdpqU8x9XyS\nnCMU\r\n=24C6\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHMHESn+Q+1xW+QHgrekDlYUM2EF2NrBJfAY5786p1g4AiBuw6SjwG505t4dhobf9pTND0cu//Rbj82QAljFN0BNbw=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"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"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-formfield_0.21.0-canary.027365eb.0_1611349621587_0.8831718391358734"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.7e72b66d.0":{"name":"@material/mwc-formfield","version":"0.21.0-canary.7e72b66d.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=10.0.0-canary.07deaec27.0","@material/mwc-base":"0.21.0-canary.7e72b66d.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-checkbox":"0.21.0-canary.7e72b66d.0","@material/mwc-radio":"0.21.0-canary.7e72b66d.0","@material/mwc-switch":"0.21.0-canary.7e72b66d.0","@material/rtl":"=10.0.0-canary.07deaec27.0","@material/theme":"=10.0.0-canary.07deaec27.0","@material/typography":"=10.0.0-canary.07deaec27.0"},"publishConfig":{"access":"public"},"gitHead":"000cf6108aa08030d7569d4ad30c798e7ebe9da3","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/000cf6108aa08030d7569d4ad30c798e7ebe9da3/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/000cf6108aa08030d7569d4ad30c798e7ebe9da3/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/000cf6108aa08030d7569d4ad30c798e7ebe9da3/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/000cf6108aa08030d7569d4ad30c798e7ebe9da3/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n|----  | -----------\n| `--mdc-typography-body2-<PROPERTY>` | Styles the typography of the formfield.\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.21.0-canary.7e72b66d.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-BDvlf73BJI+1eOFICNrzirzwve+NU1cCe12KhLuphqXuEQekQ2deRLcltkHnE+DSUg9peNLWNw6wPxQhQgcLYA==","shasum":"2e4d6ec368a9dca671779a66b9ee985c4c60f2e7","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.21.0-canary.7e72b66d.0.tgz","fileCount":13,"unpackedSize":40616,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgC18HCRA9TVsSAnZWagAA8xMQAJ1fVEYpI8jDtx81YQwM\nsCdnGSvBk7RsvpYWThkakz3XSEPElrBRvjMSOGcT7bHFcQjeNN2DN/6Lzl3e\n33vge8NulxaELC8VoNheSljvEJxfZDIPV8cuYCmdlp+M5A62EpzSTbrrsBlE\npP5SJJQO0FaSbvSz1nOFHvK8Q1HVBl/g7LSxTHNBxJEIApIf45IGdhf6FtOu\nL2K73tjlt0I9Mn2EYYQUnNs8u7tm6ynbHwA8s5+5aJGULfAtXz/TctcVOwGG\nMAhQ7lsXu8TRWu4SdpaQvUINXHa0Rdlv1fpt9Vg0Yhxs1bsrB+SFEuUS70Bp\nNB/sLwexTptM0Piav1XzTtZJiFEBpRjJ3WVBIge2raUmsPNyKfcuNeZmDBVN\nEF7m1GjoGKoYdcXSyN3c7NMXLqNeY+Sk1b02QMPWLqqm+3vykPbaDET/GYyl\nMtqNamuFqGQbNBNkXlG4ixPMLzM1qYsusP6v5ZytYbfF3+KkRctt+GvBKJFo\nf7HuE/lFIHydYEzbx5iBsD3fK+M5jvzPOwnusYnybtptkpijSyxvTiOBUYGK\nzL9N7KFHFYAO5fZEHmEGAb+NV61o/0+gO8iVbIyHECVWngyv5yRuGkRXWUmU\ncKFMpyMThlNGYWtA+daxJvbGtusMyoE3aAty51Td5621yRtIdsz1egynVseT\nEwBq\r\n=WWix\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGTKpQweFFXALnRGfuhEqDeOWBafPCpgiKiX9fnNmXYQAiARPKb43aJU7dYDMICPcyhnMm4cgZF+I5P8rQ+yMMwjWg=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"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"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-formfield_0.21.0-canary.7e72b66d.0_1611357959301_0.32507058206054706"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.a6d6a1e7.0":{"name":"@material/mwc-formfield","version":"0.21.0-canary.a6d6a1e7.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=10.0.0-canary.07deaec27.0","@material/mwc-base":"0.21.0-canary.a6d6a1e7.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-checkbox":"0.21.0-canary.a6d6a1e7.0","@material/mwc-radio":"0.21.0-canary.a6d6a1e7.0","@material/mwc-switch":"0.21.0-canary.a6d6a1e7.0","@material/rtl":"=10.0.0-canary.07deaec27.0","@material/theme":"=10.0.0-canary.07deaec27.0","@material/typography":"=10.0.0-canary.07deaec27.0"},"publishConfig":{"access":"public"},"gitHead":"24a3d6e567ad7ea6c29b40c2088121baec3a5fc3","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/24a3d6e567ad7ea6c29b40c2088121baec3a5fc3/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/24a3d6e567ad7ea6c29b40c2088121baec3a5fc3/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/24a3d6e567ad7ea6c29b40c2088121baec3a5fc3/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/24a3d6e567ad7ea6c29b40c2088121baec3a5fc3/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n|----  | -----------\n| `--mdc-typography-body2-<PROPERTY>` | Styles the typography of the formfield.\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.21.0-canary.a6d6a1e7.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-3UIehYJTnLj8PkSMKBFu7NlTADoQRk5iVSMFGviAPM3AMmzYD0SEkYab2Nmn6BEy5iLJ0SsvvDPXshYPhzDa/w==","shasum":"82c7acc15a5e4a73f263ced0de529f6bf5835b0e","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.21.0-canary.a6d6a1e7.0.tgz","fileCount":13,"unpackedSize":40616,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgC2CECRA9TVsSAnZWagAAC4EQAIPVw5LzZGksccoidFi8\nxNDNLssgSrObvkjw0aNKMgOA8DyXXJtnvbQeg0mOl1sjjrOoaVp/mgci8TxL\nxu40DHxhbObXq8rTNZv5YuLgX6hIq91OsGVT66vfox6UbQcTHIeIFL5sCdsz\nCB+eI0z/+u+XBEaesoY5z1wM9bCZRRDB1st5Bn7VY8Khw34vMRKA9mrWYEqK\ncptfALqeebF+Jg/IRcYGSK5tPE9CrXTeDZ0t7c+4WXxa18EmmEHEkUh4EJLR\n0z9jnoghEr1slgRztAYpjWKJPtYsc1e37Yv3YRtcZ1dVrk6u0oR0rL35KFLA\nsxkFMr1eZy08sU//rgNxpcxhdpoj5CE1DbcSSU/INiSLIf1qNqFXfVTD5BLf\nCUkwEXHZsphUp9n03WBx5Pw1sDoj6AsR4I3ATdxozeruqKHpSNt8HbDJ3hn6\nw1v6AitPfixXGXflGslCTQZ3fre1Pm7GefyKFO9sAU4f+Zkb1KPFFRserxBh\nEfWmeyXD1xehUvD0i61D9JlZEtGFo7/SAYX4XHrWIbXSltx6V5YCvQieN9F/\npuDZdLvDA/G2YuCP/pr42OlNnqt/9Q95KPROWSrf+QskC9OBIe7SzKKn7EOO\nfw3/wGN1g1Z/zJej9Eoz6dg3hprWij6vNz/NZkFXnTRcee00F14tORT//jj2\nglo9\r\n=u11o\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCo9qwJxw+nmw4ju7WoXNTBGz4FPopiYOPBw7zxwGGXNAIhAOGMIc3wUFgSBChS4jcg4tHDl8XGDK04tkGKeT+2mdq4"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"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"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-formfield_0.21.0-canary.a6d6a1e7.0_1611358339604_0.8141470898760448"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.b95fe100.0":{"name":"@material/mwc-formfield","version":"0.21.0-canary.b95fe100.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=10.0.0-canary.07deaec27.0","@material/mwc-base":"0.21.0-canary.b95fe100.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-checkbox":"0.21.0-canary.b95fe100.0","@material/mwc-radio":"0.21.0-canary.b95fe100.0","@material/mwc-switch":"0.21.0-canary.b95fe100.0","@material/rtl":"=10.0.0-canary.07deaec27.0","@material/theme":"=10.0.0-canary.07deaec27.0","@material/typography":"=10.0.0-canary.07deaec27.0"},"publishConfig":{"access":"public"},"gitHead":"229d3b172620cbdd5deae4cb60852f0ad2d4671e","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/229d3b172620cbdd5deae4cb60852f0ad2d4671e/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/229d3b172620cbdd5deae4cb60852f0ad2d4671e/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/229d3b172620cbdd5deae4cb60852f0ad2d4671e/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/229d3b172620cbdd5deae4cb60852f0ad2d4671e/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n|----  | -----------\n| `--mdc-typography-body2-<PROPERTY>` | Styles the typography of the formfield.\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.21.0-canary.b95fe100.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.22.1/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-fgdKI+nEBIQEMAwdunAvnFuTf3vxY9JHXtZ3kboijUSk8JXyJno0qShqTZyiarbKSCtX+4f2WT77Z24K/V3MoQ==","shasum":"9f9df2f905200ff53649767a611caca3507f6529","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.21.0-canary.b95fe100.0.tgz","fileCount":13,"unpackedSize":40616,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgC2UACRA9TVsSAnZWagAAa18P/22wWa1U6zD5+RDSP3hS\nA0cEIhURxhwyFf9vTv0mxWZgyEj3nJ5zo2XEHlZ7+gHlx36SHSsTxxRuR0qJ\nRmrzqhAB+6I51aC1OETd8vxoztk1OsR7fURzvT/nDKRgNGDB928qtZyYQPsj\nvCX3WAdU82ySL1flZANzx7GhLl/oj2TXNMRHHLqhLbsF9PMa6R6WEwoTFJbS\nkx43jvaYvwjBeHLMpWk2DX2h5sVWEXmOTbtU32GV92unJNRGlaQU4X2r08Gr\nfL5NACyL7xW2vTkxHNAGrfM+BvDknN/YWjkBFuUfzg+pq+XH09hgkS05rqMK\nnZ3KTv2j3r8zemPLnLzST9lNhkCDgaiSZMrNFlvZNjxW573j9eKjqW/zMROv\nM3jViw+3oSybnVdszqNjykurNBWNwo3u/d+nfBeJL9iPaqE23rzzQ8hYvvir\nZSmr+TdkUv+ScdfxFDko5vlLGYRepke4TGvwY2LYhmwX4d57exFNjYXyZcv0\nwiyEWQA6wSJk3fYsbge48oF8sGXfU87z1gDgTrv4iO+ilL9aDx7J2z2k+UMK\n9WPJ6HPD+n8e7Wrwv2+STwwW8iYcO1GpT0XQB+Pr3WESk2HW/WMSnW+dDcSs\njvNuQjd+cgudhorJpDQtf56Gaqw1ic4sMGRKzOFGv3cslhGzM+NZvWYOYxmO\nL9VP\r\n=xk8j\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHH4r0ZxNg+3EdRE5FeOfssLrEqP67YsiAhkMSLZ8FptAiEA8VnwFqzIjhGaU7w/Eehl9YHvoDYmzOZ7WDSokAxlnCw="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"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"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-formfield_0.21.0-canary.b95fe100.0_1611359487720_0.8988253752024733"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.c8797192.0":{"name":"@material/mwc-formfield","version":"0.21.0-canary.c8797192.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=10.0.0-canary.b9adb7a0f.0","@material/mwc-base":"0.21.0-canary.c8797192.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-checkbox":"0.21.0-canary.c8797192.0","@material/mwc-radio":"0.21.0-canary.c8797192.0","@material/mwc-switch":"0.21.0-canary.c8797192.0","@material/rtl":"=10.0.0-canary.b9adb7a0f.0","@material/theme":"=10.0.0-canary.b9adb7a0f.0","@material/typography":"=10.0.0-canary.b9adb7a0f.0"},"publishConfig":{"access":"public"},"gitHead":"42b37fcb3c5c8e4488b44daf72e5e374bf0e2e75","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/42b37fcb3c5c8e4488b44daf72e5e374bf0e2e75/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/42b37fcb3c5c8e4488b44daf72e5e374bf0e2e75/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/42b37fcb3c5c8e4488b44daf72e5e374bf0e2e75/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/42b37fcb3c5c8e4488b44daf72e5e374bf0e2e75/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n|----  | -----------\n| `--mdc-typography-body2-<PROPERTY>` | Styles the typography of the formfield.\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.21.0-canary.c8797192.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.22.1/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-mClm8ZIkxEi4tQU/HLbEUdkYxISxc2fC2w0erjXxF69fcikHxxmxcbk9WIPM8OHF6JuBPJI5QXsEPub5C7r/8A==","shasum":"a109a103d1c135666e49e7e00464729f3709c173","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.21.0-canary.c8797192.0.tgz","fileCount":13,"unpackedSize":40616,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgC2iaCRA9TVsSAnZWagAAxaQP/A1efos/7LKPwxhPCa/t\nYYetAD/5OKzjf5tbXp1slmFMbEYr6P5qjAH0At9zs0/c4UjEu81HtBpx8cuJ\nby2LJzcz/brV/vWE5EDMd2F4LQuQ0OQeGmr7DO8shLvaJ7LkX3/cTfV/Vxyo\nGpwV/E6/3wUmnUqcWYZhQiXz+koHeXfHPB64eGrKz9QKAfU8lmqWiMlhOOO2\necygLzLGXTNKWVtmYvPu0FSm0iXFNliDtJwctz6lNJvkLBsixX8ADSiZrW+p\nSMKMj6CtzTk3p11/RZPCsVgJ5/JJx1U+sylBBA9UDnKJvkASyJM1ynGeNFdy\nk4Dcar7bhaeg2G5pz+2KYiA/jWAQFiPKq0sR39Qo65JQYppvnMM2kgK1gF9n\nnSYH0RK/r6lZEZ6OddzpOZix89tkwD8lIc1FHD7l/eWEqxxHXVPktjKzSHjG\nxrqNy3Lo4+s361eNbjAuX+DCkzAxgtoSs/N/VzE28SzjTGWrL5glmpGvQGwu\nyUmti4T4Evp47cCx7cVDIyBkH/rHQ1qzX2LPMHQ7KJ6jLjZhqrBo5bzelpfW\n5vxylWeq2Wm6r++pKeCH3GaX1TUEEA6b57qWmaEMqoQZtTI0pqEsDhwDZ8h2\nsqupgngX3We6XFU2bISIMltDbNAglPA/DSe7kl2dnHEEqa2cmNnm/S5k7Mfl\nCOaO\r\n=du6F\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD1JKY4Z+GRSmY5HA9IW57UHkNdOFODTx7f65LpW2X0BAIhAJsHiEAjQOfS2g2hNPhYwqFtXirGKi53cYyW0gSSFE+v"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"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"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-formfield_0.21.0-canary.c8797192.0_1611360410232_0.0325540440832599"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.946f5563.0":{"name":"@material/mwc-formfield","version":"0.21.0-canary.946f5563.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=10.0.0-canary.b9adb7a0f.0","@material/mwc-base":"0.21.0-canary.946f5563.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-checkbox":"0.21.0-canary.946f5563.0","@material/mwc-radio":"0.21.0-canary.946f5563.0","@material/mwc-switch":"0.21.0-canary.946f5563.0","@material/rtl":"=10.0.0-canary.b9adb7a0f.0","@material/theme":"=10.0.0-canary.b9adb7a0f.0","@material/typography":"=10.0.0-canary.b9adb7a0f.0"},"publishConfig":{"access":"public"},"gitHead":"56b8a23ccbe326cdce0b3b9f5d1fd5c5f5f68f91","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/56b8a23ccbe326cdce0b3b9f5d1fd5c5f5f68f91/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/56b8a23ccbe326cdce0b3b9f5d1fd5c5f5f68f91/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/56b8a23ccbe326cdce0b3b9f5d1fd5c5f5f68f91/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/56b8a23ccbe326cdce0b3b9f5d1fd5c5f5f68f91/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n|----  | -----------\n| `--mdc-typography-body2-<PROPERTY>` | Styles the typography of the formfield.\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.21.0-canary.946f5563.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.22.1/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-bmW1a7nbFgHmFNLrZC46Yoeoug4v4krdVT/tapNR/+2jUhEVIGDuI7uj/zws4+3NK1J5o3RppL1WD1o/sEs6qw==","shasum":"30d89aee273a0541e22a334ca6d92b3776d0b1bc","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.21.0-canary.946f5563.0.tgz","fileCount":13,"unpackedSize":40616,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgC3EUCRA9TVsSAnZWagAAU14P/2hnkLXZhUb58NHsH2l5\n/jmw/b/XI8K6LNJ2pvwZaogD8bncHWB8kVCSPRu/zt04l3zdgSN01cc5MDS1\nHja5jHYgLlisvICi2R8Nszao1G7N8eEa8ox4vK7VilZ5xefvp5Db8WYnMJ9S\nb5NKUj6J3x1t1V2fRJr5UE0YI+cl0W6qpYO6clY8ohbcSMueTSRbCgXo+0yz\nSZTFQKbCSxCoLyGSl8hNamtd4+mTVc9sRrx4pC3x4oiCT6reV0qphA5VKQaJ\nk1gxhiM2BTyz7O/+6VSUmo3BiB93WnfJzSUiv9LLYipArfIA/BMcu3dauB3+\n5hShFgl1lHtvYQQTQoUm5I+cFV7/wjTpzggOQQagxX5Pi9A3eqFCC4SWPir5\nfr9euYxKMppjKmCGr3ZyBEVJk9kFMmJcL1CzZu5v8yxc69MR5KkDn1yofGwE\nd8Uw1Qvp6vQl/wN5JiDf4gu8gA9grbaxYt7Cymg9+0iS+ZFrgard+o2DKnXD\nIgQPOUT/teIs/q5cmSb039di8/Xh2t3qjPyhqMNEEw918R/YC31IpY2Bi1m5\nurh6ikMBXcn7b7sQ0gBdi3H1Sw/RQO3pdi/UQ5EIPVOGLYglYnaIEconbiwU\nm5WxSvxjzdzGKlg0I86sTZbempugOJhU7QcUwV2uNmGJ+cc6iza9MQhhcTcd\nD1qJ\r\n=j6AD\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDvUm0SDW6aQr/POICB6OFA2SR/Oa3/1N1jpwjrmx6ZHwIhAKGUaPzD7/J+rjwvgA43RqAgScmq1hT93s1riPNtvl2I"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"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"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-formfield_0.21.0-canary.946f5563.0_1611362580247_0.13993193436716722"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.43664f0e.0":{"name":"@material/mwc-formfield","version":"0.21.0-canary.43664f0e.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=10.0.0-canary.b9adb7a0f.0","@material/mwc-base":"0.21.0-canary.43664f0e.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-checkbox":"0.21.0-canary.43664f0e.0","@material/mwc-radio":"0.21.0-canary.43664f0e.0","@material/mwc-switch":"0.21.0-canary.43664f0e.0","@material/rtl":"=10.0.0-canary.b9adb7a0f.0","@material/theme":"=10.0.0-canary.b9adb7a0f.0","@material/typography":"=10.0.0-canary.b9adb7a0f.0"},"publishConfig":{"access":"public"},"gitHead":"62b7e6f595b2e13e2e57bd8f8f56ec11405ee0f5","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/62b7e6f595b2e13e2e57bd8f8f56ec11405ee0f5/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/62b7e6f595b2e13e2e57bd8f8f56ec11405ee0f5/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/62b7e6f595b2e13e2e57bd8f8f56ec11405ee0f5/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/62b7e6f595b2e13e2e57bd8f8f56ec11405ee0f5/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n|----  | -----------\n| `--mdc-typography-body2-<PROPERTY>` | Styles the typography of the formfield.\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.21.0-canary.43664f0e.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.22.1/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-pZz/TFi16HdoQ7+pK2VEqQT7F1rgDEsEg60ex9qFq0fwwLAxVYx+qBxqBT8wumn1EP/5Alpje8EyBADPa6c5aw==","shasum":"917bd09e7724d11a3ffc488d472c143fe986241b","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.21.0-canary.43664f0e.0.tgz","fileCount":13,"unpackedSize":40616,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgD0ijCRA9TVsSAnZWagAA5zUP/j8wDKaV7+yZbI4whERo\nZaT2ivId0fba8SCPOUnFWt9hAXw2pTLf2NI20vbZmoNVMNgEeiylPZ+RcwDY\nQ/DKOcK+01+n0VHHFYPvb5s51MEPeEaI8N/qYAIw2niHBIK59AfIAWB95tdx\nhXuQrIg73f6z5PXlhjEJkSru1stnwenGr37y5sgqsBL/QtjaZQY3MyHWNoxH\n/ngzQ0rX3JI/jErkWTcRKI0J3b0rOUSS0zua/qd01fEkpAzdfqSCdU/pE+WA\nPuKV1uPWMvHevlxnPuPRoiaeBMFA/0c7bVaGOgEFMl6rrufJvamYXkG6RHde\nW/NQe7ULgNsoMhHKEbF3zzGzsM4Y6DK/f/AiR+93cRISmfWYG7PZtKNitE8u\np44vO+xhoMiX4uYI5umnhedgqs7W/Ucasah4rkMD4HW6jSZXEP7pL+cy9kiw\npKwuOgAYgLMDKPRCALDpWX/EZRNPttcR52PJ8ugliV2lI61cNvkh0/oScCSr\nTyZrvHYLU+qriuhqTT6IP9wJDv5eA0EtoYHGJmfv/ACHxFSajv2jaXEe5h8P\nFWSgD8bN1nYKSPXJtPkBOCcFHQFUUiFcsq3EkC+AONr++oRykYrjR6nf9c2+\nXyNay+yr1UfAU8XKXHXfuvPqEIVpRAoTZc7BXwwLhYuCX85hCWG+qKA8Nhj6\nhmcG\r\n=Oh7v\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIApsSqEuWLs/4hYM5qeioTMma6+Vpgb3jnrSfVVXytWzAiA3dcEd2JIhfvVZO5bKe2jHUPK6hJLT8ZP9XbaogJI4Tw=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"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"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-formfield_0.21.0-canary.43664f0e.0_1611614371365_0.653152369096472"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.2e769e3c.0":{"name":"@material/mwc-formfield","version":"0.21.0-canary.2e769e3c.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=10.0.0-canary.b9adb7a0f.0","@material/mwc-base":"0.21.0-canary.2e769e3c.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-checkbox":"0.21.0-canary.2e769e3c.0","@material/mwc-radio":"0.21.0-canary.2e769e3c.0","@material/mwc-switch":"0.21.0-canary.2e769e3c.0","@material/rtl":"=10.0.0-canary.b9adb7a0f.0","@material/theme":"=10.0.0-canary.b9adb7a0f.0","@material/typography":"=10.0.0-canary.b9adb7a0f.0"},"publishConfig":{"access":"public"},"gitHead":"e3a3fae1109be58444840f6099c0f87c3966367d","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e3a3fae1109be58444840f6099c0f87c3966367d/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e3a3fae1109be58444840f6099c0f87c3966367d/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e3a3fae1109be58444840f6099c0f87c3966367d/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e3a3fae1109be58444840f6099c0f87c3966367d/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n|----  | -----------\n| `--mdc-typography-body2-<PROPERTY>` | Styles the typography of the formfield.\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.21.0-canary.2e769e3c.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.22.1/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-CPBHi1hXEudAhBv/BkIAWWE/ykLC8MS7Pj+oNMSk8vf1Zxqs2rBIqnyPqwIXkokwtgmyMrWNuboYB2lpCixekQ==","shasum":"56b08c23d5ca8d8e007ab26fd16c770a15dd0003","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.21.0-canary.2e769e3c.0.tgz","fileCount":13,"unpackedSize":40620,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgD1zbCRA9TVsSAnZWagAA07oP/2lcpZ5DN+ahpu84J7Pl\nwog6HqPTtICxvRfDPAACMKBp50RDt8TGZCiH/p1Juu0eWJqcOfLTwNIqIYbO\nterHxC9rr1DC72/cv/FynsPfuC2CjJFHwL505Ne8nK51Z4md3Y4L32ulth4P\njzCTPKVa/la88O7YikZq8rtE3GujDaqimL62jdcwKmVUs+bNw9fxIA6dXa6G\nqc+WdjMKuN5kVHbiC6whFV3RLH4ZDYLcvAEsDWlCAaxZizZ6hnH9Lujc8SPp\nFH8jRM2tihwVN3/32BefYM3Ot5RI6wVaHusFrmS6miPoU5dszpWVpVcws5DI\nVXjQ9N/lw+Mng+Xcxy01eQNaWmR2XpJVhLlXjfryYSBTBMNM06w60nL+kuUd\na4lh/N6Ip1yl4CBSRLrKuhbwGXQmiXA4Npplr11PHLjlhN2uvWrXuvkei9yk\n00GEJA6cHeYOtWPKzdC/2EdN5RPycYOH8paHgnVft117IRW8rEQvRLKf7am0\n39zKHL6gXKKfbZ2Jt07v9ZvE/5E9XY9zLXVJ2UsA5f5WyUxTlsGkTRgZAZyd\nHKwR9wX2HBcVlArjJXUv324YyJwGThtrIeZ2+qdcD1gXmackqYb8mSRMZfe9\n2Zpdh3c4IXAbKjeIFH2XM7zuI8M5Le6e/tEnPTxJd13/aKw/kOkdmHMGfmGJ\njlVX\r\n=rd0G\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC0Yys9emcqms1Wee9gwcA6pmDApa2Ej/Xm86xioEOzcQIgXB1lAZ6PGj0nvQ0LiOjnwcsbjCs4QVUR14dRZqzRQ3Y="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"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"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-formfield_0.21.0-canary.2e769e3c.0_1611619546661_0.7603304859294615"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.14e01610.0":{"name":"@material/mwc-formfield","version":"0.21.0-canary.14e01610.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=10.0.0-canary.96878e1d0.0","@material/mwc-base":"0.21.0-canary.14e01610.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-checkbox":"0.21.0-canary.14e01610.0","@material/mwc-radio":"0.21.0-canary.14e01610.0","@material/mwc-switch":"0.21.0-canary.14e01610.0","@material/rtl":"=10.0.0-canary.96878e1d0.0","@material/theme":"=10.0.0-canary.96878e1d0.0","@material/typography":"=10.0.0-canary.96878e1d0.0"},"publishConfig":{"access":"public"},"gitHead":"0794659aea627aa04b2ec37e3f0e8cd9d976ae8a","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0794659aea627aa04b2ec37e3f0e8cd9d976ae8a/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0794659aea627aa04b2ec37e3f0e8cd9d976ae8a/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0794659aea627aa04b2ec37e3f0e8cd9d976ae8a/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0794659aea627aa04b2ec37e3f0e8cd9d976ae8a/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n|----  | -----------\n| `--mdc-typography-body2-<PROPERTY>` | Styles the typography of the formfield.\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.21.0-canary.14e01610.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.22.1/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-zr94x7VUL5HBvDBXe6G/oOS2tvkSIVB565OIff8nIZC9NrYat4uU6U1QvEO+/U7AzIB6oRgkmHf8v7sKpgsW9g==","shasum":"2ac5c140875c840e9d53932f8a6266a3c9473831","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.21.0-canary.14e01610.0.tgz","fileCount":13,"unpackedSize":40620,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgEcQkCRA9TVsSAnZWagAAR8MP+gIMycIzNnx1AhK/qduN\nkG+ACzGmPbBYT+MvPbCZr28DyzNzlWw7PaCPzaLQVQW7objHP6IdnqDR9eCa\ncPlMoLRDX3AuY82itrCP645BHEtFylbpWoVfRDtQWHVpMX9b/hF1OKOAx/vS\nItCeITi9gWxl8qxnYRCWqtFeB7uS4uOyD1ssy6JP9qyrfKAxothAXWhB+RsE\n4C2SB1OIzBhixM7zVFGqLtqPR6AJJN4JTyY90eU6c8jqXujYMP/mvsvAsGPc\n5GIgoYuoFN/f9qNDEjMcM1z0W7mz0qzRSCyq3mp8aF3gDZJumeQnIa78mjFr\nlNQaSw9brADJyo74wn04d6Kp+zep4rG3nnx7XHyvp8NEwf8h2S71oYY72bL+\nH5WlniG/sfUMKfC/gVrS3cAKW+4LVcq+fH5YYLbtOdJuugyHM36/O2Dwep81\ntAWGf/CqRgUBimZRbzAYPZ/tWCok7r0Zlx84Qp1sFce0z/JowUkpY13bNCZe\nbpU3c86T+XY1XsXXmO9Z+sC4eCeiG6w6dEkclYegME2oPM2vjIkjAGXAwvaz\nr0uTLy3wT8GG5o2mluTDNgYpwgJ6t+gUm3YBtqU2wLE3EHAlSOw6rwSiaPZj\nv0pH7TY+TyuC0m7dems6jZp0S7EcLMZCA/fvA7q1MMyl+xdAuX1ASHXNpblE\nRyVT\r\n=k1Mr\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD3yCKrfy7ztA3IqPpQ3uXQ0z39DNvlG/aWVLyqaZ1jqQIhANzCC/3ENF2/CPKhm1DxOmX7TmH0J/JiJyVR3O7ScJZX"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"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"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-formfield_0.21.0-canary.14e01610.0_1611777060055_0.3680429909111351"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.5de00c1b.0":{"name":"@material/mwc-formfield","version":"0.21.0-canary.5de00c1b.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=10.0.0-canary.96878e1d0.0","@material/mwc-base":"0.21.0-canary.5de00c1b.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-checkbox":"0.21.0-canary.5de00c1b.0","@material/mwc-radio":"0.21.0-canary.5de00c1b.0","@material/mwc-switch":"0.21.0-canary.5de00c1b.0","@material/rtl":"=10.0.0-canary.96878e1d0.0","@material/theme":"=10.0.0-canary.96878e1d0.0","@material/typography":"=10.0.0-canary.96878e1d0.0"},"publishConfig":{"access":"public"},"gitHead":"65f40b8130ec795f2a349c0699be5b3038a9c32e","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/65f40b8130ec795f2a349c0699be5b3038a9c32e/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/65f40b8130ec795f2a349c0699be5b3038a9c32e/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/65f40b8130ec795f2a349c0699be5b3038a9c32e/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/65f40b8130ec795f2a349c0699be5b3038a9c32e/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n|----  | -----------\n| `--mdc-typography-body2-<PROPERTY>` | Styles the typography of the formfield.\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.21.0-canary.5de00c1b.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.22.1/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-gnZXFwB9/QxgYIHFOfvpMlPKkdY4qEZBbKKk/p+I8lnsQi37FRr8cdDRrGElPktGmLiDsQveb+YjybUpiF2jPw==","shasum":"b356823ad06534226da97580e2d9042b4044350f","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.21.0-canary.5de00c1b.0.tgz","fileCount":13,"unpackedSize":40620,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgEcooCRA9TVsSAnZWagAANU8P/0/wp8TTYRv8bmpczxIY\n8V2m4t4A2IfgtTZYalvEBusbz3xuejPp+gHzl5+bqQoHB3UzcYC11wi5kZBR\nz1/xBI8djjMFpaoSD7Zg4AQBS3C7JMRaN/fi0C1mDbG5mSA2TV9rpxrNrKEs\nt8xdxW7cBGQ1Yhbc9jMHndZsK85xzjOfnDDX3RFixI8eAC23gRPBXM8me1cL\nN6OaVDF6r5e+/KXunbRLKFRIlaH5UR5TtRA/5VgNqXGKapL/PjsCNz5joSlL\nAC2EZvZ9AHN8EvJau7NGckILwnaCZvJLG9U08OE4RnRAXRNiM+/3h0PCGid9\nY80fMJ2abY4h3LxQedcWBhxipSG7my7NrCKq+TTx3I+wAHbUO8M5hLdy0CNp\n9d4viA+CLoVhU3spr5VsMItuzR/R+rlGY44Ig3NkRXnqks0D4Or+jWGgpBVG\num3dSpsxjb0gfMbI8USrqVVEZ/rRiOpJ5QngrNHik/bofGMByDz9LpOT7IiO\niQH1gf3wkxqQ0i4Ibm8Ase+VhMOlyk2Khq/OhbdI7WyJO5D87JW1TyzaOriU\nxLnbb6WB9gDS3EZtCFpn3ROxlvvyzUL2AA46+ZF5qWbTR21WhkF+czWn96//\npwAsWQoz0ifz5Jh2tUXt+v8aZ7VRq8x2+7068Yb7TbngWFtqf0klgrhN7ZNQ\nbIAR\r\n=5LUh\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDPUsnFvmeNXJ6yDz6xsx7Zxxctzqp//SCstTbcX1yaMQIgIT121HDNZ+TDwZRxZOEKSJWLjBQiHEcJ6engm2TMZRw="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"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"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-formfield_0.21.0-canary.5de00c1b.0_1611778600281_0.9727835978276598"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.5a328336.0":{"name":"@material/mwc-formfield","version":"0.21.0-canary.5a328336.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=10.0.0-canary.96878e1d0.0","@material/mwc-base":"0.21.0-canary.5a328336.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-checkbox":"0.21.0-canary.5a328336.0","@material/mwc-radio":"0.21.0-canary.5a328336.0","@material/mwc-switch":"0.21.0-canary.5a328336.0","@material/rtl":"=10.0.0-canary.96878e1d0.0","@material/theme":"=10.0.0-canary.96878e1d0.0","@material/typography":"=10.0.0-canary.96878e1d0.0"},"publishConfig":{"access":"public"},"gitHead":"d5547f58c69336881e54d7463a7f7d92a04b53c7","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d5547f58c69336881e54d7463a7f7d92a04b53c7/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d5547f58c69336881e54d7463a7f7d92a04b53c7/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d5547f58c69336881e54d7463a7f7d92a04b53c7/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d5547f58c69336881e54d7463a7f7d92a04b53c7/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n|----  | -----------\n| `--mdc-typography-body2-<PROPERTY>` | Styles the typography of the formfield.\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.21.0-canary.5a328336.0","_nodeVersion":"10.23.1","_npmVersion":"lerna/3.22.1/node@v10.23.1+x64 (linux)","dist":{"integrity":"sha512-SLKY7jryZNZOE6G3ztgeWxfPagbL+Sxmb5tey+vtlcLXdEh4As9LBT4pvv5XvoLdmdzrDAUGASlgA65fjTZITQ==","shasum":"6142502434e25fdf5065dec7e352df288e16af5b","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.21.0-canary.5a328336.0.tgz","fileCount":13,"unpackedSize":40620,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgExZkCRA9TVsSAnZWagAAvXYP/11jj8l3+kzfp0wZ9ndG\n5wOHNP44UzJPNHchLMprb5UdIXTlBTpDbC77Qn+d4fl4IpSW42qhQCBYblPu\n9Rps2eOL5xFC1ljsbgJVUh3mWJPLEvv5q/3+ErWuaLeKqUwGYfSqM4JWrkZT\nY3HcTccHb5MJDqoGL1iSaMmfzmwIWcGGkOhijvKP8eZF1WL6X5s5C0I4PGjF\nIojc14u7mCMAajvy/kBCzy4dyllZJf6hfWlAX83E/c8WK9VYpoxNkPKCWwQX\nJki8OYf8B1hsFrQTTSeNkHsMqR5XAy1dUIQevQu//BltTsE+0okbFebuK6iY\nWP2GkUugGD+mfhJT7DTQNorweq4/bW6f/VLU0AihVDRpWX6R9spxCbnKQxLI\n2j2RjwkFDR1sSrEYRXBEDWe27MHFjHWvhg3isJuua02r1UwazNaxmiMm8ZFl\n/h2f3VOmaiqQ+g0Nqx169P1BmDAjydkKI33nYPdc+IinR2b+uYm6I0Y6YeuM\n9ZdhkoBhMAaPufRDxh3+ShvFxDfeOvw6vUnnUr0aLLutbdI+6gdIuJ1dT1Jo\nEF6lz1b8/X0lqbOm4vPfpREIUwhmCCFIIF5stgRzTnmFrJecLXthdV7QfH7Q\nQUSuee1rIVgQ5vw1hS7gpU3AlYbypLm9CV9/uJsRhvm6Xqawwem5A0AUdfvV\nr3C8\r\n=RPYv\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHXE3AUF/zmsQKmkqXNp7d1QU76/Pm1J5QyfsezcoqV3AiEAk6tk0mtvjaVWN+d5EP+AqcavuH8r3xoqJv2zdevxnVU="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"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"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-formfield_0.21.0-canary.5a328336.0_1611863651766_0.844755286996014"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.533b1251.0":{"name":"@material/mwc-formfield","version":"0.21.0-canary.533b1251.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=10.0.0-canary.96878e1d0.0","@material/mwc-base":"0.21.0-canary.533b1251.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-checkbox":"0.21.0-canary.533b1251.0","@material/mwc-radio":"0.21.0-canary.533b1251.0","@material/mwc-switch":"0.21.0-canary.533b1251.0","@material/rtl":"=10.0.0-canary.96878e1d0.0","@material/theme":"=10.0.0-canary.96878e1d0.0","@material/typography":"=10.0.0-canary.96878e1d0.0"},"publishConfig":{"access":"public"},"gitHead":"b88cf0e2eded50fb9a839a426059ff1f8242a490","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b88cf0e2eded50fb9a839a426059ff1f8242a490/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b88cf0e2eded50fb9a839a426059ff1f8242a490/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b88cf0e2eded50fb9a839a426059ff1f8242a490/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b88cf0e2eded50fb9a839a426059ff1f8242a490/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n|----  | -----------\n| `--mdc-typography-body2-<PROPERTY>` | Styles the typography of the formfield.\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.21.0-canary.533b1251.0","_nodeVersion":"10.23.1","_npmVersion":"lerna/3.22.1/node@v10.23.1+x64 (linux)","dist":{"integrity":"sha512-5HFeRoEREUkYg4gPg7TI2sGm8F84bQIDibuBjUBsdb7o+1D2saH4ANPZwdXpx4fVElueIdyllVf4eQDFF+BJbg==","shasum":"b6bba2223cc0d4e69ab579740895076945ffe375","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.21.0-canary.533b1251.0.tgz","fileCount":13,"unpackedSize":40620,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgFCWOCRA9TVsSAnZWagAAahgP/i94654ivCxVaABnN+3r\ni+faVb8KQIxIzVtuvFO6Gf0lmrtdpb9DwnadAV62Rc0X1EmIw3UWQXYNzXAl\nrV22odkzHzpffFHEJQDy6qJ29YwpRBRu1i9d8O7lhNdmbBJuMfQ59VdeRWUf\nDVQD0ySCVrYoGDZaUBp/9ofixcIC8E0XInmT6r93hyPEm5XzoH34cQPCY7Wx\n9BX4fUpPG6VzQ1z/aKCwFcF2WVdRlNwSBAue0lyryzjVnZMfnnJ5yX7oMOTx\nkHza6DMUPOLz4mdKIUtb/dX2ebLFh3IImMJC1B/f/+Ro8NtdorW+L84Gonxg\n8U/IspLAwh3bbb3TFWx1nDKanp01+i5DzRXONAN+N2YXzMBGNYAgLAmDTwh+\nSE6GPg7dmirN5vYAvAN85fM6xFFX1ojrQEKa69VGIZm4hqtgkXJ+s4MdLTeW\nbwrxmzHXPYpwHwh7XidaHzuLrL0wngfTaB4ditSdYLNRGoi4p+ynJIzirfEy\nsQa/zZSCV9W8zR44EYC3qpnYpR+ym3++IUg8X1krKvC0tAUGPtNFANz67Rbs\nbIyA6myBvB3mhM3xsWki2wsg9F32i1MusJsbIF5ZAHAUieWlVi+2JhFYnSe/\nxq/bjp2tb3yktCgtGbtubFzOGqWWLE6ai1LVUuTjlRPndndISnGXYlHyWPNB\na8Is\r\n=fVWj\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDOYNAcmfSgJ/OunIynPz2BktqHaV+vDv2yzFbyFxRN+wIhAJcQ/OxDHy0P+prVuXtu8BwHSWP+US561dvxactUmLiI"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"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"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-formfield_0.21.0-canary.533b1251.0_1611933070216_0.4814750319236336"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.ab5c0a10.0":{"name":"@material/mwc-formfield","version":"0.21.0-canary.ab5c0a10.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=10.0.0-canary.96878e1d0.0","@material/mwc-base":"0.21.0-canary.ab5c0a10.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-checkbox":"0.21.0-canary.ab5c0a10.0","@material/mwc-radio":"0.21.0-canary.ab5c0a10.0","@material/mwc-switch":"0.21.0-canary.ab5c0a10.0","@material/rtl":"=10.0.0-canary.96878e1d0.0","@material/theme":"=10.0.0-canary.96878e1d0.0","@material/typography":"=10.0.0-canary.96878e1d0.0"},"publishConfig":{"access":"public"},"gitHead":"2809af58a44d479ea0c8000c34c546f525921004","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2809af58a44d479ea0c8000c34c546f525921004/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2809af58a44d479ea0c8000c34c546f525921004/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2809af58a44d479ea0c8000c34c546f525921004/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2809af58a44d479ea0c8000c34c546f525921004/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n|----  | -----------\n| `--mdc-typography-body2-<PROPERTY>` | Styles the typography of the formfield.\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.21.0-canary.ab5c0a10.0","_nodeVersion":"10.23.1","_npmVersion":"lerna/3.22.1/node@v10.23.1+x64 (linux)","dist":{"integrity":"sha512-19syJEBaTkWB56mzP0K1LrvR6oU2CLVBVUwTN9u3WHro3ePSmJ+HHyOMw+I8M12oAuSwWG4BL9mzqXeNbksQAg==","shasum":"e0b463c262dacc487465b1db567270655546b36a","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.21.0-canary.ab5c0a10.0.tgz","fileCount":13,"unpackedSize":40620,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgGbM8CRA9TVsSAnZWagAA3QoP/3w2luAhHBEgVrCYbqKu\naCXIWMgruCZhcyk7gi7slJxIBGFVryw7AdgXXZzUCBsbcN8vfB68BFDX+wAp\nwMXd/EDzLXzfRTCqG/9xit4pr2ChkDsG/WdgceWN/nzjZqoU0JpvSwTYxbq6\nETaGVxvTrPI7jjAdFp4XEWACdY664c0GhaLOkt1tkuGYj8Hj3xbQEP3oO2rR\neaydwd9BtOzXK05YP5ufj9uCs7/iMZXY+nw/E+gdWOIscaowcOSgHCFHtdro\noB80V97quJZ4lKp5WV+vzoVcQ5wIVI4Tn5+IujokWwZmL1inB79ptB/sm6lv\nF3IorWLTmGvLSS1KELk5+9CVOFjkg/8x9zWiWlywdsCA4yeNIfpPie4Oc5GB\nqvWBorp10oFYS6NCzznSEC0+LTFc6uMtJbxz1dVImsiNR/lk3gU7cjV6iX96\ntEoLP2/SQwipY8QywL5ADjn6oJ9FfaQ0Wwn2BOiD8crcxLfUQlNJFcKJS37L\n+wR0rsAMwkrjAIvTZcyqGRLiUwgbhNhGxpAfkh4QFvSLraRx9Ywj1SnouCTx\nQY+OLv5519Pip+StNdFxoM8nV4xmf67lwc/ezUCrU2iho6oYngWKlpEYxjt9\niCRjBdlAXgbeuaKJm1ww5DlCedBloS7Ml5XCySKCRiINgMJGNzAmNkrwwXHI\nEHjO\r\n=ZK0G\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCrG1Y5jZRsqFafdevrk45uCScKThNNiY+uzaAvKdDJvAIgSPBxFkRGy0AT56CmBkB0fnWKtrTYSSmzAummOUQZUDE="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"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"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-formfield_0.21.0-canary.ab5c0a10.0_1612297019919_0.597849683948392"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.b7a40b27.0":{"name":"@material/mwc-formfield","version":"0.21.0-canary.b7a40b27.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=10.0.0-canary.96878e1d0.0","@material/mwc-base":"0.21.0-canary.b7a40b27.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-checkbox":"0.21.0-canary.b7a40b27.0","@material/mwc-radio":"0.21.0-canary.b7a40b27.0","@material/mwc-switch":"0.21.0-canary.b7a40b27.0","@material/rtl":"=10.0.0-canary.96878e1d0.0","@material/theme":"=10.0.0-canary.96878e1d0.0","@material/typography":"=10.0.0-canary.96878e1d0.0"},"publishConfig":{"access":"public"},"gitHead":"c1cdf08e57947b9dd8b35ef8599a58c0ab3c09e7","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c1cdf08e57947b9dd8b35ef8599a58c0ab3c09e7/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c1cdf08e57947b9dd8b35ef8599a58c0ab3c09e7/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c1cdf08e57947b9dd8b35ef8599a58c0ab3c09e7/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c1cdf08e57947b9dd8b35ef8599a58c0ab3c09e7/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n|----  | -----------\n| `--mdc-typography-body2-<PROPERTY>` | Styles the typography of the formfield.\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.21.0-canary.b7a40b27.0","_nodeVersion":"10.23.1","_npmVersion":"lerna/3.22.1/node@v10.23.1+x64 (linux)","dist":{"integrity":"sha512-mdQq9qiGOT2lB4WUyue8WmqSGUsz/UfDNVl9Z7xyVpwpIhbqdd1hlMRsI75M4EG+Z+QIO04BiNwA9qmhGn5Fog==","shasum":"e6162a088288e70fbdbf7c2da0e5e5fb0f76a1bf","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.21.0-canary.b7a40b27.0.tgz","fileCount":13,"unpackedSize":40620,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgGrstCRA9TVsSAnZWagAA3NAQAIPJdWHXSSLFAGoWxZbm\nwuZ/FBAj3kFrPZxQHm/lH5eAt7KI1NSssttW27QrTN/1/dSOOUh+HbqhsJrB\no+eYfjgB4yJ7MoKmBfwUk6uugdXvcr7szCw+dKlbO0JKDKVsiAMQ7G3cQGnJ\n4hSxkNpjxIhujI/hUk90Fs1kgs7DyTpDPbnMvIZ46Wq+olEjxV5oEkFzV4B9\n/3vtoi1+weFVdqah0nfVJPgLLBj0pccWbvuDF7rPSrgAToLAQwRk6DIsuKFn\nsAcizwHck1mERG7gTJlHoYQAWj19ZxdKaUUN/DtCoxOvJ4VZU28ah6z+df+r\nKMmbvVcagRmYhocAdj/TghL1inipdNQRoUxqz9UnWUr0KcBtuibiI/KXEClp\nk8TTb9NIeYRYDX1ooF9AZBFM9PU3LHvhV2Xi2xscz9JLLIWT2lHNIL7Xswh7\nkrsKTW+4F6E+fpbc8NNJ9OAoG0wLKELUg2bNq87PW1pJPFGTco5cPt68brOm\n3t55pn2v5MKhlOFjw2bcY5EsL3mT6ZHuSkJ/HE2dqamXrb2phiwrbvp9Of1T\nDCyXX0dt2y73zK+0tEpFpKH0+uvBvhTt0hdOLlOXbtRuzh8C0izJzmO/aTfC\nIpGKoU122ENDDaSjBSREuVhbyQcdk4aIOXHjEVzvvdjpb0GImEzvHg312WNw\n1T7t\r\n=YfYC\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCiIF8AXEKDhxKdOwPij7I0D80ThCot6oT2p+rls4I4QgIgWdkzo/SVrAsULnv2pUC3V74nW2dafLHMCe9FuiNs0o8="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"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"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-formfield_0.21.0-canary.b7a40b27.0_1612364588620_0.15585556699473702"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.0fdee204.0":{"name":"@material/mwc-formfield","version":"0.21.0-canary.0fdee204.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=10.0.0-canary.8e66dbfee.0","@material/mwc-base":"0.21.0-canary.0fdee204.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-checkbox":"0.21.0-canary.0fdee204.0","@material/mwc-radio":"0.21.0-canary.0fdee204.0","@material/mwc-switch":"0.21.0-canary.0fdee204.0","@material/rtl":"=10.0.0-canary.8e66dbfee.0","@material/theme":"=10.0.0-canary.8e66dbfee.0","@material/typography":"=10.0.0-canary.8e66dbfee.0"},"publishConfig":{"access":"public"},"gitHead":"f072f9738076b381b1be472e9a6d239553e4d7c5","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f072f9738076b381b1be472e9a6d239553e4d7c5/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f072f9738076b381b1be472e9a6d239553e4d7c5/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f072f9738076b381b1be472e9a6d239553e4d7c5/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f072f9738076b381b1be472e9a6d239553e4d7c5/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n|----  | -----------\n| `--mdc-typography-body2-<PROPERTY>` | Styles the typography of the formfield.\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.21.0-canary.0fdee204.0","_nodeVersion":"10.23.1","_npmVersion":"lerna/3.22.1/node@v10.23.1+x64 (linux)","dist":{"integrity":"sha512-X8qXTPNaJ9ISmGqMcpaqUYkNsGfv1rHfFMRh+/wBqbFL5xWiJAP1Xk3k9D56r5afMnne0Xt/Bra4fN6WYlCS0w==","shasum":"0d2898ace4582319c8e5625b17e1298db13db7cd","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.21.0-canary.0fdee204.0.tgz","fileCount":13,"unpackedSize":40620,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgGux9CRA9TVsSAnZWagAAWywP/iHyadloODHfFNX3vygV\nixGo8DaPjdw2Ii8MNMbiuHJZmZn9zjQHWrpSc2EGoDEaIg+V6g7R5N+Hi27G\nvsfcIH+A+oTHaJUgakjfim8SHVihstc9jvtPYd9Tvl2REXi4qw5Dn/yDHDAJ\nd1nkdZmoCmpY6QK4s/9IVsHSZ/CY26xjV5mNCTVC8kegrj0VbUWYDI2Ej2BA\nTb41iPTP8FjnaclCUVCuEXU+j/t6tMUuXW0oCZ51TnPWJS66JHfrZgi9IVze\nfcfGZ3n9qhQQS/v2T0tqe9/FuS/xkJbcLyemzLPSvLzc8TVoPEWk47DYkP3B\n0rQUzWTdLPh/Zp1lftnkipFtdFLElzS3A+4gCzXz3CaUwbcnN+jm1Bpu/ghT\nIWeQrbBTKvbyiwqkyJIPHdqFTsmp+K+bOtvV47IaVHq9MfoS7wei70b67ve5\nqwzjdSNETnAb6BqAdpcM3/0aQrIYrEHp6ovqBL+iah3adIwtcGMHe2VoWqwl\n3s0oqJz1Vi9IvuOdipAq9/OJGfYLzc/zvHkd4b/V/rUph46iE369ginxdrIe\n0LF92UcQmsmfXtfQOT3F64skMN4p01Kk4pzGxcgwTlhGcZkp1weWQY6gc1Rh\n8gmwW/qjnXa/VYbuH2GrDSZt1UGjYrEWtQXDpHb+3+VBtfuN+qf42qwhjQlp\n9yiQ\r\n=Eiq1\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIF0dKs/t99a8w4QiLippXvI4Js0dJLVyL/q3sIoFJd+OAiEAgHi0XmBvhCBl6DFGIMTeHhmjllRVyUIWeLqsk3gCzjU="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"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"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-formfield_0.21.0-canary.0fdee204.0_1612377213285_0.9273261720236039"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.5160e548.0":{"name":"@material/mwc-formfield","version":"0.21.0-canary.5160e548.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=11.0.0-canary.b5227247d.0","@material/mwc-base":"0.21.0-canary.5160e548.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-checkbox":"0.21.0-canary.5160e548.0","@material/mwc-radio":"0.21.0-canary.5160e548.0","@material/mwc-switch":"0.21.0-canary.5160e548.0","@material/rtl":"=11.0.0-canary.b5227247d.0","@material/theme":"=11.0.0-canary.b5227247d.0","@material/typography":"=11.0.0-canary.b5227247d.0"},"publishConfig":{"access":"public"},"gitHead":"37494b60e468d33d172953edbd3ca17d4aa342e5","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/37494b60e468d33d172953edbd3ca17d4aa342e5/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/37494b60e468d33d172953edbd3ca17d4aa342e5/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/37494b60e468d33d172953edbd3ca17d4aa342e5/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/37494b60e468d33d172953edbd3ca17d4aa342e5/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n|----  | -----------\n| `--mdc-typography-body2-<PROPERTY>` | Styles the typography of the formfield.\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.21.0-canary.5160e548.0","_nodeVersion":"10.23.2","_npmVersion":"lerna/3.22.1/node@v10.23.2+x64 (linux)","dist":{"integrity":"sha512-gq2WBoWVVX6rkkjkb/Yfukj/lHi4JrlqMYUq5fCLt7EI7SpIjyMr9ioKPQL+f9tNE4dPvbmy3xhfLT2iBan2VQ==","shasum":"1138e9ecf328eef843c4ab7bd3a5a97170c5db93","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.21.0-canary.5160e548.0.tgz","fileCount":13,"unpackedSize":40620,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgHdnaCRA9TVsSAnZWagAAzDIP/0WCAurIe7pos4mzNiTz\nkaLI+FWuMes2gj2S1+x07DHb2BUDAsS6Ke2kPLr1NKJWfLAglKtqMhQZFPpF\nQK+h8WF9EEieTZVA5Yq/e/o27mIwOjOuSHLy5JzjO7io6O4QQMJRZEHX4fnw\nFUV65llfuDsv/KmrLZW1IyH92oLAtB/ZiLX+SIOTjznsoP+1FybYArGpEc+m\nKa3/pT4c8sxVmsOGtQFvFHgHcuim4/H8jUqQ4HPYN0InlKW0mwZ9lONEdiCc\nAp6hBH+5XliHIPxmFuD4ma6UT/nMk3zOLfeTz4aWx1jRWhcfUPlAUq8x94Nm\n56RpFb7I5PTwJJ+Q+f1o4RPFQjk7XS2eLH3VNRT0LC1rSxWJb280Vm8csBOF\n9M6kGa5wp3AWrYX6+Adys+UlH9+VFqZ1BQ7cCHBdRVH7D+apyS9B5F5DkLZZ\n2hYOBOfrhprsLDn/Zi5Ofkr81AXb/D4ARHs8Yg4BKX3AFU0+OQ5Y+Ib3VeaU\nMN986CDUtdu2Lvc7NFmjCmIyHe931RWm/vpwMlWST9U9vsUEkzKakqKccPyo\nsdX3OVEdX2tF4FROiv1DPWj5djcjWLp0xYAXiohcBqlKj1lpRweZVez+7H+r\n0PYd0jWbxNvcE3U/L2CD4W4KVa2Y0Lu7xN0GXUq1VI/e4FmE9zl0pmm+4KDC\nfC3b\r\n=Z6UZ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCURMDbB14k9feL0FoMV88MkTmMaZFYZaJmI0zkSPTzsgIhAN04H8MN735kUDmISyoLXdvT+pe1iUpo00nQK5RYXrpi"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"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"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-formfield_0.21.0-canary.5160e548.0_1612569050029_0.7998812460907885"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.4fa2daec.0":{"name":"@material/mwc-formfield","version":"0.21.0-canary.4fa2daec.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=11.0.0-canary.aac8f5d9a.0","@material/mwc-base":"0.21.0-canary.4fa2daec.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-checkbox":"0.21.0-canary.4fa2daec.0","@material/mwc-radio":"0.21.0-canary.4fa2daec.0","@material/mwc-switch":"0.21.0-canary.4fa2daec.0","@material/rtl":"=11.0.0-canary.aac8f5d9a.0","@material/theme":"=11.0.0-canary.aac8f5d9a.0","@material/typography":"=11.0.0-canary.aac8f5d9a.0"},"publishConfig":{"access":"public"},"gitHead":"49d5ec72e92627f861ab94dde045181b5eea9f00","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/49d5ec72e92627f861ab94dde045181b5eea9f00/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/49d5ec72e92627f861ab94dde045181b5eea9f00/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/49d5ec72e92627f861ab94dde045181b5eea9f00/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/49d5ec72e92627f861ab94dde045181b5eea9f00/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n|----  | -----------\n| `--mdc-typography-body2-<PROPERTY>` | Styles the typography of the formfield.\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.21.0-canary.4fa2daec.0","_nodeVersion":"10.23.2","_npmVersion":"lerna/3.22.1/node@v10.23.2+x64 (linux)","dist":{"integrity":"sha512-KQhrgpSP85IegSqMbUWHes20+WNaUn7pD549OPDTZC35CPN0zQtISMWqqmSqkzFG/9zfLa7gI++QGMoG6uyy9g==","shasum":"6fdee3ed6aee41206895afb261c7b1b265a39513","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.21.0-canary.4fa2daec.0.tgz","fileCount":13,"unpackedSize":40620,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgIdS+CRA9TVsSAnZWagAApqkP/1n5mMalRjMvXyXttF/3\nTAxQWTVfCSJE1Z8PZcV74IKTW0xGfUGJ+vKvNqhSCR7vmBuS6DtM5D8l4958\nIsHC9FoNdynTdebq78gQqN2lba+Ky7gntgN7sWjbCuDIqJMTLMDdz4eHyp0m\nyfhlwGcRam7WRkhXZW+b5HMqNO3bhbZyL8uLqubXmsoBe3yF6flTLd20Br0U\n82cHlljGDzIe4UpiNzz/ksX6Sxo4nuscILl2jIUn7Fk7FKeyYAfXMK9zJe0q\nLQ2dbgF1OVwXMbcr1uEH07TZwta0UngEXZDC7MIhJNtCoEf4qJmKpI2VNi67\nd/ykFgObGVT2U4jjeaXsTsTwAob+scQKvdUid2Qq2UENRJa40dkgOWWS6fca\nOAbNhS3QuGCDJ7DRe99RGTH+r1tYjos2xgmLd0lHXo6Jpv2x261WyOiMwrRB\nbtoi4IRvwU7KLb7PDM87HYplGdaGkHmmOZVMxiUMjZiSBPvXL6gUayxLtRph\nd57h2H3Z+Uo93ZmhIVn7VS0XtVSzn/PVLGMokYO7QM+wQcQP4BrSk0pVysvq\n38pox9B1+Dl/l9lFLycZjoaRqA9wk9VjQlIL+H2sRWRaesJwgWyoNZYdEb4g\naBtKQLhjPOCJeF+FSjqPJXtGw9dHW0Fq1bVtPMEg+3BDTOP0RYoztnm7fBS0\nyz1f\r\n=/nIG\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIB10xJ9xWy/cOxKtGrczFZqZ59BHn5460/oYnEnUZvuCAiAZxUhqt6LL8XpruWFqzTvVXPXnXiFHkahZyddo0UfgaA=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"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"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-formfield_0.21.0-canary.4fa2daec.0_1612829885715_0.7530113182483908"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.67f285fb.0":{"name":"@material/mwc-formfield","version":"0.21.0-canary.67f285fb.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=11.0.0-canary.750e18fc7.0","@material/mwc-base":"0.21.0-canary.67f285fb.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-checkbox":"0.21.0-canary.67f285fb.0","@material/mwc-radio":"0.21.0-canary.67f285fb.0","@material/mwc-switch":"0.21.0-canary.67f285fb.0","@material/rtl":"=11.0.0-canary.750e18fc7.0","@material/theme":"=11.0.0-canary.750e18fc7.0","@material/typography":"=11.0.0-canary.750e18fc7.0"},"publishConfig":{"access":"public"},"gitHead":"04f614de1b88fbd5e16a537f0b7e3f2f9b015a9c","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/04f614de1b88fbd5e16a537f0b7e3f2f9b015a9c/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/04f614de1b88fbd5e16a537f0b7e3f2f9b015a9c/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/04f614de1b88fbd5e16a537f0b7e3f2f9b015a9c/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/04f614de1b88fbd5e16a537f0b7e3f2f9b015a9c/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n|----  | -----------\n| `--mdc-typography-body2-<PROPERTY>` | Styles the typography of the formfield.\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.21.0-canary.67f285fb.0","_nodeVersion":"10.23.2","_npmVersion":"lerna/3.22.1/node@v10.23.2+x64 (linux)","dist":{"integrity":"sha512-pfwfLEIBa9mtesgyaWvBLX2zdxi//yLK/LwrdLmnEkm7fJwgDZYfI3ejy3aPNibOjFAsjSVlAc/9EmmdTHwp3w==","shasum":"bb4cbc03f0334c13f106e558fcfb19b5d7d6d6c0","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.21.0-canary.67f285fb.0.tgz","fileCount":13,"unpackedSize":40620,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgIdxaCRA9TVsSAnZWagAAFdgP/jJ4oklXYL76wbiqgbuj\n3jVDW10mjJ9kL6iNGRtnA4ZTHgzbmGH3Pm/KHRHfZKziuUFx9D8kf5subgLp\nh1QTQKoXE9RAdRkYgYqWGEnTPTm6bS3lCJuMXh5Hg+bHLzs/35I+zeWMtwGr\nErAGDdxn07MXiFx3+DnvBhJAr1Aw2EC/5t1W5P9lNazGbG71w3K96nAMgzo3\nxvW2inh9ij9QQ/ydftgd/0ZgIn8k78gJhJr0gQPVYI7wMDVQRvY87bYSlK+k\nSy0mbECjqIfAXRN2DUs5vfEL/gIkiMXVsYjhh0xJ2gQL+IuaVTZjZ3DYUrfW\nZjQqLzeyhjPxCAZbKS7vjRV80Xie7lPAY2YRgYeTF1vkpB41VD+ph7IuGALP\nAg+rAWStWvF07SuhdZd5mbRIygD3Pw4TPizUp60/kKGV0Nk7SlYg6FDlK+Fh\nfItrwj+41mGPvbJ6tcfhS8QG8ZxOG+y77xTWBxAhobwA428+cxDrha0ar09d\nBpw/b9sFvFrcCEhlJWjuBXycpzuxCKLmy0+tJLKWlgIpVF8Ux4nBUzoKahXC\nEdLsYhs54uLTN0PFR53u/DcHcxdEQgBArIpnfex3uIOROlytJEh8YM4Lk+Sr\nIJ42bDSpAg1S+UuRov5H3AKJGscdOw4zsU/sSxTYDwJ3zQzxPQO4uq4XVU79\nlkPO\r\n=ebaN\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEtkFqGtdkf91hC7pJiHbhRQyooRVnqd2TAAMoNlxDi8AiEAsYEJcTntscTjBd9lxpXLeqD256r+h/tqo6GRXgv9aks="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"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"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-formfield_0.21.0-canary.67f285fb.0_1612831833749_0.15165345940128638"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.58cd5a70.0":{"name":"@material/mwc-formfield","version":"0.21.0-canary.58cd5a70.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=11.0.0-canary.b62b1266d.0","@material/mwc-base":"0.21.0-canary.58cd5a70.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-checkbox":"0.21.0-canary.58cd5a70.0","@material/mwc-radio":"0.21.0-canary.58cd5a70.0","@material/mwc-switch":"0.21.0-canary.58cd5a70.0","@material/rtl":"=11.0.0-canary.b62b1266d.0","@material/theme":"=11.0.0-canary.b62b1266d.0","@material/typography":"=11.0.0-canary.b62b1266d.0"},"publishConfig":{"access":"public"},"gitHead":"bd3f430e2f5a541d9ff928f6eef5e0f06946dd6d","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/bd3f430e2f5a541d9ff928f6eef5e0f06946dd6d/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/bd3f430e2f5a541d9ff928f6eef5e0f06946dd6d/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/bd3f430e2f5a541d9ff928f6eef5e0f06946dd6d/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/bd3f430e2f5a541d9ff928f6eef5e0f06946dd6d/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n|----  | -----------\n| `--mdc-typography-body2-<PROPERTY>` | Styles the typography of the formfield.\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.21.0-canary.58cd5a70.0","_nodeVersion":"10.23.2","_npmVersion":"lerna/3.22.1/node@v10.23.2+x64 (linux)","dist":{"integrity":"sha512-K8A9gqTqtJAsyIAuVB51Lep3kPgbe0f7MVIimWNjy9xqNDm1JPcwnPXhUDpOjQttYfFI3pGTHbZTKZPuLEw2YA==","shasum":"058c09f0bd854838aae435e34a9912d07bd79ce0","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.21.0-canary.58cd5a70.0.tgz","fileCount":13,"unpackedSize":40620,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgJZcLCRA9TVsSAnZWagAAH20P/1iBT7Fh8+2kO8GXmj35\nvdbopS7XLFgC8M5r0nh+O6JvPvsH4Bl5XOooh8Lznf+10Ma6oiqDXoU5PWet\nclH7q2FsSdsxn2dxsaQDH12YGL8XlMMDy+krg9dYxbfXtHV4nETZ6xzC2FuQ\nd8B9nEVPnWv8wl3Xw0mKOnDRNVQeBa72ckWG3sKvazLKpYdHEVAQE68Pgch9\nzIqUoAmKnJ8Hqck+aQp1h510wBq8WTOi/Sz2u7dI0YqM1PynGHqYwye2Zv6S\nHFTl4e2R0nZMHTuy0dhBAGADAuHz1GvCaKobtfbYnuRZwZCVlJZK1U9YBCx1\nc1H63vP1rBmPexOzaJhGZyzboUZZaTm3zRBvUUwgehd1fM5rc4NQIg/lcRv4\n3p6zp9d6x/kVe9SV8/yyYMEoRK3don3oWGztRBTicgwkYKVsa8G7KwpwA8Ah\nqKfRpwGS9/4KdFP6unAUbnIhGwa04B1fVRggZmjis1Zz1ESTB0G+oWvF4FY0\ndLEifBOgJPJKQ/ScOLITgtIuOTV8L2CdDZAhRi+edOz0A8pQ+wj1dKln3bKb\n34puGVEc9yLyKyGUIrYOPWp0poEpjCnSRLV7jjJBcglYFxvcFR8QMLx+Ed0s\nBHHW8VaQIE3TElFZDM5YDH0+wmEJHCSHt8M8Jg5AwddHNkyE4S5ExLKvo9/g\nhW0C\r\n=nH4C\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCuvXD+TfUkZWRwi/xRfSqplBaIlcX9ZHNsT6uidJdS/gIhAP2P+mbXb6DUII0uJBJGrZ5h8EwyGjLba7LcwQqhcIRl"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"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"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-formfield_0.21.0-canary.58cd5a70.0_1613076234950_0.7868090063407605"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.8107ca43.0":{"name":"@material/mwc-formfield","version":"0.21.0-canary.8107ca43.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=11.0.0-canary.a6b3101fb.0","@material/mwc-base":"0.21.0-canary.8107ca43.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-checkbox":"0.21.0-canary.8107ca43.0","@material/mwc-radio":"0.21.0-canary.8107ca43.0","@material/mwc-switch":"0.21.0-canary.8107ca43.0","@material/rtl":"=11.0.0-canary.a6b3101fb.0","@material/theme":"=11.0.0-canary.a6b3101fb.0","@material/typography":"=11.0.0-canary.a6b3101fb.0"},"publishConfig":{"access":"public"},"gitHead":"579eae14a8b8a347a0e4b31bb6650c994d1df472","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/579eae14a8b8a347a0e4b31bb6650c994d1df472/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/579eae14a8b8a347a0e4b31bb6650c994d1df472/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/579eae14a8b8a347a0e4b31bb6650c994d1df472/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/579eae14a8b8a347a0e4b31bb6650c994d1df472/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n|----  | -----------\n| `--mdc-typography-body2-<PROPERTY>` | Styles the typography of the formfield.\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.21.0-canary.8107ca43.0","_nodeVersion":"10.23.2","_npmVersion":"lerna/3.22.1/node@v10.23.2+x64 (linux)","dist":{"integrity":"sha512-KsgsZ1Z3RK0+GhfrERtkuKz0vcRO/+WQgwTrf2/dNbN5i84NjgPJulzitkJTk0FpWuiVU/+HYp74Vd0JMLRrdA==","shasum":"09ca18d76b475e6f534c848346831cd912481539","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.21.0-canary.8107ca43.0.tgz","fileCount":13,"unpackedSize":40620,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgJb2cCRA9TVsSAnZWagAAAV0P/2NkEtiKQo/SX3YP8rht\nomGS+PZVj0rfoZjUZeiEx1YO/exmTnHHcdZXTkBgUjYvMdWm7GEf8ArMrl1I\n5EX5z9vvQA8DPsEylQd6vKOv+lLa6pWEbpe8RlFlNk6n8S8CtZvX+5MtNNU3\nh+7pMixObrPax25xt/cXOSi9/sK1GNPJ6uLeuhfWGKTigp93f1huxI8iEY1Q\n2zVZZMsD8eg19otDyId1iCOnKIOYNoAUz16FFxKSYij3dYY9z74gKogCDrWL\nfGgdnm54eOd47Eix3w7q/n6lbrxSGotAVTZLDOnC1kHoJEMJLx9nn0G87Jeb\nV7gdi25tYfZbkbmK1oA2zrW/S/YGeHJ3JwtykoQvoKIYYMHMF+7iam82+/8r\nOXzVrnzsU5aktCA1o7gJrqQj9qf+RHZEsCc2bsUTOg/IK8PW1Nev23wLTsTg\nl4nK7E2c7DodvL37ol9TKReEqY2y3u/qZqpyI6iHjF3hRSGdLAqMWHBIWFl6\n/fVsN2D5SHuhewxXQWQKidFiLjAB1z+0MEwAdc5559sh//ZYfU3LYRkQrrjj\nLlMY8t1r7g7kH1D0Tf4vyD7aQOHcTXfY1U4WVFiqiUUklUHftFMV8vgnBvLQ\nM8xcczQtZ+xaBFOdMgqrzBtIZOtNO3YICD+qLQLrcfFthjGnDW2wO2OiPP61\ne87v\r\n=/T9k\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD5IK8tApINBqvHkFZtwfCb/VuNrT8rE1u/wXnP1WCiNgIhAPW8QZQJFXToOeimBIM4qGWVff0mnni+M0v8gqPYO8lm"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"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"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-formfield_0.21.0-canary.8107ca43.0_1613086108325_0.14829652281909045"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.d35d64ef.0":{"name":"@material/mwc-formfield","version":"0.21.0-canary.d35d64ef.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=11.0.0-canary.a6b3101fb.0","@material/mwc-base":"0.21.0-canary.d35d64ef.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-checkbox":"0.21.0-canary.d35d64ef.0","@material/mwc-radio":"0.21.0-canary.d35d64ef.0","@material/mwc-switch":"0.21.0-canary.d35d64ef.0","@material/rtl":"=11.0.0-canary.a6b3101fb.0","@material/theme":"=11.0.0-canary.a6b3101fb.0","@material/typography":"=11.0.0-canary.a6b3101fb.0"},"publishConfig":{"access":"public"},"gitHead":"2fabd01c45fe7a18430cbb0070ae8b3f5d2a9dca","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2fabd01c45fe7a18430cbb0070ae8b3f5d2a9dca/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2fabd01c45fe7a18430cbb0070ae8b3f5d2a9dca/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2fabd01c45fe7a18430cbb0070ae8b3f5d2a9dca/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2fabd01c45fe7a18430cbb0070ae8b3f5d2a9dca/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n|----  | -----------\n| `--mdc-typography-body2-<PROPERTY>` | Styles the typography of the formfield.\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.21.0-canary.d35d64ef.0","_nodeVersion":"10.23.2","_npmVersion":"lerna/3.22.1/node@v10.23.2+x64 (linux)","dist":{"integrity":"sha512-3B4VNoAQnsvzGUC3FlRWrT3A8pS2SjF5ugEXxn4fZXRorCCBdSNeYQd5N4vhFFkNMAHXYWKWVHyf0QN2qXHdAg==","shasum":"7582a2e3c4c5ccc6ae1e310339c74dab6d00c8a4","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.21.0-canary.d35d64ef.0.tgz","fileCount":13,"unpackedSize":40620,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgJcDrCRA9TVsSAnZWagAAlWAQAKMv2sP4nTerAqXYvTBx\ndBRmgj258a2Q5GK1f6nFWE74y0Oi2+KMVcaR8kO6m7wvc7EAjYmQnEqPedKi\nzl1Yp8cTfrMfgjLvtww1iEuF75xEEdlAjdRNO73Hdq71qAAAOV+ssuk9JVZI\nn8vL5eSq7d5tm6rRVEhIZcQ8Q9rYo7DPBqeB7sDlSoLsXHCe8hWDXD+tgepw\nQJrEkVkmIDX6t7jCnTSuKx1/d6W+KWBSQq7mE5cTCANEimQR0rxXDae+axCd\nrN9MhXbzYH6vbBUDtVSTJUaZR8MdtwKFpDr0oGOUiBCjFd7UKhm+2pb1oNPA\nDq9YCUDrPQv4i5a4tV44Hpkj//lvVBStjyydGzPbY4Wr6pAYdY5JiMkXqpZJ\nDGR2FuO9JE2LYe9zaIbNprv1Ri9Uboi7G1Qc7OIyTzlfOTRpEXG/ZK+mZIE4\no75K9njT0A5I71r4zsuCJhi7wuUl/VSfr/zMq2IdUu8IWPPPKJaB69Nw6KgX\ncq06ZluMb5R6sFVHXjNpdKhGPl2tO6Q0USKUVKy7n01g1d4gFATuXV/9sSAh\nie1F1qInbi9AWrDmSyqDNv+sqbjZmLr8yvc5aokJxHWTa40Ym6zk+qj/l06s\nH5Zcx40nfsJLOcfTl8qSMmMtJqdIYEW1vy88oOkVlVMvDlGBynC3arO4PlGq\nwqk+\r\n=SbQf\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHgvdj+fhZ97kgbtYCpcbPcKSSxj+Hb1fAMDcwqc2JikAiEA9RQYvMXX+IGCwzIrgcfQYhwixQ1lIGnFJAsfLPqlhIU="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"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"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-formfield_0.21.0-canary.d35d64ef.0_1613086955310_0.6336838572189574"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.78bcf058.0":{"name":"@material/mwc-formfield","version":"0.21.0-canary.78bcf058.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=11.0.0-canary.a6b3101fb.0","@material/mwc-base":"0.21.0-canary.78bcf058.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-checkbox":"0.21.0-canary.78bcf058.0","@material/mwc-radio":"0.21.0-canary.78bcf058.0","@material/mwc-switch":"0.21.0-canary.78bcf058.0","@material/rtl":"=11.0.0-canary.a6b3101fb.0","@material/theme":"=11.0.0-canary.a6b3101fb.0","@material/typography":"=11.0.0-canary.a6b3101fb.0"},"publishConfig":{"access":"public"},"gitHead":"98a4001d56b1e200103e0862b83b661c87fac551","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/98a4001d56b1e200103e0862b83b661c87fac551/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/98a4001d56b1e200103e0862b83b661c87fac551/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/98a4001d56b1e200103e0862b83b661c87fac551/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/98a4001d56b1e200103e0862b83b661c87fac551/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n|----  | -----------\n| `--mdc-typography-body2-<PROPERTY>` | Styles the typography of the formfield.\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.21.0-canary.78bcf058.0","_nodeVersion":"10.23.2","_npmVersion":"lerna/3.22.1/node@v10.23.2+x64 (linux)","dist":{"integrity":"sha512-d0Erwi3yvUjg01/CbFUuZZs51OdKS2b+lWNU9hyTQIc3pXzn7C//a9AEC8kiBRlWzk/T76GXHKNC/Ie/Hgeamg==","shasum":"ab2b31b0116a3fe8472764c6cf39419ab52257e3","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.21.0-canary.78bcf058.0.tgz","fileCount":13,"unpackedSize":40620,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgJdA7CRA9TVsSAnZWagAA1zUP/0SoeWoNI+hrWZ4jw450\niarANsCi4Y1nHK/9dZbo2Le/jCinSWFPnHW/1rafpWQNKovzF+oA778KhnRz\nUeQjocjsDSOSqObmLK3cbfBjy6UZUkOYUpVUoUBKFBbGnDwuTCHkew0TA3Yc\nylB5EWfPXdkhBOOlzL12E8xIeFs6kVJskYBE7zhF/kdUPWPIpwyN9cnWYCbF\nVR8q77eWT2dIVapiLCt9z9T4jQ8YjtoHVR1ExxOsUTxyKjY1lKPG4H4VVo/Y\nPvpDrq02u50zdMxD9cB0o6QzVH+jcYUohgWEBFIlAJZ0iDH9hyI2RcKYnijc\nMP4Fga88R3gP460UDtuJFRk78JDAkEECU1XWa0s8OD4OdsbI2Pw3weV+vktX\n1IovQYj9fzV+mA+GeuyC7y73XTGhCSzHx3IWxzpezf90fdEtBJRMXNdxCgyW\nv9adPYOLZ7HB0PUUlitZom1g0yr4Cr+7dAXfZ9DRIRC5fJdFOVIU2GOvXd8q\ngW6GKTvxixOhjDMypVzJRjJlXULh4tvpvHmfF8uCHaVuhCkagUP6qBSWQXGL\nwCbiO4f0hkxXwNP+t3l9OwCh/JkqQ2qZZL1pxGFy+k4fdpNbIJLEI44bTvaQ\nZf7NuRCFzuArtApPrQwu5DusBONcvC94VlkiTdcEvR44h173HCmsLgLlIzly\nBCd3\r\n=oOJF\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCZkgnYv95CYApLx+E/C2aEaetjAXP3l87QZMxYQ15X0QIgLcM//DMhhfiok4g/6MYgOJreg+LYt0zehB2Fp+9757g="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"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"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-formfield_0.21.0-canary.78bcf058.0_1613090874772_0.4066939824534348"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.0c6908fd.0":{"name":"@material/mwc-formfield","version":"0.21.0-canary.0c6908fd.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=11.0.0-canary.ed88df700.0","@material/mwc-base":"0.21.0-canary.0c6908fd.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-checkbox":"0.21.0-canary.0c6908fd.0","@material/mwc-radio":"0.21.0-canary.0c6908fd.0","@material/mwc-switch":"0.21.0-canary.0c6908fd.0","@material/rtl":"=11.0.0-canary.ed88df700.0","@material/theme":"=11.0.0-canary.ed88df700.0","@material/typography":"=11.0.0-canary.ed88df700.0"},"publishConfig":{"access":"public"},"gitHead":"f290af657508c2392a786548f206e90e8bc44124","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f290af657508c2392a786548f206e90e8bc44124/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f290af657508c2392a786548f206e90e8bc44124/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f290af657508c2392a786548f206e90e8bc44124/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f290af657508c2392a786548f206e90e8bc44124/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n|----  | -----------\n| `--mdc-typography-body2-<PROPERTY>` | Styles the typography of the formfield.\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.21.0-canary.0c6908fd.0","_nodeVersion":"10.23.2","_npmVersion":"lerna/3.22.1/node@v10.23.2+x64 (linux)","dist":{"integrity":"sha512-8MHEg/PmUW/krxUe0GMEOKDrw+YFSfUk9haHcXEpFnjkvYo0LVvR//7/JAowd+xH+ZY37QfJ5vtCpw4Y43Pqcg==","shasum":"f52d3e20b51d9c4958b5fce6ab8c3173844f5eff","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.21.0-canary.0c6908fd.0.tgz","fileCount":13,"unpackedSize":40620,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgJdjHCRA9TVsSAnZWagAA52cP/RvblVEYUjc634FehnIS\nQPJvilB3Msf2zHeK6ZtgZfzsx0nG15aw/VI+IGB40w2zB4yX1vQnY1/tuuoU\nI4auEBLUNr7jSDQAcvWxm9Nf+/iZwG+vsNV7WTF4sSIPAlihtbHEd88+p2Nr\n02VKeOC334mByVEUZJWtsKytZmusUoFonKdfi6YHv1FFna+/e9Qm7QkUjY8o\nM78auywdoZnONwkJifl4TWU3VykkDeJOC0n0c2A59dYFgmvXTWQ+UseczSwp\nCGWqhaQzXTu0BlvPtVvKbHoRwg70ctnyfKMGEsHE86BZHFRBC+GZ1IvM6fgD\n5lUUPzUpAmvft6gbJ5XyF7w/vMuk0Wnu82yalRsEeFdqKtXT1KoSyfaGFtBG\nWY+n6FmBSaWCljxKVJbx8C/fIUZdO86+jKgyePnK5gPvr9WNDB4skfQThJoX\nVcmp0zppB0xll8SXT87K4Ddw4ugs4r916+omcnN8QB7hLKc/KJbVWtgojwwu\njWqwugm3ztZYwWmsMtaqaTopmPyOxfBeM069TmkZH0eRHdMW8tPuOr5XWMh/\nuTfwTHpSuhaL2czQzgdtXGSwWolRDIe8/zQrKke1FkWAzO5huc1oRpABphGB\nMHU0zgcGy8HHIk5RN5LUoUmaDxHOoiPMK3xEHg2c4JVeFxBPHEi1nuZK0JWh\nZP2N\r\n=KQTb\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDtLd1Dde7//j33Io/4nMNv4rwyC6QOhNL559oetHy87QIhAJCJa3sSwJJdsv0l8EpsyGJ6e4xB0mnDh8kULvQLcxdR"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"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"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-formfield_0.21.0-canary.0c6908fd.0_1613093063487_0.11796694556843046"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.f1f34ee0.0":{"name":"@material/mwc-formfield","version":"0.21.0-canary.f1f34ee0.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=11.0.0-canary.71fe9a067.0","@material/mwc-base":"0.21.0-canary.f1f34ee0.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-checkbox":"0.21.0-canary.f1f34ee0.0","@material/mwc-radio":"0.21.0-canary.f1f34ee0.0","@material/mwc-switch":"0.21.0-canary.f1f34ee0.0","@material/rtl":"=11.0.0-canary.71fe9a067.0","@material/theme":"=11.0.0-canary.71fe9a067.0","@material/typography":"=11.0.0-canary.71fe9a067.0"},"publishConfig":{"access":"public"},"gitHead":"b16a616d2cecb5d8aa3c279c76b01b2f49ab6965","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b16a616d2cecb5d8aa3c279c76b01b2f49ab6965/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b16a616d2cecb5d8aa3c279c76b01b2f49ab6965/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b16a616d2cecb5d8aa3c279c76b01b2f49ab6965/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b16a616d2cecb5d8aa3c279c76b01b2f49ab6965/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n|----  | -----------\n| `--mdc-typography-body2-<PROPERTY>` | Styles the typography of the formfield.\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.21.0-canary.f1f34ee0.0","_nodeVersion":"10.23.2","_npmVersion":"lerna/3.22.1/node@v10.23.2+x64 (linux)","dist":{"integrity":"sha512-N2AAM4N/Oh2S8sDuM3hCPyYLSpuDwO2V1WQdwAzymjxjyok2OgeYf9Kc8IIl25mbgW3eiX0NbUTkOrWFh2czrQ==","shasum":"c1577185d6de9c52799e4da54c22f4e408a1faaa","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.21.0-canary.f1f34ee0.0.tgz","fileCount":13,"unpackedSize":40620,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgJuJgCRA9TVsSAnZWagAAO7UP/iNLWbMgzewEyaXaoxc0\nizb8hsQJG8oplvy+CegflRnajCMng1g1wBWrLsyI00nkRWlejfd0l4JGWAJG\npSiL+PDmgrgf5nEqCnzN8mWEvSdk2ZsyuLxriKwqrDP0ao4cFh3vf888qykQ\nu3QZzaxaGx44SXo029lCWesUsYKwmsl/qAPjp+d55JpPTqnLNNh97hNo11KA\n0H1GF4zYYKNNjlLOBNXDC/viws26/4MGtdxW4XdSD8Vs/AKjo5aOZDmz+3U1\nKBgNVZP5tr+iMZZ1ViGTNvy2glwldXRd7HXHWEoSjnSteGwkeGysRt9fLPcj\ncTN98lHbE+OwYAxlwReQun1AsRf1R4Rp00OVbbeHXCaBnCC3dbMC7sjCsKdZ\nsXg0m1/xcchcrDk5R89N5uh3ZRhFoNRWmbuRFgz0FG3/Rj27o4nAJiXXT2ex\nDZLIfndKxBRPfGHLBe6Eok3CQdssL3ERcF9jd4Jdvi7eD1Vm0Ql1Y5DGXrCd\nfjjVr/BeoHt22Q4N8J89LyXuLC32E0hBw4vYOvf1RMyPA4OPkuHj2/oM5znh\nFq6bcfc8DtOXemN7GHrk0SJfnvivVWydUKt33U7QswSeoIknc9wmy4R84h2S\npMHuOCXvbmo30a4+y5tpMcKxWIvx/S7+oIMV3bF28Vr1BwuWjQoKnmXHppM8\n1v7M\r\n=3Mnk\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCID9539Zt6aUW5EDAtD9otzJZ1KO/JLzSfc5oNqUIGsn0AiAbiT+4Fl55aE6Jh9BLfLrdrhkRAzpcRLpK36F4TOmd5w=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"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"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-formfield_0.21.0-canary.f1f34ee0.0_1613161055805_0.2286960516513672"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.d84df029.0":{"name":"@material/mwc-formfield","version":"0.21.0-canary.d84df029.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=11.0.0-canary.0fd56a86b.0","@material/mwc-base":"0.21.0-canary.d84df029.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-checkbox":"0.21.0-canary.d84df029.0","@material/mwc-radio":"0.21.0-canary.d84df029.0","@material/mwc-switch":"0.21.0-canary.d84df029.0","@material/rtl":"=11.0.0-canary.0fd56a86b.0","@material/theme":"=11.0.0-canary.0fd56a86b.0","@material/typography":"=11.0.0-canary.0fd56a86b.0"},"publishConfig":{"access":"public"},"gitHead":"af09ce2e1ef6f6b486ea977ab8890e81af842541","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/af09ce2e1ef6f6b486ea977ab8890e81af842541/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/af09ce2e1ef6f6b486ea977ab8890e81af842541/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/af09ce2e1ef6f6b486ea977ab8890e81af842541/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/af09ce2e1ef6f6b486ea977ab8890e81af842541/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n|----  | -----------\n| `--mdc-typography-body2-<PROPERTY>` | Styles the typography of the formfield.\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.21.0-canary.d84df029.0","_nodeVersion":"10.23.2","_npmVersion":"lerna/3.22.1/node@v10.23.2+x64 (linux)","dist":{"integrity":"sha512-ktxuOL7l8kZulLIahtwHqA7ndVBOeHeZK0g05KoKfYIjAUexX7/zHQv52rHTZZ5XwPxvC/3A5Q6MKx28HdvY+Q==","shasum":"584d61dd2ebcf7172e053dccecc0b48aad827331","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.21.0-canary.d84df029.0.tgz","fileCount":13,"unpackedSize":40620,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgLBfgCRA9TVsSAnZWagAA1TEP/2S8t04L5CU7GRG7QDmf\nhVJ9GcYg4gqtTSo2S7VcChX+SIzyGhs36S6SRlSRrYHwhWkbwUoIyx/LRfc7\nIP8oE3IlzLG1uMzsqhUstUCjZHkrO54LqSg7uX+2gSXrl6lvytLkFmj+Q/8M\nWOlZFPDpmKvc6ESLg0IdqXP38HN4gVPbLs6WLkg3pwqAt9A6Zwot0lEw2pfa\nuTs/UEWOw3TQZDBoZUAh56nchpnfdRPJ95zBx8yIbnTtbXTBHbYRe04A/oRr\nzdnhACynMijr72l7N5D7RtIpDta/7S+KWgekZexE+s2Igd20s+R5H+8jjSwE\n718+zXPkAMrkDUGMEyFI/MbJcxCI40xbh1dqgZlXCgkie5+RYNETtsYNefKB\nOmudCOwdhGWL0PdYiLjWQnK8551ihVghOt/+1vcUBqXHProhSiH+oFYfvNCz\nPfYh0p3W9llNcvv1vCUHBC0ISh1SZZry3MchrUedcV5BeX9k704NbnQMISTQ\nTntRNHKSp9ZHkqoVyUTLzQmd64X6VFkSNEdFitGEf+3IRJ4Dv932WyBfOqys\nENeK4JbTUy33EIv6A+At3L4j6RVniuwMNd3emhHVOnZa0EdGneUVDenbcxAK\naylzJNU16peel+dZr0T1rAJlYws5IxzxkJEvJKy17pJrKySynpgBb49/rzN1\nteJZ\r\n=g7Vi\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGAtsaCHLPL2f1jsjFzXN7aYrAiElCwEr1+7UOy6V15cAiEAsQ42Rkc059mvJciKMc8VFzuzSc4SNH3U4iolwU+TCo8="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"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"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-formfield_0.21.0-canary.d84df029.0_1613502431936_0.22354789718232215"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.c525f471.0":{"name":"@material/mwc-formfield","version":"0.21.0-canary.c525f471.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=11.0.0-canary.f9cac96cc.0","@material/mwc-base":"0.21.0-canary.c525f471.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-checkbox":"0.21.0-canary.c525f471.0","@material/mwc-radio":"0.21.0-canary.c525f471.0","@material/mwc-switch":"0.21.0-canary.c525f471.0","@material/rtl":"=11.0.0-canary.f9cac96cc.0","@material/theme":"=11.0.0-canary.f9cac96cc.0","@material/typography":"=11.0.0-canary.f9cac96cc.0"},"publishConfig":{"access":"public"},"gitHead":"eb401daa998f20b7222c2787e22c669e642586fd","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/eb401daa998f20b7222c2787e22c669e642586fd/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/eb401daa998f20b7222c2787e22c669e642586fd/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/eb401daa998f20b7222c2787e22c669e642586fd/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/eb401daa998f20b7222c2787e22c669e642586fd/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n|----  | -----------\n| `--mdc-typography-body2-<PROPERTY>` | Styles the typography of the formfield.\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.21.0-canary.c525f471.0","_nodeVersion":"10.23.2","_npmVersion":"lerna/3.22.1/node@v10.23.2+x64 (linux)","dist":{"integrity":"sha512-B+zW10TI+rMxQVK15MWQiAx5RIxgdnphiIVdiJl+z7NDv1YR76kybZ9Xl/PrJ2h7YfBw+LJw2sSAERnht/OHnQ==","shasum":"c41433769e4fa515cb1c68ac6c356833c57f4a3e","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.21.0-canary.c525f471.0.tgz","fileCount":13,"unpackedSize":40620,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgLYItCRA9TVsSAnZWagAA+sMP/jOvVj1zMBK9cpMuXbMH\n2YZJqwsWWXIfr8UYUnFS5oTjrHUoTj81FxH1Ug2ef2g6LslnGRlE83gKSOVW\npYlPwslqHAYNjPdLJYVkb1SzSrcxTCmuSgFUu7VQns5tY7Z7x6FLI+qG3ROA\n/ebJu7ryxYA7gPscGP3KavDIjdeKlPt5Ni0iba+cwIQGqzyNzuEUrWqWJe8C\nI1sOIrRs+uTM4AsspR1ReNV22GPkiuhx1QzikaZXz8VURmzBNb07DidUASa8\nODWv2pQHAvUEticzl/LU5d5rAwc44TdHMleUg04C2nVC7gIMn3fz05lZwQx5\nMeOLLwQdhshIn8hzvUycFeSHcJ9HrHvvH+wCuI8iNRkXTCW3rI5V05h2dBQi\ndjkm42ZJ+R6hiq+XEJvITfXQnj8qnTWyju2lkwNplUdfouOCJzN0ThIAffB+\nkvR6NnJsLmuad7mgJpErrfUhij0vH01QUjDmwJnkrcJHnmsHVHFYSH9523wR\nxzgfQO58XIg3Zw7CSKk5B2g2W/TOX7XpZJI0fa70deoX4eyCRM3ErQ3hxpQg\nLCUDfCVY6KVbMoAFPmBenUM//jYznZtVoqhvXXYTRETF3ay6N1zfYlqUo07b\nKEyx39gk4oPi2J8WwvCb3Ubb1UmSjiKKv1XwY3tdlyXRgXBSb6fCwHEVUxwT\n/iVw\r\n=qO7n\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC+YcbDLTIHcYWRJQxkaxdOf24aIXgQ2IcusaXWPA+RywIgY5qrcu6zJsAbZ1ECFd4VAHhbTsfsxm/JtfVXVuXFUH4="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"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"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-formfield_0.21.0-canary.c525f471.0_1613595180814_0.5236698895863945"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.ba7a1b35.0":{"name":"@material/mwc-formfield","version":"0.21.0-canary.ba7a1b35.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=11.0.0-canary.f9cac96cc.0","@material/mwc-base":"0.21.0-canary.ba7a1b35.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-checkbox":"0.21.0-canary.ba7a1b35.0","@material/mwc-radio":"0.21.0-canary.ba7a1b35.0","@material/mwc-switch":"0.21.0-canary.ba7a1b35.0","@material/rtl":"=11.0.0-canary.f9cac96cc.0","@material/theme":"=11.0.0-canary.f9cac96cc.0","@material/typography":"=11.0.0-canary.f9cac96cc.0"},"publishConfig":{"access":"public"},"gitHead":"5d1b1f5b6c909a9e26befcb63e69de98a9b6fba6","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5d1b1f5b6c909a9e26befcb63e69de98a9b6fba6/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5d1b1f5b6c909a9e26befcb63e69de98a9b6fba6/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5d1b1f5b6c909a9e26befcb63e69de98a9b6fba6/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5d1b1f5b6c909a9e26befcb63e69de98a9b6fba6/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n|----  | -----------\n| `--mdc-typography-body2-<PROPERTY>` | Styles the typography of the formfield.\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.21.0-canary.ba7a1b35.0","_nodeVersion":"10.23.3","_npmVersion":"lerna/3.22.1/node@v10.23.3+x64 (linux)","dist":{"integrity":"sha512-dLI5cIZEndGaxIN2wFkFqH4YxndlxdDcPcysTASUS6MsU5G2viD936zqb3DMSCFxi3p3Box0qaG3ly/q5ZZ+/w==","shasum":"fbbdf1f82531db2f4479101bfbc56c21c74b60f0","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.21.0-canary.ba7a1b35.0.tgz","fileCount":13,"unpackedSize":40620,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgLwKpCRA9TVsSAnZWagAAePgP/37Fy5YEqU5Jo3exwRoG\ncGR48o6cnXG7q+T2GHa7vICnoZv6bxjIqm3WugUOX0Hq3sdxcAlB6R1+QfN8\nuzPrGjjBRTxCMvYWJFram5l+pEAN9GGiwisl2ll/rjGLnwaREeLjnlekRNaY\nt+nFHaeAdECEX5uXJFCNaEEGGwJQJy9IuT4c8hyRLCfzn+NmICYY6KsVLpqW\n+pItlSBA2h9sn6n8gteJfP5Nr8KilwdNdAaoKUVcMsguUO7uVAiIDoITAcLd\nDdRgnRecudQ3BtX9bSLRymS9+gzRMLzlRzF94OyMWycsiXCnz3FYzvSHXMZs\nVtlBAw+mJ99IohrMHF7daYbG8gOo0R0WQ3r6ZlttXlkSuhkHvKT1KioSP5ju\ntHTN0L6yMa7XIqfhJgsm5mHGDFXWMYOuPH0VMafwsqDgiltd7uvcxAXnu/mg\n895hoheE3x6+A1FcxIk5Lni2IIeUb91cRtz3ZrRx8ijjGZDZIVUSVKT0ps1h\nWj9xPMhrKsVNZjfEiAWsC7nyk1x7LanYEMjqhomGjXVkc67xn9VMAUPtT3c9\nM6Ix6DCgwpNuk8x9flMWFF+7/vD2dIJsY8rCLjTfLx//tqxY6atvI3qOMbMS\nLAl+u9SpEvzPXHBRMkYXEAK674z6JaWJs6iZxhB1kRd7mP7HKBbDH46MoTJ3\nCO1z\r\n=MWu5\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHf6xKZELH2mgi/4kJBktWy9lcnyKiU6f7neuepMc+8WAiEAs8LHXMDDTXXa4HHVVsg93PMLJOPLz6VYtlGOaUu6hAU="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"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"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-formfield_0.21.0-canary.ba7a1b35.0_1613693609196_0.21766487303087145"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.9a566dda.0":{"name":"@material/mwc-formfield","version":"0.21.0-canary.9a566dda.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=11.0.0-canary.0b4a4b2eb.0","@material/mwc-base":"0.21.0-canary.9a566dda.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-checkbox":"0.21.0-canary.9a566dda.0","@material/mwc-radio":"0.21.0-canary.9a566dda.0","@material/mwc-switch":"0.21.0-canary.9a566dda.0","@material/rtl":"=11.0.0-canary.0b4a4b2eb.0","@material/theme":"=11.0.0-canary.0b4a4b2eb.0","@material/typography":"=11.0.0-canary.0b4a4b2eb.0"},"publishConfig":{"access":"public"},"gitHead":"5093d1f8984fe9f44acd6597512a2de2ef5fbbca","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5093d1f8984fe9f44acd6597512a2de2ef5fbbca/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5093d1f8984fe9f44acd6597512a2de2ef5fbbca/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5093d1f8984fe9f44acd6597512a2de2ef5fbbca/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5093d1f8984fe9f44acd6597512a2de2ef5fbbca/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n|----  | -----------\n| `--mdc-typography-body2-<PROPERTY>` | Styles the typography of the formfield.\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.21.0-canary.9a566dda.0","_nodeVersion":"10.23.3","_npmVersion":"lerna/3.22.1/node@v10.23.3+x64 (linux)","dist":{"integrity":"sha512-NQz4Jpr03nIpndRR9oS/DS6B7JiY3LOo68R+eQo4asTL3PE9f7+F8xv4SpKS4iqe59omYHMwU9xIChab8xcSwA==","shasum":"1de2d974a06f59826ac66f6f4e771e8d7fb59dba","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.21.0-canary.9a566dda.0.tgz","fileCount":13,"unpackedSize":40620,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgMAVfCRA9TVsSAnZWagAAYnkP/0B7imMm/X5+DjpV8oQq\n3gemfC1GAsxfplnBF6QVr8u2bAXoqgRtiTh2dKUkxEPzKDdnKb01lG/N5EDY\nzLBaik27Y+GQzB4GudjyleN0JUErFyyCap2wUqYzrWhySo3xS1gD5dw1LI/c\nwdGmp+MDXEbhnCbbnZV0y4nvcIT7cvgz04qyyKy5H3+dcVaR9hp+Cr7e+eHf\noWAZk5Q381u7YQ/BVf1A1FZpRfLo3RwDR0xur1ZtFWgx8Q8ugB1PkA+hTH1/\nJrTCvDS4j7kzVWh5hs/w1iZQGTtAQz39UtdnlDvWEnEIho2vylWks9Zzc9B1\n33us19FTmpyqOQTzwYuKYrla73xPEAObfrv3AQ6CfRCEcC9ftIOGjzRyyvto\nxvEm2dMieK9xoMcs1A7x3e6PSLOp1LWwxJU254VL6nhkppPZ8yhMXxQV4KuF\nIt/HPoSQHJWMUDjsNscc1wPzi1iUuIYvY4A/LwJjBsZx+K7/eNbRnf06Wm/t\n/G5ltHLNmPsePo4Z7mwj9tzpzVFCsW1fSuUQMn3lP1hFD3kKdDSen7WbyS+d\nhSPkyQeb1hIHVtnb3zxo3U18/ZgXECuNPoHJ6RLE2OXH0LCukYg0yDl/Q7kR\n2XwgQa8X/Mj0ZtHwBiiZWR/zrFxll9avU+GmaogXIi9fy7kVtn4kAujfzDmH\nq+/Q\r\n=dvfn\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDGU8CeFlFFrbKQ5EyL3ECrGvPssJvqwwi4JcBu8xe72AIgdFGs6E+16AbEs7WQhOK1KqCJFK6PSVpUQqrvt1U3U88="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"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"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-formfield_0.21.0-canary.9a566dda.0_1613759839022_0.08702547768476632"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.55addb8c.0":{"name":"@material/mwc-formfield","version":"0.21.0-canary.55addb8c.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=11.0.0-canary.0b4a4b2eb.0","@material/mwc-base":"0.21.0-canary.55addb8c.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-checkbox":"0.21.0-canary.55addb8c.0","@material/mwc-radio":"0.21.0-canary.55addb8c.0","@material/mwc-switch":"0.21.0-canary.55addb8c.0","@material/rtl":"=11.0.0-canary.0b4a4b2eb.0","@material/theme":"=11.0.0-canary.0b4a4b2eb.0","@material/typography":"=11.0.0-canary.0b4a4b2eb.0"},"publishConfig":{"access":"public"},"gitHead":"02634c071c90f7c1124ae44f34cb20a61bf49350","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/02634c071c90f7c1124ae44f34cb20a61bf49350/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/02634c071c90f7c1124ae44f34cb20a61bf49350/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/02634c071c90f7c1124ae44f34cb20a61bf49350/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/02634c071c90f7c1124ae44f34cb20a61bf49350/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n|----  | -----------\n| `--mdc-typography-body2-<PROPERTY>` | Styles the typography of the formfield.\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.21.0-canary.55addb8c.0","_nodeVersion":"10.23.3","_npmVersion":"lerna/3.22.1/node@v10.23.3+x64 (linux)","dist":{"integrity":"sha512-WI5UtW1RF6Q4vtitwzslom+S9oVWteAFYdZJWu0LQsocIeU/xEZt7QmdzqPTRJPFqNZWVQoy/vToomJv1G/tzg==","shasum":"039bdb671826f3d50f556126489a362a6d052886","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.21.0-canary.55addb8c.0.tgz","fileCount":13,"unpackedSize":40620,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgMDVPCRA9TVsSAnZWagAAnHcP/RyIfsFnK8D++0YfZL73\ntnZ8o0CmSmXy23BNaMrzPybY9srilyioFviYHMFi7Jcr8PkOeryet9qzWzng\nJR1m3rhjAp/OR7oMDTrDkO8xnzXsteR9yMPGZDCMVdMzDfhCBSc+su9NDHla\nLfZsTncFRMq0Q0BZb66mY3sDCyotm8XRMMv0yoPGC5hIy8yvXK4IyB2/xeCv\n7Tx98sId9q4BcRAWNqXdpNk/kTwSub37KEZ14TVJKh4XtEfKEmq/6uuC0jMU\nCVpSWK5QReknOmIO3RXx2+Y/UnL1BgVRzBrQ+FFD/bBQROfAiHoljbh9YZ4r\naVY3yK7le3VfuE2GvveXIRUAgTEPeOMGn3E5Q/0UAvI8oc0jV762Jo38RzQy\n2C8+4asFpQ+mkN213qd+vo4IKc+lwBDC7CZe1ezj11UxBxXPwjqAHSlCElOX\nSt51C9DxFWht478KMqYlFxVZmZgyf6SY6vIGr8KDNDhgBSBs/HRIzBNm+n85\nUXw3amdPj+32NzlwhdQcPs4UgHm5KhjJALa/F01Odxz0gzmi2X8L8Tz1O2k5\nlwuifd5xZVSROrgza8DaFeoVVYAbF8PjDDmzK1s9ndin1rtS2AeF36r3oZ8E\ng4I+21zXIpSZdaVLZ34Myi3BD1A/jrqUsgYhogUZM5x7s91F+ykbHO6cWnG1\nMFsp\r\n=MOpU\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIExxn2kxo4LCXukRe8HolTsRkTSibJIFQzlM4Xc/l12pAiBUkWGqVgknvXXdVtD39UBR6z8L049g5NdXkq8SzuBA8w=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"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"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-formfield_0.21.0-canary.55addb8c.0_1613772110941_0.5374235662802382"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.85dd5e9b.0":{"name":"@material/mwc-formfield","version":"0.21.0-canary.85dd5e9b.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=11.0.0-canary.0b4a4b2eb.0","@material/mwc-base":"0.21.0-canary.85dd5e9b.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-checkbox":"0.21.0-canary.85dd5e9b.0","@material/mwc-radio":"0.21.0-canary.85dd5e9b.0","@material/mwc-switch":"0.21.0-canary.85dd5e9b.0","@material/rtl":"=11.0.0-canary.0b4a4b2eb.0","@material/theme":"=11.0.0-canary.0b4a4b2eb.0","@material/typography":"=11.0.0-canary.0b4a4b2eb.0"},"publishConfig":{"access":"public"},"gitHead":"a723fb0b68d5c0ab6eb13c066a9c255b58d1e19f","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a723fb0b68d5c0ab6eb13c066a9c255b58d1e19f/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a723fb0b68d5c0ab6eb13c066a9c255b58d1e19f/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a723fb0b68d5c0ab6eb13c066a9c255b58d1e19f/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a723fb0b68d5c0ab6eb13c066a9c255b58d1e19f/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n|----  | -----------\n| `--mdc-typography-body2-<PROPERTY>` | Styles the typography of the formfield.\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.21.0-canary.85dd5e9b.0","_nodeVersion":"10.23.3","_npmVersion":"lerna/3.22.1/node@v10.23.3+x64 (linux)","dist":{"integrity":"sha512-c2QadYmnzhvIDvqo2Rhe2kFkigb4an6kC7OjwLoqlD94XbSDNZDUcCbZNc09X4TCZL3Rh76Iuq3BXEkLNQXmjA==","shasum":"f6e62012ef2e2f6da1571afaa2d32f7b3fb4e513","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.21.0-canary.85dd5e9b.0.tgz","fileCount":13,"unpackedSize":40620,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgNGYJCRA9TVsSAnZWagAAakYP/3n48/Iz1N9BkaT2k/jj\nYOI65PbxoeM31Q6wrVO74p9fBrKvkuyHxNdY/8Gv2hseA5182dr+/yJIvu6X\nmjElXAZMXstSgd0+D7nZJJmLJfPiR+XrLToa5ozE/+e2oW4e0GcaQm1jrIZz\nSUV+AtUAHcjNPgUhDQSfYF9aESUcjEm0IKgzHjAeE6UVOW7NKkowl+zWKNO1\nHV4LFvb7f+aWK1oO4NOTRs6y9oCSNDChVbAW3lOMYB3iqf0XDyavzAEsI+YY\nSJHT7fn30Kr5RYZ8S0f6qUXBgH3dtC0DudTwnZfiP43pZheV1XMJuvrjE10A\n2ezK8xMUMtTOiTZpV0zKu18qAQulgAuxh5JJEUCmnbZrSxXrnWyVNduLYsD/\nm+5IRtnWweBOKwmhvTQrIuhbN5P4H7BJtJcoUpAXSfPwpAy5vLAC+LBwetgS\nuksBnlyiaNFVFlC3lzjRbAAeWSk4uP3aq1xuQFoe6rngNQM35GmHCRoNAPXX\nvB4uF9yxeiu96bZ9iKB3HKda6dhpONjMAK6XNHHVfKmPD0+x+av+qtJoN2a0\nUFycFOuSMBgvfcosS1fQUAt1pqCZu9Sp3Hodv39s18dBTfSdGoH0tyimVz1o\niM+xn5+uD4m42TBpX1tKfm/8Q0DlsgkgrnglPc8Y1oKOP15Qu7rYX2lbwye+\nRwhH\r\n=vJPT\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDGpoNWzgQQomoqgS7tPn6MUVnIfz3lopfvL3CCNu6ZNAiEA3rora3afA0tOP2LHT3mLBkH0Amw/Z+6DQvpFmkxOFIM="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"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"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-formfield_0.21.0-canary.85dd5e9b.0_1614046728379_0.7500464601047743"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.aa3e078e.0":{"name":"@material/mwc-formfield","version":"0.21.0-canary.aa3e078e.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=11.0.0-canary.0b4a4b2eb.0","@material/mwc-base":"0.21.0-canary.aa3e078e.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-checkbox":"0.21.0-canary.aa3e078e.0","@material/mwc-radio":"0.21.0-canary.aa3e078e.0","@material/mwc-switch":"0.21.0-canary.aa3e078e.0","@material/rtl":"=11.0.0-canary.0b4a4b2eb.0","@material/theme":"=11.0.0-canary.0b4a4b2eb.0","@material/typography":"=11.0.0-canary.0b4a4b2eb.0"},"publishConfig":{"access":"public"},"gitHead":"2acbbc6ed6d9f649621ee54e8265c9d26c49f634","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2acbbc6ed6d9f649621ee54e8265c9d26c49f634/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2acbbc6ed6d9f649621ee54e8265c9d26c49f634/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2acbbc6ed6d9f649621ee54e8265c9d26c49f634/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2acbbc6ed6d9f649621ee54e8265c9d26c49f634/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n|----  | -----------\n| `--mdc-typography-body2-<PROPERTY>` | Styles the typography of the formfield.\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.21.0-canary.aa3e078e.0","_nodeVersion":"10.23.3","_npmVersion":"lerna/3.22.1/node@v10.23.3+x64 (linux)","dist":{"integrity":"sha512-ZnHs790XD6ueuNlqjq8WCk/8r/gKAH7i+WTVIv9YwGCDxjQwyzh2xbsBeozvE/YD1Y7/b95vTV2sfuu3g2rvmg==","shasum":"a912cac45973b228afe632fd59f5cdf29e157293","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.21.0-canary.aa3e078e.0.tgz","fileCount":13,"unpackedSize":40620,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgNTfuCRA9TVsSAnZWagAAIjwP/R5MaIRvFncJ4su3nNa+\nMys5pMK0nCSAKxiewXfpTLzawOKB7n1eIG6buuEYbXvPZa92uEvor3tKiATS\nibaA/Y51BQXHsQQGs4mcXgAmNBd7fK2iAUos9h3Nt0FRIYrRrnJXAOfCUWPJ\n9VzF38i5U+dWpj6w8v+DF86+oMdsVZa/WfTW1MKMGxOnUnAdFNUaPLtmn/us\nriRIv2paiudGfz3M419WO7iDVYdFNHpNUExpDRj6Vw8o1DDKlYAHZj0gByr9\nHX702dBcLDUb8nAXJbNf1jxtoCpAXOK7BZ52GvYHSdGnRZFtqFrchT8ro2I6\n2gcpWc8UqTfHEUXgb1gRaigkHfWSzd5lMcCuOHyGwU0UEQnxOTnewuBu/UR9\nyZC9QTTYVUvRV3ePfOqcY3CVa2GsRAO5LHCwLvTLHfYUivp6lzztf00EFQh1\nMikqxwabM8F3DUmH6PQfSn2zdPr6RTjVKQ8scZfV8r53tfHqMrDLlCsNOc6i\nl+PJ5oX/YuZ6scihPVoYqgiFZjdm9hDkTr7Rb0ghZHSilQXrUBGR8jAoV5dj\n55z+0j7T0YX1r8WP5UMzuoqmmbnBYGDJcdab37tYMwB/OsuqnH69FzLLOau4\nbQjVYHuN4o/JFVZkdkKMxxUF6liyCZAVJNocqiQxhTi9VAcPrQLtreLZf6/2\nt5Iy\r\n=fj/g\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIC0GudqF0DZH89JfBZ9EfOA5mbbtKvmtTOuGmOxZXR+iAiEA74s7KihzrKodaY4YAZRhwM95W6JlyBquRHnCsix2aD8="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"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"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-formfield_0.21.0-canary.aa3e078e.0_1614100461538_0.551105401818847"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.dccd254e.0":{"name":"@material/mwc-formfield","version":"0.21.0-canary.dccd254e.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=11.0.0-canary.0b4a4b2eb.0","@material/mwc-base":"0.21.0-canary.dccd254e.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-checkbox":"0.21.0-canary.dccd254e.0","@material/mwc-radio":"0.21.0-canary.dccd254e.0","@material/mwc-switch":"0.21.0-canary.dccd254e.0","@material/rtl":"=11.0.0-canary.0b4a4b2eb.0","@material/theme":"=11.0.0-canary.0b4a4b2eb.0","@material/typography":"=11.0.0-canary.0b4a4b2eb.0"},"publishConfig":{"access":"public"},"gitHead":"7c3011f1d9328f6405596f794c28c98485d9d40b","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7c3011f1d9328f6405596f794c28c98485d9d40b/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7c3011f1d9328f6405596f794c28c98485d9d40b/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7c3011f1d9328f6405596f794c28c98485d9d40b/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7c3011f1d9328f6405596f794c28c98485d9d40b/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n|----  | -----------\n| `--mdc-typography-body2-<PROPERTY>` | Styles the typography of the formfield.\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.21.0-canary.dccd254e.0","_nodeVersion":"10.23.3","_npmVersion":"lerna/3.22.1/node@v10.23.3+x64 (linux)","dist":{"integrity":"sha512-feRFJceLoyVvMyijIDNQeRsJq4lg5vp6HVr0TjytK7vxNpBhf+JAIzbF3PhBp/kzfV8/ia4OUMXt6Cv8GRApqQ==","shasum":"dc7ea40176fec0659d92a27253df5e8944531780","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.21.0-canary.dccd254e.0.tgz","fileCount":13,"unpackedSize":40620,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgOWOYCRA9TVsSAnZWagAAu8cQAJw9RnsNL0Id/wUZPdky\nrL1DtOEjwdwCd+yYI8FBCL96UI/+0AupPQzhgI48U8QiBf5G+439APv0NhBY\ndtQwdX80hgrJEXw4/RbiBQ5VbPs0YPAelsGM8rUkbfBGb23M969Tx5NGefxd\nuAB6hMvsEGImCUVrMSkpfyuVowwzntGoYGp3caMY7GZVxTmJoUMptpr/skIE\nKnDWlOsrkz1JesrkrTKPsavFUBCLZgdjTst0ZZ1rk4zCFi0dV1arqvYfZUp6\n6TmRJ7D55j/reO1M42Nvic7SRT0OSL75438anxBIt8cm2rbFv+0lecHyzzR9\nrGtzC94AOOzxzd/PszLbhkg/jJ41VcNEZ1SFq7Rx1zYwky6Hc59VRBriAerw\nensu66x58MFxPYFShjBhclrhTO4bLv11PDojaNyJ2FORukCZpKuUTeCsPJIW\nqvTcQZO6goX4SrcVvNQLsqnO4VwuF6x/7/cnjNN4gkfWQMFYO3Vp9B6IBe8+\ndSEsTSbI54SLw8tVY0p+lMBo6Ai8BV6W6LuMPcOr9SrrR73k3UdM8oHYk5lY\nUqODJQBHlg38hFAmIOMqNUEx1iFCb+iukj3ZJygipLF0g0rA2ebJxdYkHU2u\nufxhKynHHuqccUNd2h0h1BvdUsA8m9II5I7glipv9QMz1kXsN3VbbtGkwMqF\ncwH2\r\n=pzWu\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAUE9JpwZqkpnQTQ+iwa5+nE8ycJTobv5SQ+nMm5q9XaAiBb1C8tkYUMg/AoPloZFOouClaqrNSPEFYUxTU1p633bQ=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"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"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-formfield_0.21.0-canary.dccd254e.0_1614373783626_0.4563403702406805"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.7dd1a27d.0":{"name":"@material/mwc-formfield","version":"0.21.0-canary.7dd1a27d.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=11.0.0-canary.0b4a4b2eb.0","@material/mwc-base":"0.21.0-canary.7dd1a27d.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-checkbox":"0.21.0-canary.7dd1a27d.0","@material/mwc-radio":"0.21.0-canary.7dd1a27d.0","@material/mwc-switch":"0.21.0-canary.7dd1a27d.0","@material/rtl":"=11.0.0-canary.0b4a4b2eb.0","@material/theme":"=11.0.0-canary.0b4a4b2eb.0","@material/typography":"=11.0.0-canary.0b4a4b2eb.0"},"publishConfig":{"access":"public"},"gitHead":"15fa381ead1eb4897aa006da0f445765fa9a037b","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/15fa381ead1eb4897aa006da0f445765fa9a037b/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/15fa381ead1eb4897aa006da0f445765fa9a037b/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/15fa381ead1eb4897aa006da0f445765fa9a037b/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/15fa381ead1eb4897aa006da0f445765fa9a037b/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n|----  | -----------\n| `--mdc-typography-body2-<PROPERTY>` | Styles the typography of the formfield.\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.21.0-canary.7dd1a27d.0","_nodeVersion":"10.23.3","_npmVersion":"lerna/3.22.1/node@v10.23.3+x64 (linux)","dist":{"integrity":"sha512-DOkrWSL9ttCsobP5s82iXTUUsJRWojx4wXQ300RBZ/NTNEB0Tix1mTF3++nh0nX3jpA3E4D8CrTIfT5+gtv7+Q==","shasum":"5141f16b3149d779b8c91dc1eed68b5961b59625","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.21.0-canary.7dd1a27d.0.tgz","fileCount":13,"unpackedSize":40620,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgPWQKCRA9TVsSAnZWagAApbYQAIK8BVfq+JXc6TcGY9vf\nIK6vfEuFd3L53Jx8FS2izSr3LklNGfIWkPhE7Ej5VxenLSXw2dM3y5ULV3Jj\nq5cSZcdOxnQa1oOIAd2IHw22IloVDKUL6ZmkPjSaeeh5qMndafWTBKOuSoz2\njEo9XxuoHcIgBAUi1UsXOF3cWJpZ5ful0UemvlyfH2GfXJWXrtZup3U7Mbe4\na9w0IxBtGuim3XLD3OuLBzHoq+ZfCPGYGhAd0IG5rb4t0PyV/yy/TUvewW8B\naEEARkE0EoKLa5skF90/S2aSzz7qzpNco+sPKhvCSs9rgawf5wKFXtFBCmIv\nb7xZ8OXRB5cRtYu8qgP9noQiVfKnTRB/inOLIAw7pV822onjZ+iHdSmkVhNl\nxLcPXimwAy/LICTfehTGnQJ1YvcNRxGLKrDicOkgCCTwMlymFh4jjrbml7lp\n8t69wfoZc+oJV1Dp3+HmqkykuPTbj5Hfa9sK5ooovqcC2YTGTliU0AeTYPKP\n8WlwBT8/gtjRFayOK5LT/hqfTgDrDjmJld+YoW06mJgYHdY9lDcKL8nOSuAw\nIrRSw8APqPBEBaezmQhhMmz4JsDPe4y+cV8aaXUAfQgGibE+GHygTJ2oe/QM\nl3mJVP5kuAFRKwrQsRT+RJBe5MW4eTBiMblBslh7oLpsIZ7YbTvCH2tbf8As\nPwAa\r\n=xY8S\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICEIMMMiUoNWh6qR2RHnj4AxNWRs7sRqKRtpxzP3Iu0uAiEA+8Rd1EbV+XxovUMIf8dCc1gJOiLmgC59xe09c2YZu3Y="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"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"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-formfield_0.21.0-canary.7dd1a27d.0_1614636042235_0.5969431430129486"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.12574572.0":{"name":"@material/mwc-formfield","version":"0.21.0-canary.12574572.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=11.0.0-canary.0b4a4b2eb.0","@material/mwc-base":"0.21.0-canary.12574572.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-checkbox":"0.21.0-canary.12574572.0","@material/mwc-radio":"0.21.0-canary.12574572.0","@material/mwc-switch":"0.21.0-canary.12574572.0","@material/rtl":"=11.0.0-canary.0b4a4b2eb.0","@material/theme":"=11.0.0-canary.0b4a4b2eb.0","@material/typography":"=11.0.0-canary.0b4a4b2eb.0"},"publishConfig":{"access":"public"},"gitHead":"043d9159945b812192eb864b33d16f892831b4d9","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/043d9159945b812192eb864b33d16f892831b4d9/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/043d9159945b812192eb864b33d16f892831b4d9/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/043d9159945b812192eb864b33d16f892831b4d9/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/043d9159945b812192eb864b33d16f892831b4d9/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n|----  | -----------\n| `--mdc-typography-body2-<PROPERTY>` | Styles the typography of the formfield.\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.21.0-canary.12574572.0","_nodeVersion":"10.23.3","_npmVersion":"lerna/3.22.1/node@v10.23.3+x64 (linux)","dist":{"integrity":"sha512-RiE0X3H1zwBq4RSjtsGn/B8vRfcQOXKC/jI1hcVhQxiSoR2ag0JYznXeUnO4NrvJirqC5OlP/v2A1jydhScrRw==","shasum":"e264753a1f45e57dc1af56aa6558c4ba5b488ef1","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.21.0-canary.12574572.0.tgz","fileCount":13,"unpackedSize":40638,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgPqALCRA9TVsSAnZWagAA5NwP+wcJ49Q2n0egZ/gQWZDj\nY+89t6iGeB7yEp1I8RAbq0MW9vE31u+1XdjWDbjIpKEsVaptyuZfDLHxt58L\nbqBK/yNBHg11fTSt7whMJT6JkkbwS7/+O4Idf5QMNruRW4kL9RgHLvq4fzop\nKPnXb+aBa9qU9vPT11UnT+DHDqD1VYlJp9RcFzqYHpQ/Tqy3r3nQ3DMfPhgN\nfkz6/kQTmDJjdOU0tsWZuNiVeqLZjNQ9Hd9QpVihsl+6YF3KPBKeHZkUB1AO\ncl7OWfADXApFKjBiCLA0rDw5bLll+cRw7b21Oebecp6voS+3DWA8tX9wgnOI\nFnLTpN4OOR59MuJ6J79gmKtdd6TI7+kX5bDU9aQkEeVXVJoO6ENbItqGh9eC\nVzxI/yTDn06ofi3oIzUpkHsbn2BgPkVyMgCgNjgH2QrATtMJgTgPIpm07n8K\nfUUgxy3EQQHcqEaVDBVwzf2WXIhi5wrPwQHRqX1nTUGWK1gMyQZDyPOuNNma\niclQTJhmuOkBaTzS2eZ8uSotiBurlE0cFCh4D9Ztx4B3V1eyJdspXvtzW3ka\nzSzhrxaX+Tg6KW9YaQCk6wpwHQyNwJx7Tdam6FM++uJW0RPH72LRfOjXeS/I\n8qdBLSaCMCeJwxDNAR9SPaNCGwSp98FAqozqj1V202T6Y4JdKLu/WnvKMd4K\n03Yb\r\n=YcTM\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIC/TT1X2iHLlSxv52QEPDQjkvUG+mj4Stwf3Cef/NZAFAiBkmf+LD40bAFqLf2p1nczbOuzkN6trTyiYSAbQ5tomvA=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"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"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-formfield_0.21.0-canary.12574572.0_1614716938604_0.5223057762110748"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.1109a3d3.0":{"name":"@material/mwc-formfield","version":"0.21.0-canary.1109a3d3.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=11.0.0-canary.0b4a4b2eb.0","@material/mwc-base":"0.21.0-canary.1109a3d3.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-checkbox":"0.21.0-canary.1109a3d3.0","@material/mwc-radio":"0.21.0-canary.1109a3d3.0","@material/mwc-switch":"0.21.0-canary.1109a3d3.0","@material/rtl":"=11.0.0-canary.0b4a4b2eb.0","@material/theme":"=11.0.0-canary.0b4a4b2eb.0","@material/typography":"=11.0.0-canary.0b4a4b2eb.0"},"publishConfig":{"access":"public"},"gitHead":"8cdd512cc62bfc703a1cc766d67d04509e4e0c08","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8cdd512cc62bfc703a1cc766d67d04509e4e0c08/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8cdd512cc62bfc703a1cc766d67d04509e4e0c08/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8cdd512cc62bfc703a1cc766d67d04509e4e0c08/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8cdd512cc62bfc703a1cc766d67d04509e4e0c08/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n|----  | -----------\n| `--mdc-typography-body2-<PROPERTY>` | Styles the typography of the formfield.\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.21.0-canary.1109a3d3.0","_nodeVersion":"10.23.3","_npmVersion":"lerna/3.22.1/node@v10.23.3+x64 (linux)","dist":{"integrity":"sha512-qHlbblwBdq2EUfNZhzMFzBkDSy9TK0KoST7J9jufoFLilirN15itoXP8oHZUIg+ExcMdDWBHJKBmYlNjGEAiww==","shasum":"c9ee2cfac4bc56f18f6a9a7eb95dbba4df78e1fa","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.21.0-canary.1109a3d3.0.tgz","fileCount":13,"unpackedSize":40638,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgPqE1CRA9TVsSAnZWagAASJAP/Rdg/pCoJJacrS3P7ivx\nkbuaLkGRVTx7C8QgRZdUiWkH4mCLgVWkaoX0Yc/kvEv15SZ6OmAg3ZqWVxzA\nRhgD7ojAnXFgkOJbinaNMRIsLACouJ1tQHpHofDNx6w59BptTTnTYCT98GgB\nlur7zPJWbGn4xQUxqXC8OsHgYgnInYAZ6Nv4Cmtyn3DPoCExL5NxhDEubu0S\nz6rLX325BdQoNn8KhWKsGR4Ky8/EUBibDzC9nu9x+mLlv1Cn/wprzFyFCgIK\nX6hk2iVX5N0Fu3HNXYJzo8XXGwh1odKuXTxZLWeeyF9kbbFml1KDCspp4iEg\n0isWpmxjF2ekzjW0RirOH6NQa7VhyA1fE0/cnDq+AfCsFqplFe/Zb29F3JDl\ngo0J0OVlyQX4ifL0UdOZlt/rp61YSjqwMhWktjyf5W6vi4S/D8OT7wEWxGmd\ntOmzV4C0SSfYCgj1SthWHqBRjd+VDF6rkT/PuT8dA7iwG7B0rsAqkRosTkun\nbzaiy4movxDc0r90SW9BTSj6z3xt/ihqoPFaTg5dmCpc6xTh5F+nbc1/XosH\nALvWNEfWavkMY6irUbzJl8DmR7VGXqotQxaQTxYvyrBwmtGdZ6vpjZAnzLDc\nzy709mUde6mv8iZ1d7KUxzLuNK7BF1tX8xJ4svp01Sv3d3ge3LT47aJjyPoJ\n40SZ\r\n=zZZc\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCckED+rBeZG/UCCzxBN+TPBd1ZdnD7sUZEQ2o/wOcKpAIhAJENxkVLlrLOk1s/21oA3sl2p8Kiff1mvTmUk78kqoEO"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"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"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-formfield_0.21.0-canary.1109a3d3.0_1614717230212_0.5654406804899987"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.b9cd8739.0":{"name":"@material/mwc-formfield","version":"0.21.0-canary.b9cd8739.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=11.0.0-canary.0b4a4b2eb.0","@material/mwc-base":"0.21.0-canary.b9cd8739.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-checkbox":"0.21.0-canary.b9cd8739.0","@material/mwc-radio":"0.21.0-canary.b9cd8739.0","@material/mwc-switch":"0.21.0-canary.b9cd8739.0","@material/rtl":"=11.0.0-canary.0b4a4b2eb.0","@material/theme":"=11.0.0-canary.0b4a4b2eb.0","@material/typography":"=11.0.0-canary.0b4a4b2eb.0"},"publishConfig":{"access":"public"},"gitHead":"89fe0448abab4c371af17b2866ec736d9ebd8cae","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/89fe0448abab4c371af17b2866ec736d9ebd8cae/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/89fe0448abab4c371af17b2866ec736d9ebd8cae/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/89fe0448abab4c371af17b2866ec736d9ebd8cae/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/89fe0448abab4c371af17b2866ec736d9ebd8cae/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n|----  | -----------\n| `--mdc-typography-body2-<PROPERTY>` | Styles the typography of the formfield.\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.21.0-canary.b9cd8739.0","_nodeVersion":"10.23.3","_npmVersion":"lerna/3.22.1/node@v10.23.3+x64 (linux)","dist":{"integrity":"sha512-+ag+Rt5No9VQ1X8CEmKSra5nBYGOAxyuKaU0RdPm7oGJkuvxHce98lGWPiVrtxTNZ5pU3ZulxdmSbcvau6DG0w==","shasum":"7f5fe0cef0fdeefb57f7c6357bd347005b69ab31","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.21.0-canary.b9cd8739.0.tgz","fileCount":13,"unpackedSize":40638,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgP8ttCRA9TVsSAnZWagAAEM8P/RdO7APYJxIuDBFD8Fa7\nBz38l1P0VA2Hx9RZ7O1TqNqaHrkOxFZjkDZCCO6s/t+pnEQKCptHde3scUmw\n06yjEvRAgtQwsbqpTko96kloeTN9STaLUXPZvPuppEN3c/ReYqQI2SnkAC9B\nQBX8OlIiXKtWox/aAiKfHseqrDSLv5fGQ7T+nUry2jpDKUWyrSg8+78WuJyS\n5J7r1x1UCEPB6PTTqm2ISbwZXEMmYVr5Md9R22GW0aqwS5X7NkyJqoYJ7Voc\nEvTI/h35JK+D7/GtCTiz3MPtlOvxGmqSkWKaWjoB+pxQVdjIQ+Mr+YlL3Uwe\nAo5sR0Ged3UQeMZDlPaRkw4qH5AS9ZeOUJtU0fpvYUK2BV+v8FRCxBjQAL+C\nNbetfrALzrkS+amN5whq9YYVH4mVMoDncXwyUFjf9zObS61UwEE76SYXkV5J\noZVytipkS+cX80nYMKcgvwg1jtP0SXYt9j4JyLZFSf1wBdvkTxsQVrzLzGx3\nDEgX3PQ6E1/4pMH/hYeoXi41rJdgQMQxeKXwWkSTjq5hRVPq1uH/HG7a6oCB\nbhPdCiqGcwDMTyaGm9zqDSgV8awoGG+mzpZkl79aeRkc57QWBaX5s7z2gM3o\n2zvhHlzUIPKhJINcx8RQIVaYtPewmSQd27EEMV85G9tthdIuB/frMk4L5Nod\nAh5F\r\n=Rl2R\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD5tx5L0BD1ySWvOAKQZYMYiT73r2zASTe4vRdL1vJNhgIhAItimmJdQYo74YIC7LibZjZHfHtsi+Lb03kkWylMo3Up"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"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"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-formfield_0.21.0-canary.b9cd8739.0_1614793580805_0.4574235766243957"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.71ee796a.0":{"name":"@material/mwc-formfield","version":"0.21.0-canary.71ee796a.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=11.0.0-canary.0b4a4b2eb.0","@material/mwc-base":"0.21.0-canary.71ee796a.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-checkbox":"0.21.0-canary.71ee796a.0","@material/mwc-radio":"0.21.0-canary.71ee796a.0","@material/mwc-switch":"0.21.0-canary.71ee796a.0","@material/rtl":"=11.0.0-canary.0b4a4b2eb.0","@material/theme":"=11.0.0-canary.0b4a4b2eb.0","@material/typography":"=11.0.0-canary.0b4a4b2eb.0"},"publishConfig":{"access":"public"},"gitHead":"d989f6470cdcdd144c7021a4eb0ea47e63945cc7","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d989f6470cdcdd144c7021a4eb0ea47e63945cc7/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d989f6470cdcdd144c7021a4eb0ea47e63945cc7/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d989f6470cdcdd144c7021a4eb0ea47e63945cc7/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d989f6470cdcdd144c7021a4eb0ea47e63945cc7/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n|----  | -----------\n| `--mdc-typography-body2-<PROPERTY>` | Styles the typography of the formfield.\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.21.0-canary.71ee796a.0","_nodeVersion":"10.23.3","_npmVersion":"lerna/3.22.1/node@v10.23.3+x64 (linux)","dist":{"integrity":"sha512-GG7du03srDLzXz8XFhWy0g0Is4UPgiq9INMAiga5+IqckzAEDhytqKPFm4gC8p+Of/w0xLvDegKFB49U7OrUpQ==","shasum":"994bec08443adeb80ba535f9fe0533a516530b2f","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.21.0-canary.71ee796a.0.tgz","fileCount":13,"unpackedSize":40638,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgP+0yCRA9TVsSAnZWagAAWZEP/jsyn1Ir3qzLR4Gi0DHV\nXMngrHyRlY2bKPlsteH3k48a8qo79JDa+RvMwlTGJ4uq5a+9Mp6Dh79RefMF\nnmlfrV6v7/13Ek6PioQXIhM63kNfNeDVgWYL4QppLpViVH1/nkLo8Doz9C1x\nTms/b1+hQ4w/hWmUV9yRotAW1AZZU2w+Gfp31HH3D0Wno92Uc9XKdJXfJPC4\nsyswF/83M0aqzsHTJ1nBDi9pQX9PvzksSqxBIrVI/F60PbvXsAEbTRSwSRU/\nH0+ZdnehvcC2fhBh3IIcQOKG1nYw+4q0tV5455WH6qU3fVX/I4wjyNFm9wyB\ng4iC51p4trIx+xjtglOVzmNsetRWkmdlfFbsZwJBw4hP7zI3osCKkawJinJB\nxlzsfXEgkRwXXpgm6hmsxRPHmp3drYCaMdMdiO5jS6nPWy0C7kY1mPwyIl6L\nAWQNjQ8qXb8w4qYQbr34kPS4hVV0pXez9Ohn/Vmv1L8NTMGbP5ghztalaKgA\n+JKVdlLWyPjgM+XssCiDIgWnAuT5ri5VnbBG5r+j1PCvakTHXuUKJXFv8cg5\nXTP0aum6XCX8cUQrwwqVHiWjl9I4Qh/1IFR2xw9j/yKjQNHtD1Jm2BDw3Q8Z\nanEBp0+EsObVBxL+BPJPLCwDp1vFjVLE0zcbq/vIS3TtDCRKejqIbKFPFNE+\nnD/f\r\n=oAI6\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCF5Ya7YWbHWVLSA0ZCzy5lKprkSN2XG7kNHX61VpbZPwIhAMMs1Iwx9AGhoruvj9N4xvEWcM/6UUVggFzv8QM1MvBh"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"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"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-formfield_0.21.0-canary.71ee796a.0_1614802226137_0.3859051393138373"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.2be191ed.0":{"name":"@material/mwc-formfield","version":"0.21.0-canary.2be191ed.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=11.0.0-canary.c7d98fcde.0","@material/mwc-base":"0.21.0-canary.2be191ed.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-checkbox":"0.21.0-canary.2be191ed.0","@material/mwc-radio":"0.21.0-canary.2be191ed.0","@material/mwc-switch":"0.21.0-canary.2be191ed.0","@material/rtl":"=11.0.0-canary.c7d98fcde.0","@material/theme":"=11.0.0-canary.c7d98fcde.0","@material/typography":"=11.0.0-canary.c7d98fcde.0"},"publishConfig":{"access":"public"},"gitHead":"e273563187c689092eb053c50fd9b94385380fb8","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e273563187c689092eb053c50fd9b94385380fb8/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e273563187c689092eb053c50fd9b94385380fb8/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e273563187c689092eb053c50fd9b94385380fb8/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e273563187c689092eb053c50fd9b94385380fb8/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n|----  | -----------\n| `--mdc-typography-body2-<PROPERTY>` | Styles the typography of the formfield.\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.21.0-canary.2be191ed.0","_nodeVersion":"10.23.3","_npmVersion":"lerna/3.22.1/node@v10.23.3+x64 (linux)","dist":{"integrity":"sha512-O37DH/5iGcNziZPzzrezPLiWzdq79YK+pOIp14QA+VH3e0vO9R536BcTzIoNnQUDfejXmBIMKxzUWwa+s/Zw9g==","shasum":"342031b16169124f50bc7e4eb3e5d5c1ae0e46d9","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.21.0-canary.2be191ed.0.tgz","fileCount":13,"unpackedSize":40638,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgQATDCRA9TVsSAnZWagAAltYP/1DFDJnIz4YUz0LqbBnf\nOkOVQvLjkMDbIX/30smppM/DhX0JZuOYrq9DhNzHaqQ3hoJrcyFXZyL5ZI5T\nI6CJ/yTMI9m+h1R+hR6S6gPaASfiJPJgp8tQ7/rHRQyL9zlnWwSTVpJA0Vw2\njroW0pxKKmaZlMEHdSSl2XatVhaA9bTD9ljSKgWQZtqEpWtMzFez1N+3VxSf\nlihkrrM95AENUyqaYyzYARWbAOf2q0LuvVzbtl/Ztz46Q4ms5rGPftmMvbgx\njLWwtlinwwojWcojkWlZ84OSSIWWLhujg7ujD3GGqkR5JHrn7/65bdXFkVJI\nC/160ClwQRsA5OwCMZrGDpYfrxmIKAwNOgNkRAdYlClMabwSO3jWeBnMlFss\n5XhSEBcgDgNj3RaYrrspMIlIcgyF8v7dtTP2YOBNBrshAIEj+RT2uY6JppLp\nk9/I3MrcMptnq/KO+NkF5NBMUHsRlkKix3XeAol3YCFlpfsUfJTIcmDlAKWx\nw4OT9YslNtZzeFttAx1BcEtkwdBAQijiNH1rCEV96L+sRTFi1Mzn0OtPW55M\naCa7CK/8FEJiOl6bsXAiDrhI+AUiRYTyTG0XVV6dWvrdKXa4J2vuo0Lwnl4h\nrUI39hI8lYE1E9TAyODS1jCQnlqfRoZUd+GoAOU+IDVnCk4weaP26v6cbKQw\nlX4c\r\n=Phmq\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDK693n+vMFkwIiuB99Qs09hqgaRZ3P5O+nwXFVfBEAswIgWZyOnSd0LdbtfMmRSFyJ1BLYAnOK4plc7ksw/C4X8do="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"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"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-formfield_0.21.0-canary.2be191ed.0_1614808258809_0.8433478683763476"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.6dc7b06f.0":{"name":"@material/mwc-formfield","version":"0.21.0-canary.6dc7b06f.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=11.0.0-canary.c7d98fcde.0","@material/mwc-base":"0.21.0-canary.6dc7b06f.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-checkbox":"0.21.0-canary.6dc7b06f.0","@material/mwc-radio":"0.21.0-canary.6dc7b06f.0","@material/mwc-switch":"0.21.0-canary.6dc7b06f.0","@material/rtl":"=11.0.0-canary.c7d98fcde.0","@material/theme":"=11.0.0-canary.c7d98fcde.0","@material/typography":"=11.0.0-canary.c7d98fcde.0"},"publishConfig":{"access":"public"},"gitHead":"9a8a072daac91e9fc841e2f6cacc0fb753ada76a","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9a8a072daac91e9fc841e2f6cacc0fb753ada76a/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9a8a072daac91e9fc841e2f6cacc0fb753ada76a/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9a8a072daac91e9fc841e2f6cacc0fb753ada76a/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9a8a072daac91e9fc841e2f6cacc0fb753ada76a/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n|----  | -----------\n| `--mdc-typography-body2-<PROPERTY>` | Styles the typography of the formfield.\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.21.0-canary.6dc7b06f.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-JERx6LHHr4nqwqJEtskYnvPiWLFwmD6jaFXLaMDiM0d3a734rp7z6qzsnTz2BcENwW+f+ghdn3vnRM48XIhCqg==","shasum":"45458ee9885ede54b9e8eb66b32794a4c5835192","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.21.0-canary.6dc7b06f.0.tgz","fileCount":13,"unpackedSize":40638,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgQXmXCRA9TVsSAnZWagAA490QAJJoUUzBK6xe2hc45g7T\nCllJhdyDGnEcVNye0Ok8NRxobKHWXB3CYyJXHT4EQxlOmd0s1XP6hQO7gMDK\n/LDhl3n8uK7xCmDdTeA/bbAPW5AbOqL3/7jX3MGHYCrD8KmT6rg28qktHJ7i\nr2oN/QMTvYsQqxuNRhS6UaC6KgxTfg8wFTYKZI+QliI3Qb0K0SqLq1HNPSQQ\n6CAKJDATrSAz93h6z6OJElhk4v9zIZXxTuqti6wWItid/75xCp3RNt6zm9fs\nxjdrOlHgJjOq/iGi8VT6lBgQpstF7lKuHtoGhWbeGGH8TigSSxh6zqODQ+Hx\nzKkvNntpIuJv7S3uJIhCIAdmIY+FX3FKG56/rQTA+V+aNCXP5D/LI4QNHpk+\n09EZFdcGfTN7BshUUgZDqF28QKn5ojR9rbmpzzpYxVHJgWAKAn8KseGfWxB3\ny6djE0wNli4+xpTE7qTNSnXHWlAdlpuocvr8HsvmF/X0uYE7mlCUSBM7Ikcp\n9/tmfBbTbluVLqrvy0bOPkwe3G+3DaMyE4mViGaMyLBw51PQOZZytiPgfW+d\n3jwu1PmIl8axcO5+gagCQtgmWfoH8eYrWZxrlv94oLwV6xBXNhcDHEP8Qv/J\n2bdhxWJM02Ny+pC3eMRcy1JLC9SqyzPMZCbyZxIJJMe2BIFYUqyAHwgSOte1\n0F8O\r\n=PvYQ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHwqDF7CpalQ+BfepDYR2wqLRSmP9aQCp0YiPuSBqKdzAiEAstx8ZHvzMzOUoVbdgBQY+84uJXDGYpz0vp1I7hHoiBg="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"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"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-formfield_0.21.0-canary.6dc7b06f.0_1614903703219_0.39833108931451733"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.24fe7ba6.0":{"name":"@material/mwc-formfield","version":"0.21.0-canary.24fe7ba6.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=11.0.0-canary.c7d98fcde.0","@material/mwc-base":"0.21.0-canary.24fe7ba6.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-checkbox":"0.21.0-canary.24fe7ba6.0","@material/mwc-radio":"0.21.0-canary.24fe7ba6.0","@material/mwc-switch":"0.21.0-canary.24fe7ba6.0","@material/rtl":"=11.0.0-canary.c7d98fcde.0","@material/theme":"=11.0.0-canary.c7d98fcde.0","@material/typography":"=11.0.0-canary.c7d98fcde.0"},"publishConfig":{"access":"public"},"gitHead":"d87a6c320af38bd078f91bc9ea457c0e21cea9cd","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d87a6c320af38bd078f91bc9ea457c0e21cea9cd/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d87a6c320af38bd078f91bc9ea457c0e21cea9cd/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d87a6c320af38bd078f91bc9ea457c0e21cea9cd/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d87a6c320af38bd078f91bc9ea457c0e21cea9cd/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n|----  | -----------\n| `--mdc-typography-body2-<PROPERTY>` | Styles the typography of the formfield.\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.21.0-canary.24fe7ba6.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-bqgV/UVKBOu9SJaQpaT2ByBr2iEIigArpXkotim6xaKNtGtnJFNUi5Z3x952XaP4Dd8N323gXsnIeBSiPcUj0A==","shasum":"0a2e71a3b60fd31d4f8d0c183ac83db95fce89b6","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.21.0-canary.24fe7ba6.0.tgz","fileCount":13,"unpackedSize":40638,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgQmnRCRA9TVsSAnZWagAAnLIP/jxxA+UjdIGpaSld7bko\nPilchxg1r9PSeHuAED2z5bhFCMhbwU1fejQBPcejgKLFfyYtO7aO5NHv1yvi\n69tTgd08NLiuqRWvtmfOy3xavt3iuumN5Kc2UPEu/ywxv+rFAdSv9C3RYgnT\nnwO5K7mDmSc/QewjuflALWtBQTtD3M3R0D8lia1gVapDsD230HQdNmLq1exO\nG96tpM5MzaY+C4reiKnepyHdkNgq1fPZ4DS66ci/Cz5aTQV+TN/Elshlzzs/\nzsJrEIuIno5BtP4EOb604L4tyBsH6G1RnnZDd1yP/J7DIiznm5/4VyHQO59O\n5zm8XeDSowFIsEVIg48X6lXrz+gMcVJbzwZGvxr+ZO49vdjicgVJwYAyKiiP\n0YbjN6xdN9PY3gw+HCWjR2ADs+0CpOyWZFKU9oyhEYuZCLCJvjR83qpESYz3\niOVlyWecMJCStxI2d2Pg27YrRZa/PIocULh6XZ2psbMeyboVhDZ6fk5EIk+4\nYf7a09sVccel48kjLnpWmkKgWcFRKwPuSDY2r/LfBbWwjEfGnWZSGDXqaTt3\n7i4Gu7cUwac6hMMjYxgcNlPDI6nhQVilY843mv2TdmSmsWO1dkOkuOZKakMc\n3Ugs4h7JGdxl/K/H3IJ92jAEvTEMZe2dg8ryjhIzpymOrKBa5apc1xVOHzYC\nitlX\r\n=v2yg\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCs/parVLPU/h1CmNPDFDSZ7/iV1uEQNU/Ls9WrkWLmmgIgPJ+/LbFYFxBnVC0EWSWG48sDspPFonWf5wgPJ2f/m60="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"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"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-formfield_0.21.0-canary.24fe7ba6.0_1614965201269_0.06455632171847436"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.12c477d1.0":{"name":"@material/mwc-formfield","version":"0.21.0-canary.12c477d1.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=11.0.0-canary.c7d98fcde.0","@material/mwc-base":"0.21.0-canary.12c477d1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-checkbox":"0.21.0-canary.12c477d1.0","@material/mwc-radio":"0.21.0-canary.12c477d1.0","@material/mwc-switch":"0.21.0-canary.12c477d1.0","@material/rtl":"=11.0.0-canary.c7d98fcde.0","@material/theme":"=11.0.0-canary.c7d98fcde.0","@material/typography":"=11.0.0-canary.c7d98fcde.0"},"publishConfig":{"access":"public"},"gitHead":"ea7731f325b77f7ec93ac77e442625ecf14e7f25","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ea7731f325b77f7ec93ac77e442625ecf14e7f25/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ea7731f325b77f7ec93ac77e442625ecf14e7f25/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ea7731f325b77f7ec93ac77e442625ecf14e7f25/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ea7731f325b77f7ec93ac77e442625ecf14e7f25/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n|----  | -----------\n| `--mdc-typography-body2-<PROPERTY>` | Styles the typography of the formfield.\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.21.0-canary.12c477d1.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-KSCk8KReSilRJuolz3jGGQsJaOwfcFdaLW0RKcCmHPoH3MPWkxbZ9At7WslTJ3pWHKe9fLwrEWeKQObAyyg3kg==","shasum":"360a9e06fdbc2299764586c794bb2a542160625b","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.21.0-canary.12c477d1.0.tgz","fileCount":13,"unpackedSize":40638,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgRqPLCRA9TVsSAnZWagAAh9UP/iUr6dPEeSOSC7LmqDdS\n+R85g5Q5p68bqAk5AXfrzlmibcKLtjl6nH2TO77KLlYr/SitLDAL4pMDwCDQ\n7GQ6VTdrTC3Vy2d6Q3JoHVq4do7AufVOTDT5RW+Aiet/ytLQ83cQ1qinX/TG\nyeyA87z/k6AGYAB1KoRjaDM6KTUN6ej03pIyDXqk1VBsvjGfnCtRUe5OLIez\nSWEvBSzF8KMJ91/63kpG7jvhV1znAYkLIOVY9az3yqKeFStWsERqBS2VRy1I\nZTb6mxSwsIp1yfgX6Kwt1tivYFCiTMQlfJcdfgGsl9UdMeajwMEZNbrzchaN\nSNOoGbCX60WymjDlJzG/R/E1S/OUXoe+QAL/r8MiuHQqN7mSC9A7frpCPzP3\nvInPictgHz4l3X3c+l343kFl+ktRkjFxZBHmYfjKCoeR7moFPkybx922vcNe\nszcF8Ouc6Swakaxn4mjdyBre1q3j91Bzh+eAZ3uVwDgcyI+yxlXK8e9l+Rlc\neu5BkQyFTUAMTjntNk7LbR+rgEcTFLdhnOVPD1NGGmKy42xqVnTCqLYi16mq\ndusITv53xPlOKXRjKFbqvEPw0V2Ue1/Fa0AoeqjFSyw1QiMGU2VgIDPc1dQf\n/awlpiO5hz0lTNE8rerqIF+9Eo7VnoF/QhdaRzyqoRjN9xh8uwQtpCR9tRLN\nZr/h\r\n=/Cs8\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDjNKjxjOBUlEYw3+BS17Bg2IJvAtrgETxm9Xi4oZUXgQIhAMiDnBjCZv1Bcyabw4RPnDg7SytJ8183ARCeso7aRmfe"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"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"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-formfield_0.21.0-canary.12c477d1.0_1615242186931_0.7896106774649783"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.4c38f801.0":{"name":"@material/mwc-formfield","version":"0.21.0-canary.4c38f801.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=11.0.0-canary.c7d98fcde.0","@material/mwc-base":"0.21.0-canary.4c38f801.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-checkbox":"0.21.0-canary.4c38f801.0","@material/mwc-radio":"0.21.0-canary.4c38f801.0","@material/mwc-switch":"0.21.0-canary.4c38f801.0","@material/rtl":"=11.0.0-canary.c7d98fcde.0","@material/theme":"=11.0.0-canary.c7d98fcde.0","@material/typography":"=11.0.0-canary.c7d98fcde.0"},"publishConfig":{"access":"public"},"gitHead":"2f19e904d6306b3a12d41b0158ca0c3fc34362db","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2f19e904d6306b3a12d41b0158ca0c3fc34362db/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2f19e904d6306b3a12d41b0158ca0c3fc34362db/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2f19e904d6306b3a12d41b0158ca0c3fc34362db/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2f19e904d6306b3a12d41b0158ca0c3fc34362db/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n|----  | -----------\n| `--mdc-typography-body2-<PROPERTY>` | Styles the typography of the formfield.\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.21.0-canary.4c38f801.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-NF+uaieWx/vwdmDd4MXXU/J6jFrKIVN3RphZqfidj4Y3X51ycKfDFidjKFEN6PaMGRPTw4ZA3wZLY8l2nTH6dQ==","shasum":"ae0f18e1a37255794b309f7065ebef841f341225","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.21.0-canary.4c38f801.0.tgz","fileCount":13,"unpackedSize":40638,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgRrIXCRA9TVsSAnZWagAAEOoP/j48Ap4DEJA2u+tkZWhG\nb8Lszqz/quRMKvgI5P48lqrJmLgjUfMgLAUjZDchc/XmVm6bv1OsxEbElJYm\nq09yNx2w0gBPTgmsZvtUWvSgDkVWZkVWZ/fDtpXqkA0OSrTpf3npyS545Fm+\nbBZTI/z9Pcwi1ddcuUL0KuT2MQpGcvz0ph+3d2XnBdvVQBrIFVEIR4XfdW9w\neOkhngAnkxQv21L1SoNZiYSfeZGj78J32aw6dEZ/lDKKc/tRIkMP6CzEUyge\nJURr2yFLMxjrW0Ck/g/pLzP85TVEN6WEgBtpJ2s9S/0p97ZVc7JXdD+T6hCM\nj6rb/O2ZjX1MPk+67shNZNX/hN8jveg9oEenlr/vDa77H5LhUDFFUBpcqbyq\n6a5FB+NMNtMZELhFxlQra0y0ILFLiHudi0XLBWkbfw7gXt0lDif7joTGcphJ\nHID+9nW+TPust3h656HNtpkAbKgQKbQi/FkkFrt1vYRp8a9bepUx7YyHcJAE\nCdL8U3zAeRM/a0SNIkuUgYKOyx/69Tw/+DP99Kp2awkObe1/r+QZ3thqjkGU\nW1MtV22nRPaanamNo6GxmrzlJtDolW7MFQFE+gZLljMaNpRlitKUW2Z0JQC+\nS04U4Iai+BpntRz3FWlglv/gqJrenP+XRHdPiahZV1+rAr4YPQv1R+ehyt5w\nVcWa\r\n=x4+m\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC+CJx6GQty+1wVHFzw7k5c+EOxPzzoKJZKQ6/4hYoGLQIhANoM6EhmVD+a958W+ClzTPtJHWEHGzER1z3e3aRxl7jP"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"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"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-formfield_0.21.0-canary.4c38f801.0_1615245846007_0.7531698927534716"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.8795b83f.0":{"name":"@material/mwc-formfield","version":"0.21.0-canary.8795b83f.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=11.0.0-canary.c7d98fcde.0","@material/mwc-base":"0.21.0-canary.8795b83f.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-checkbox":"0.21.0-canary.8795b83f.0","@material/mwc-radio":"0.21.0-canary.8795b83f.0","@material/mwc-switch":"0.21.0-canary.8795b83f.0","@material/rtl":"=11.0.0-canary.c7d98fcde.0","@material/theme":"=11.0.0-canary.c7d98fcde.0","@material/typography":"=11.0.0-canary.c7d98fcde.0"},"publishConfig":{"access":"public"},"gitHead":"e3e75af3d23a6f47c66e86d2168ac672364726c5","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e3e75af3d23a6f47c66e86d2168ac672364726c5/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e3e75af3d23a6f47c66e86d2168ac672364726c5/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e3e75af3d23a6f47c66e86d2168ac672364726c5/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e3e75af3d23a6f47c66e86d2168ac672364726c5/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n|----  | -----------\n| `--mdc-typography-body2-<PROPERTY>` | Styles the typography of the formfield.\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.21.0-canary.8795b83f.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-Adt+jDotMEmkXJB8lFpqCQY7NkKIgqZHWU+VDnWsJpkMHohqqFdHLI3PiZpiECLv9H1NiKljQ4zNslh05sWrEg==","shasum":"115e8892ed877edb476c9116dadffd107558a1dd","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.21.0-canary.8795b83f.0.tgz","fileCount":13,"unpackedSize":40638,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgR735CRA9TVsSAnZWagAAChMP/joVhNc6X6dHCt49XT/J\nJcBZrm2nELGEfqFAzU5cVNPJujMA0hr1tIS5HfwRP0ipB2wwW4icTuGVuZ9k\nvs4WPKpYYw0b/EUfsFXLg1XnR9Qq+2bQVOOHSZ2Np7ti9BaYgaUvhJ+MTB6m\nkCcAhBs07Vs8OTj+1rbuIW05biEWcvgDYKFjBN342mECZLbZF94LaIaOFKcn\noxSMMajiXRIlOwWEZDcx2PhR2ZwndU/rm6Yv36Yfo+UwIiof6Nrd1d7Hyg06\nLgOdRLXm6beOazxUDoKydGrrJPIXg7oY1g/s8eiqhkgcSe5BEaiMeIOJzhOP\npBpY0ASRW5Rhm1ACcO7uHmR73Owi3712YkQhlXUDfbSp7/ufK3hHPIbdpLmD\nEKoJOtumTaM347Y1MzrNtUvE/N9rH65bv6rteXmEj1K8Pnjbil+k0APi7XBO\nM+QYCg5xftWryjsyhpE0TJwRv3r5lbwjFaZcnl+CqvV5jXuBWnUSKAfv6oFl\ng89bg9LYmWQ76lpr3wtIuvdaZr3X9aFsrxwdlIoXqcCt5k2nuTyb3DJanr1R\nFgiu/Q7V/euuUYoMuj06hkWGA0nATRzwz+NCMKCdgTXkRsc+OTFRQCG62mag\neUiXJGifq3aB1C0hxqAx6VoQVNZGMf45Uz6Yj4FnhCZY+N4v8I6f0yXj0SBp\nURq0\r\n=XT+L\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIH/GK93WLc1DwI6PrAVmc9hAMXKIT0od2ZmVX2VmrllRAiEA87DysBPPFYBFFCigO/gGN4z395hf8gxHuwaSzFsxgSY="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"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"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-formfield_0.21.0-canary.8795b83f.0_1615314424432_0.33096404599913387"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.12b84cb7.0":{"name":"@material/mwc-formfield","version":"0.21.0-canary.12b84cb7.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=11.0.0-canary.7522dcaca.0","@material/mwc-base":"0.21.0-canary.12b84cb7.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-checkbox":"0.21.0-canary.12b84cb7.0","@material/mwc-radio":"0.21.0-canary.12b84cb7.0","@material/mwc-switch":"0.21.0-canary.12b84cb7.0","@material/rtl":"=11.0.0-canary.7522dcaca.0","@material/theme":"=11.0.0-canary.7522dcaca.0","@material/typography":"=11.0.0-canary.7522dcaca.0"},"publishConfig":{"access":"public"},"gitHead":"1f49d8bf5098f7acbc51aaf3dbc6880cbd46a2e8","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1f49d8bf5098f7acbc51aaf3dbc6880cbd46a2e8/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1f49d8bf5098f7acbc51aaf3dbc6880cbd46a2e8/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1f49d8bf5098f7acbc51aaf3dbc6880cbd46a2e8/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1f49d8bf5098f7acbc51aaf3dbc6880cbd46a2e8/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n|----  | -----------\n| `--mdc-typography-body2-<PROPERTY>` | Styles the typography of the formfield.\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.21.0-canary.12b84cb7.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-NC2Dbo75AWy70TSKCpLx4ZxA9MckmazG0JCxY4cHkf7Zlyb96tmCI6LLCqTzMCrTkRR5EJFWBg93hJZsqpbAgw==","shasum":"e771e0354422033b8db63e1f5ec7b7094ae4f532","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.21.0-canary.12b84cb7.0.tgz","fileCount":13,"unpackedSize":40638,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSBWKCRA9TVsSAnZWagAAfdgP/2aRVAuZutYHIIflWrJQ\nuL5Ih9zeH3aw0aiUckPMAtO3Na48h4Asfhd5/QDiKq80gaVwUU9rscgOdAjY\n2JtpcsyRpv4b2qakQf5Bzpnn72L7YhTBAqfZIRIx71zppHj71wkyKBYfJVjs\nn+qQhzYG12f4vPhFnAzXvYn3PqitJvqWN+l6ycXPoRPECMeHYUqYdBrDzvey\ndSod3TgtFds8tNE9KGKxOLAQh1xnCOqlbz+TuUHcO72rfDER+mgJhyhbJYYf\nsceqA77y+yjNuFEl5u3BOwu2+iUdrCgkVW9wRhdO1oSyn/HSQbqmfnNsj/re\nW5cYF/lrRX7/JWgBkzne6ClIvyx7CkHT1ClxfrXwCDD/IFMXON1SJArkHB+D\nPpEhyQDsSlIQwOCWIORXPTDULlLYrtO67PIgEDtB3tmbvYXBtvC+0WGhFemz\ncj7U5/XCoBZHIdLLHP94pdAzUx7rkBpLzuWvyQlJkUqSHpMK0LKH8voYg226\nx6sGS6eHl0X0Qibs/lDwfCUr0Lsuelm9leDe5IwZ5pPGD3KJkdmrNVxYtzVD\nOekXJFQN8cs0sx6xxrgNZ7F/UbY0BB9Sr4Jzh0ELSh6ZriwFuhjM3+2ohpsA\nNyNESXFm2rcpbWHbkewTrOouucNjhT/JEJoH4u7Gc7doTmpTCFo830AvMBQW\n1sy6\r\n=pTFu\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCDqyOXrWK0QwkCE0f0gVyfIut1w2rTxLLdhVpOeZEN9AIgOuZuF08zT7GLwn6YITJAwftOJIj5axYLyJIJtuqdMUM="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"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"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-formfield_0.21.0-canary.12b84cb7.0_1615336842486_0.587243157150495"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.6ac6784b.0":{"name":"@material/mwc-formfield","version":"0.21.0-canary.6ac6784b.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=11.0.0-canary.7522dcaca.0","@material/mwc-base":"0.21.0-canary.6ac6784b.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-checkbox":"0.21.0-canary.6ac6784b.0","@material/mwc-radio":"0.21.0-canary.6ac6784b.0","@material/mwc-switch":"0.21.0-canary.6ac6784b.0","@material/rtl":"=11.0.0-canary.7522dcaca.0","@material/theme":"=11.0.0-canary.7522dcaca.0","@material/typography":"=11.0.0-canary.7522dcaca.0"},"publishConfig":{"access":"public"},"gitHead":"c60d8f8df8e8260f94f9e15fccf93afc356b0634","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c60d8f8df8e8260f94f9e15fccf93afc356b0634/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c60d8f8df8e8260f94f9e15fccf93afc356b0634/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c60d8f8df8e8260f94f9e15fccf93afc356b0634/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c60d8f8df8e8260f94f9e15fccf93afc356b0634/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n|----  | -----------\n| `--mdc-typography-body2-<PROPERTY>` | Styles the typography of the formfield.\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.21.0-canary.6ac6784b.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-MLsNr1oivGNUOF995kChttRhNtwjUvlAXPgCGD3r9LQQh7gWjVIwZKY881+gWgv2yQpDMyt7tkyFJ4Gh9P8Rwg==","shasum":"8d197b4c97de6c39357214b85d56bfe90bc1c660","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.21.0-canary.6ac6784b.0.tgz","fileCount":13,"unpackedSize":40638,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSBfjCRA9TVsSAnZWagAAdc8P/3GS170ZvoOeMtfY32rU\ndlTjpkhKRgFo23C2qFFQ2tiFsawc6ocdDD/aC8P6lqjIDbeub7tCxNVUL0Yo\npKTH6DW6wyr8wpw+Y8oD5zdNZNek7FuQ07vJ81vjW4D1z2BEMn1cOohGF0CC\n+hNJPl6MZbVgNNByEWW+xbOiT4G+nEkyndvkrVe8uuEkcjwRlEwPgIRJRf51\nwT3FMxdkwgKQr6Gibfyrln1Tx4U0YfR/Y4XxKcsgWBNv51Bc8COleii37Uyk\n2knHYWv4wPlb6xwpRzXG295gSfI0Umd+sj5XWKU9bRHUq67N7jE0k+iir+2m\nKv5+9kpqEihd33H1YRsqNUkV6PB/7coSFV1dubzIPmS9aPqUXlF7ytvoiDj5\nq+OBQcuTV0W7bRvuyxGI17jbsXVsyRbIphhlFb6wqhdPPFaBBaTaMDIkyoOb\nFsGLLGhQoYdNGM5IGPBQG78sDRuRGD25TzQpqx6QS98vqORZp4R9PP2vGvW1\np7mouV+4Pks6GlaffWQqD3woBMBvNgPNx0n60dvs+s1FGgAKKOc6QYcfu/Bm\nv80kbyIAgrrmMEK7fMxHKnms5OWU/Kag7mqWty0y+8BqQvBtcILhCMvqL58p\nF9HqNZ96XkTRd/2ysc7lLZfTxq6ppe8kPnwiyd4fRZGMbsSqf6vUGynt5/1k\nvlHg\r\n=ZWet\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIA1MfampVNCyzJCDcNAworwGITQpfDXW2xunznU9M2IuAiAIEX0ns4lGx4pRlz1fagYsd4gEyUj1Gy7AXgcBn9jrQg=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"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"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-formfield_0.21.0-canary.6ac6784b.0_1615337443075_0.9065026543767272"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.b6d92934.0":{"name":"@material/mwc-formfield","version":"0.21.0-canary.b6d92934.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=11.0.0-canary.59010b6dc.0","@material/mwc-base":"0.21.0-canary.b6d92934.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-checkbox":"0.21.0-canary.b6d92934.0","@material/mwc-radio":"0.21.0-canary.b6d92934.0","@material/mwc-switch":"0.21.0-canary.b6d92934.0","@material/rtl":"=11.0.0-canary.59010b6dc.0","@material/theme":"=11.0.0-canary.59010b6dc.0","@material/typography":"=11.0.0-canary.59010b6dc.0"},"publishConfig":{"access":"public"},"gitHead":"82c48b7f335ed9103a3bbcd062d3163b1eb661a1","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/82c48b7f335ed9103a3bbcd062d3163b1eb661a1/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/82c48b7f335ed9103a3bbcd062d3163b1eb661a1/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/82c48b7f335ed9103a3bbcd062d3163b1eb661a1/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/82c48b7f335ed9103a3bbcd062d3163b1eb661a1/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n|----  | -----------\n| `--mdc-typography-body2-<PROPERTY>` | Styles the typography of the formfield.\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.21.0-canary.b6d92934.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-aIoLKFmwbiNMHa+cbGum6xxMCddFONyqqz9zfMGFwjBg5iWrFer4f8GUNhnNj4S8ZAYN+yU4DhDTfbxJplrFCQ==","shasum":"80a0fadcdc51476663d54756a9dc4bc09d8713e2","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.21.0-canary.b6d92934.0.tgz","fileCount":13,"unpackedSize":40638,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSUF7CRA9TVsSAnZWagAAOEsQAICGSSQxSg8bRkcAegz4\nz13A04QQlSq9tCFzw/OfUqvZPAWCqCoE7L5DpiBFFT2gd/NzTwo2otasfdJK\n/bZ/63vIRbETkr8chmF+4Jb7sbgjEMxNNtm9NHrrA8CbVl011Jq/9+d6/6Uk\nijj4pGDyhPcL/whj7n/MTob9Hh+c6MkFfGk75WdZNIbFMR1KDZkBNgYWhmCO\nLckIHrz4CVEuI9kJ2RQhCvQRaVQGf701dw6LnCWMMmcXIAFCz7VSNjftTEOt\n48wup34Dz1bC12kc4zLcsmLO6mZC23Kj+wb64o2Xl2/XHaZojih+BXMfxSgL\nWukIqeV0WiOS46+mrBwT0dc45joOIyboQOrioV5xzAnnccEgfuWGdXeQd5Aw\nBO7BCRBLOhYJe60Kz2lmDsMIERySio8kI7oYPGZJhLlaYrm7cc/fgb8MWiwz\nSdJibqbA47xrM8LgTHdbIMGnUwXGjd9KdRKT9hydU/rJ6BnkHt3c1SMoodFt\nveBg5IkDfAOqoij+20TJ7XxR7DuDFgC/UAWfI+4emhiCdMXX55cy4wXkhiJT\nLW/S7Xo+AnHkwE24OUSKgspAck9DPvjhhkKNv4MQV++bIs6ELcgHtPJjQaUO\n2XQ7XhHk8t36ky1d/oKfY647bbqr1Ow7TG1srby8b5SQ92p8j6PbPH3L/opL\n9PqG\r\n=/gNk\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDo4kqwbwE/WGIMp4VAvboP6nco2MgG/hNrffP/3bQUdQIgZG9N/Ccclr/Ijyx0MYj2tyWNcMuRYhTNhfl1X2qlzGE="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"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"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-formfield_0.21.0-canary.b6d92934.0_1615413626696_0.7890377570382014"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.99a55b9e.0":{"name":"@material/mwc-formfield","version":"0.21.0-canary.99a55b9e.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=11.0.0-canary.59010b6dc.0","@material/mwc-base":"0.21.0-canary.99a55b9e.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-checkbox":"0.21.0-canary.99a55b9e.0","@material/mwc-radio":"0.21.0-canary.99a55b9e.0","@material/mwc-switch":"0.21.0-canary.99a55b9e.0","@material/rtl":"=11.0.0-canary.59010b6dc.0","@material/theme":"=11.0.0-canary.59010b6dc.0","@material/typography":"=11.0.0-canary.59010b6dc.0"},"publishConfig":{"access":"public"},"gitHead":"8b0d740e8ff12f180cf11caa9a264f3dda6542f7","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8b0d740e8ff12f180cf11caa9a264f3dda6542f7/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8b0d740e8ff12f180cf11caa9a264f3dda6542f7/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8b0d740e8ff12f180cf11caa9a264f3dda6542f7/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8b0d740e8ff12f180cf11caa9a264f3dda6542f7/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n|----  | -----------\n| `--mdc-typography-body2-<PROPERTY>` | Styles the typography of the formfield.\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.21.0-canary.99a55b9e.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-CZ7sjzp5ONjJ7P4SsaOmjAjGfbq3xTbOz9Ry1T8HNs98R1jBh8fS+l1DGkYl1jNaB9Ut/RE5FaLvpI3082SEAQ==","shasum":"ff42eaf064f6111a87787beab2863431300253fb","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.21.0-canary.99a55b9e.0.tgz","fileCount":13,"unpackedSize":40638,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSU1lCRA9TVsSAnZWagAAk0kP/R62JgxuXxMI8LeK6xfM\nFZl0Cyy6HCJ1vITVCnvRir8494QgaEkfgy+oih27nv59iiG9bd5DWezVzafU\nq/ciQVyqEyRj+H5ETgXuy79toT4JlILsd9Bu7Tst7+AmGFqTFH6p+UFNqLbh\nx0niCNEKLOD3ahHdlRLV9sNuuiMFLtxy2Qx09bDQ0+DJRgKryxAyBcmvCMXT\nNIUHCAq04TvFRTSEUgUa1kIfRXBK5/24DYzlRoecSxoJThc+Qbdt9q0PvgUB\n6pfROVgPEa4Yac/Ki9SzbQdy2k05FCrJKJEGg75dOz93IphMaB/flj1xDgBL\nTfMi+yZ8MEhWgf1z8K9jUFNS5LIjq9vjrhJTMij9EllSdeEDjQXHjaFssHWm\nmGy9z4TO9shdKAd/ltmPz48mI2PBkjRYsEF6RdDZy0pI9mE0ziGQa6bRJeJY\nHAY/8W28oUGm2BbRgMWlK/0BN7N+s4UrbMvjj/tlMdfl29YwznS23xDxUdwy\nuEDw1xP7VLO/yvJ+Myui24ost9cLvzY77FESMW7weN4SGLs3QHX195MBLABv\nT5vP95kAo4E08oeBe/5CHK9HeIPwm+2mSmpKCQonaWW/bkPxqoNaFxwTb4Ur\ny/8LQoL65ccQvYY8KFFiM5MtT/aL41kn9ZBTZCwupDjal02T971gw9jJJsk/\ntcc/\r\n=22Hc\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBPY8JJtP/UyYvZJHQiL1rmGNPw6Ue24SQ9OeuoCDhUyAiAwjUO2MRhaBWhL9w051Cwo1WchHY2Ax0Nrt2BsMISkyw=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"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"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-formfield_0.21.0-canary.99a55b9e.0_1615416677300_0.4547185486895944"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.bb14efb7.0":{"name":"@material/mwc-formfield","version":"0.21.0-canary.bb14efb7.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=11.0.0-canary.59010b6dc.0","@material/mwc-base":"0.21.0-canary.bb14efb7.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-checkbox":"0.21.0-canary.bb14efb7.0","@material/mwc-radio":"0.21.0-canary.bb14efb7.0","@material/mwc-switch":"0.21.0-canary.bb14efb7.0","@material/rtl":"=11.0.0-canary.59010b6dc.0","@material/theme":"=11.0.0-canary.59010b6dc.0","@material/typography":"=11.0.0-canary.59010b6dc.0"},"publishConfig":{"access":"public"},"gitHead":"00644005f58173e15c7e271bc9c226535d1bbbc7","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/00644005f58173e15c7e271bc9c226535d1bbbc7/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/00644005f58173e15c7e271bc9c226535d1bbbc7/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/00644005f58173e15c7e271bc9c226535d1bbbc7/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/00644005f58173e15c7e271bc9c226535d1bbbc7/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n|----  | -----------\n| `--mdc-typography-body2-<PROPERTY>` | Styles the typography of the formfield.\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.21.0-canary.bb14efb7.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-M62ukK2HkC8eO1sJbOcoLCdB+1CCCMjR6j/NgQ5UxXAt9f7vk4Kq3hQuuMyb+eXNa1RedXV031IrDIjg6Z9aEw==","shasum":"aa3e2d45692981c552100570054565cb7a8fbbd8","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.21.0-canary.bb14efb7.0.tgz","fileCount":13,"unpackedSize":40638,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSVgSCRA9TVsSAnZWagAAXisP/jONnvrgtoKldDIljpyX\ngrjYQhz1JzvN7xHL+Wlpw+4RNuf+WDrRtdIilBWZnEBqa2NOnsbJJZr7dmXC\n5q7u4CTJAyfLO36rxGSm56+cHFtyeUfHt7zFbBi/Twf50h81iN0K+ofo7l9n\nQavT9nc7h8reLPs9ds3y2hpnFCXhpcrriAIgBN7orcDt6fdfa//zAdodQ0Le\nojxcRw+HGw2h/Y/ACNJHDE+Gexw6r9wd4I2vYXyUTqoBcZzqXmgE+rJb1PRF\n3wck3sF5plw6Ykp+SLelTOkN6nfuK5KfANx+CYZ6sqGNPwqr5Ld8lc02ekIc\ndLR2wr9YgMdhvCq3AdCBlQyOjrwnQe1s0kuwWCLHgF2DMxIADMkfVVXWKOJG\ngQHJpogySXJj0fQ0nwtwyMhBfO19W36ZM60cfdjYKjFw01T9ltKzuWho/3+J\nbnxu5quqAk0PjVZLDh0Sff1wf3TrOAeyIKTHuffNPJTSV5DMkrNY2O6mVsmX\nC+DFykhOC6SCoT1TfOhvq9XujMtT63LRISPasb40xIwN2NE4ICVvcpQ8/1wO\nuc9KCH1UGaVy31rqaS9DPPIyqGnzndE6c5HLBhrneE1olnGRwDx+FTF/loHU\njLl0wRVlukL47N4/Pi54WgRu083z1qLpvDCNhIQdVvJDVVlWePCTpCCChBJY\nShz5\r\n=ziK2\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCID7v2lMSvW3Li6BLztGbuktXtYxnrMQjftsJodyOrDkhAiBZhpJnwgSO/T4Qxn1ZzCACjwn6PYr2bKNabrOxfDTZKw=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"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"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-formfield_0.21.0-canary.bb14efb7.0_1615419409781_0.14094622747272134"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.9ecf3bdd.0":{"name":"@material/mwc-formfield","version":"0.21.0-canary.9ecf3bdd.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=11.0.0-canary.59010b6dc.0","@material/mwc-base":"0.21.0-canary.9ecf3bdd.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-checkbox":"0.21.0-canary.9ecf3bdd.0","@material/mwc-radio":"0.21.0-canary.9ecf3bdd.0","@material/mwc-switch":"0.21.0-canary.9ecf3bdd.0","@material/rtl":"=11.0.0-canary.59010b6dc.0","@material/theme":"=11.0.0-canary.59010b6dc.0","@material/typography":"=11.0.0-canary.59010b6dc.0"},"publishConfig":{"access":"public"},"gitHead":"536269b5f421223a32dd73271ba878cee3e04ec0","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/536269b5f421223a32dd73271ba878cee3e04ec0/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/536269b5f421223a32dd73271ba878cee3e04ec0/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/536269b5f421223a32dd73271ba878cee3e04ec0/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/536269b5f421223a32dd73271ba878cee3e04ec0/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n|----  | -----------\n| `--mdc-typography-body2-<PROPERTY>` | Styles the typography of the formfield.\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.21.0-canary.9ecf3bdd.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-RW49pQRP2Gt7kUsMcRknKhhKcizV381sUx0skiTv9aRykNCgwe6lN88qwFmsEqWFj3Dkz1Mf25ederlBuzJxHw==","shasum":"3c7f23e0ddb0f6333c385a209ea3781d5ae9ad31","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.21.0-canary.9ecf3bdd.0.tgz","fileCount":13,"unpackedSize":40638,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSWLbCRA9TVsSAnZWagAAH8cP/ijuUgYZawf5mAsg9azn\nbHHczzhTVlPtqv51sQE7JxXfj+iASX26u1nUBsRxpip7YPrjWJDLitroiViP\ngEn3Tv1MV+qN52J7mVdTG7aqcG1VyWS1rVL2qpAZG5BbbrsB6K8r7KkDaR68\n4kOqpH1Jz/xdqaVyu+LryW9x+WhBFxS91TexdwyycNi22/toxwvD25zJoWoI\n6bX/+FFiBwq4wVVOT+q7wfC6L0iTM+Y5WfxaO0CvDNFm5Rq7+OgocopEDcEu\nHX7WH0MtV4E6CQ02OTOlW0Ptr7i7D3zJN29PT+XlqK0I8sqtRbtBPAwhmH20\n3D9IeCDCkqF8izpDBd+aq2uAXuswOsl9Fu3ciVM1rQU+onMmxXghwJyi2aAg\nmTQDF+vmmHnNYaHbZC71laTnQPubJ7oGIoygzjDxj1iGj3xHK+Xti6f+msYo\nRljsyJWdvybnYqGSQqkd4GhJkjhMzmLg96jKexDY75aFnvQOitFaIL2wTzvN\nXtTLe0QYT6UxCAsRFdCQtz1aL1B/C+MePLBAtQwgFwC0zKIRVjh38//0WLlM\nnOqNR9rawiW39eu2Y1cUWZ9RhMZkdhh+JCFwYwXZyImh8N+2hjEXoU6omGdY\nYVYRMQXSzvUmbmhz31oM90YlGaEtLzeMIOOyltgBWKshWN7r1DfCX3G66lgN\ngdGO\r\n=yZ/D\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEfSEVAlCg3+XcZmiL0OxRJt2AwW1cMmDlbyHbg/WsC9AiEA3Jb3AuRnr+wy0boyO1GpjW5uuH4ezcJtZ0DofurP7s0="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"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"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-formfield_0.21.0-canary.9ecf3bdd.0_1615422170875_0.7988236662175818"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.7c0e02fd.0":{"name":"@material/mwc-formfield","version":"0.21.0-canary.7c0e02fd.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=11.0.0-canary.59010b6dc.0","@material/mwc-base":"0.21.0-canary.7c0e02fd.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-checkbox":"0.21.0-canary.7c0e02fd.0","@material/mwc-radio":"0.21.0-canary.7c0e02fd.0","@material/mwc-switch":"0.21.0-canary.7c0e02fd.0","@material/rtl":"=11.0.0-canary.59010b6dc.0","@material/theme":"=11.0.0-canary.59010b6dc.0","@material/typography":"=11.0.0-canary.59010b6dc.0"},"publishConfig":{"access":"public"},"gitHead":"96acba80bdfa05054613c4753b3c0211e2ac7a76","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/96acba80bdfa05054613c4753b3c0211e2ac7a76/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/96acba80bdfa05054613c4753b3c0211e2ac7a76/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/96acba80bdfa05054613c4753b3c0211e2ac7a76/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/96acba80bdfa05054613c4753b3c0211e2ac7a76/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n|----  | -----------\n| `--mdc-typography-body2-<PROPERTY>` | Styles the typography of the formfield.\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.21.0-canary.7c0e02fd.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-KPFc2eNEtXz4H2aFWtZaEy/MZJRyxQTRMil6EBijJxc1rSSiKlGXyrozzCcPGUSOv1iQGYIpKiWB9aF/ECISvA==","shasum":"5e5b18d450db7006842d8ca727471f1b94bc5bf2","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.21.0-canary.7c0e02fd.0.tgz","fileCount":13,"unpackedSize":40638,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSXZoCRA9TVsSAnZWagAAeDgQAISaGoEXP9RHjVWARqGj\n7k8m8qRSlCYzT27zbNkPZ/rYRcpWNJ8X/qXS2vWN32LYdy7Iyg2ehOt8+24A\nCQrAUTend2YbLAMy8hr/d2lsCXBLgJmTwPvhhD1w7TxR66W/UsA0ZHWbao8s\nweNMTBBBJANEZAsqiLTDa3Oc2YqTErKVgrEjtNrdc+HGO0gd6eLrdO0rP6lT\ncQkQC5XHhdImGPGi3t3DrxHvHrqo2VCZDAkE+2BPN1lZUEenRvE8IC103T10\nTsfCt4Tf+tr/7Pl+nxL0xYlxbP7Pbnw9B4fGsg3BFhOeihYi/J8/pdvFHgjs\nwu3caGZpnCEotZvRC8D9L2FQwSaD2mMrgclExMX68vUGLi5NXZs8W2xPEHou\nEd7INYxqFNuBkwY255IeYsdwldiMmAu+ozUAEayPuz3JZbQSDG2UOIIEuQKl\nYKVdTvbM/tQWXtHqq2yO6afeC8lLd9GpvBtEiaUWm/wP8xJsn2Uoqvo/eEhi\na19mWxIM8WboCdY1aPc+FRSKTjzU3M0u0LBihVPdSO0x8ZZzW47e4lJN4jzH\nZhud/kanUIKmmgwgjJ5t86A6XtQRvGyWg/Wpng7/zH3Hg7VbJPIoKdH6h1aK\n59+xLd5i+3bgV9rgg3g+RVtKMEFO6LLVJ7s+ijEqK/HWjL416QZ+T9xZt9qO\n4qSp\r\n=SCdr\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGZTbd7T/+kUMEJcjsTBVsfASOM6OWIw0+BBEI9Qx0xqAiAKg3MaD/i/IXxgThJ+4l9FqOUjLoHJd6v01sxNRRrm/A=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"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"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-formfield_0.21.0-canary.7c0e02fd.0_1615427175975_0.3954456894423535"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.2d6d59cc.0":{"name":"@material/mwc-formfield","version":"0.21.0-canary.2d6d59cc.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=11.0.0-canary.59010b6dc.0","@material/mwc-base":"0.21.0-canary.2d6d59cc.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-checkbox":"0.21.0-canary.2d6d59cc.0","@material/mwc-radio":"0.21.0-canary.2d6d59cc.0","@material/mwc-switch":"0.21.0-canary.2d6d59cc.0","@material/rtl":"=11.0.0-canary.59010b6dc.0","@material/theme":"=11.0.0-canary.59010b6dc.0","@material/typography":"=11.0.0-canary.59010b6dc.0"},"publishConfig":{"access":"public"},"gitHead":"52ad91ef80e9719962d213826d84928a37cf809b","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/52ad91ef80e9719962d213826d84928a37cf809b/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/52ad91ef80e9719962d213826d84928a37cf809b/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/52ad91ef80e9719962d213826d84928a37cf809b/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/52ad91ef80e9719962d213826d84928a37cf809b/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n|----  | -----------\n| `--mdc-typography-body2-<PROPERTY>` | Styles the typography of the formfield.\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.21.0-canary.2d6d59cc.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-YIGYWGqbU3br2cC7G939Gogifk3v4mvcO0Li7QYeUiwUdw+3THNeZzcgXRWSYrsTSZ9iOMaDfxkfnKgk+hRDSA==","shasum":"16d45c2b9f0336e22857f07bcda5ad4fb69026b3","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.21.0-canary.2d6d59cc.0.tgz","fileCount":13,"unpackedSize":40638,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSmFiCRA9TVsSAnZWagAA/g0QAJ/sSg5nvtuu7kGDDYt/\np+VITecFpJpUEWomb7ugKKQhiUl2j89pFy9Ybxr/Simmp/UCrNiaYOG7gfqD\n9MQSQP3PfBgQq+HDIM1P0U+rr2MGdTDK6W0/B9IYDg3TxDvDJljogEiq3kjO\n5YdSEsOnnSKiSLrdhiMflSHkaUe+M9BebGwYuJU7wnSIV5ixVFCw4eqFK073\nk5Utiw+uOcAsh/R610W8FYOz99JfiDi4JgO0X9sVTrtQ1FtOFe81MJFeA6oS\nK98hwpwQuNWn4W+5+G8/AQF1gM83yP+WSR+/IGjM71Poi5smzupNZeX/9msw\nbCTUVWad7kBspG6A1ppIgRghrEc158ecGYbo8GlC9P/o6jByPtRnwXpbDl1d\ngwkR4s7ATco9ULCTRkxBC55ZBT3+AlcddGdSQ2dAM3jGr2sW6iG1Ck6HHr9l\nnK+UjlVpRMwg8SGhMWgYo2cgSk2UKT4iURYKC0rOlRLJIK50r/CeZ0PQDDuB\nJ9gO0A9ZqUFkhRflUdKB5l9DuMTP8GtWE/zrxiX/G+HuYi9lEiKERvZrnp8V\nMWDG7MoJAzz6+Zs50LRA4I4pbZo5H9VETpeDjumsbgErI0IhxZYSd1XLQps9\njEeAHRQAfw2zKA8HZsgZWZcWeA7CaPoJVUkFe5+AjhLnaX47kiNOMMu0Gwc2\n+4o1\r\n=Jnig\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDlZrg2ZIXV0F03WAVGHQuQJqKYQslxJt26f3lYqpLH0wIgXCv3yCZ3vIA5/m+AEe+zKZG7/wkV+ghv2Ud6WFNRhKg="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"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"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-formfield_0.21.0-canary.2d6d59cc.0_1615487330154_0.26450853057166324"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.0138863c.0":{"name":"@material/mwc-formfield","version":"0.21.0-canary.0138863c.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=11.0.0-canary.59010b6dc.0","@material/mwc-base":"0.21.0-canary.0138863c.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-checkbox":"0.21.0-canary.0138863c.0","@material/mwc-radio":"0.21.0-canary.0138863c.0","@material/mwc-switch":"0.21.0-canary.0138863c.0","@material/rtl":"=11.0.0-canary.59010b6dc.0","@material/theme":"=11.0.0-canary.59010b6dc.0","@material/typography":"=11.0.0-canary.59010b6dc.0"},"publishConfig":{"access":"public"},"gitHead":"851518435241b4315820e91765f5b26a5537c63f","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/851518435241b4315820e91765f5b26a5537c63f/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/851518435241b4315820e91765f5b26a5537c63f/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/851518435241b4315820e91765f5b26a5537c63f/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/851518435241b4315820e91765f5b26a5537c63f/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n|----  | -----------\n| `--mdc-typography-body2-<PROPERTY>` | Styles the typography of the formfield.\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.21.0-canary.0138863c.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-zuru691aQW6XxXQh6HGXBHU/BS+KWGYsooEtetqRQnqJHCZKjCZR2/VYDdkpsWRzJAdYehZAMmcRwY0G4+ek1w==","shasum":"c708e421a7694d150a3caf657fa3b6903e226470","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.21.0-canary.0138863c.0.tgz","fileCount":13,"unpackedSize":40638,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSmMjCRA9TVsSAnZWagAAzEcQAJtNmaT0sJgWQy4oO+5W\njjXauYAC34ppz0lGo5/7FqaJXmZhkuzCVE54EeIGbGqBiz7pydmQskhY3qWL\nJ3B5WR36md8a6BXvNDiO7ffS1RJC6bFKWzRrLetWgsN0OL5FhT198gN83J/p\nUv1og6D0wglDeHqzm9ixzdhTj4Z2TjXOm0lK6GczVdWNm73i82sIDFIcPdti\nkcEtZI4kDLfpTVMHE+TyRN8i50q3exEOnQxXMsgkio75pvts6V7QW4t/FMJR\n+A4Bw2+vPtFP9HzvlmCVOzqsCiGtCbgjLRyZQBoCTQ7+OsatPSOKpPyI/k5u\n0dnUIdWeKZJGRmKypjSK57uaMyMMBBmn5wVagx6lQkcId8wChlxIOhnA8hMu\nSvPXQatQ1fFG28BmbtXsvipzdNB+octsgx3wnOas2gZoI5cUZLqkuhFT0POW\nbn6Wisnt/GvpYeUmOslxvchdKeCXgdjW9Hiecyc8t636tgh/NtKYFIhqB1Eg\nA/Qm3Z1TjSiB/W119Hd29PvJfcK3GASz1g8tODSQ8coYQTQFS3R1ONZFb23B\nPPbhuHtL15+7zWCYvnqVpkc3CSOXrduRGDUcsCDlMrmdlntmDIi18OhGs7WB\nNAvnSSmRy1h+U1kR4dJ//X1vQuv2pX3kBGMNPYPSEmSoS3+GMHZ/t4gAyBU1\n6/da\r\n=pOHQ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDeGmVqzNIEgEUZoDYnjUYjqBS+1qmUDz2QudUK0xCm4QIhAOgIz3KH6QTzNdEMy2PnZzrmojbgwan56fkrILD2ghTZ"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"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"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-formfield_0.21.0-canary.0138863c.0_1615487779522_0.8540513115406847"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.926f5bad.0":{"name":"@material/mwc-formfield","version":"0.21.0-canary.926f5bad.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=11.0.0-canary.59010b6dc.0","@material/mwc-base":"0.21.0-canary.926f5bad.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-checkbox":"0.21.0-canary.926f5bad.0","@material/mwc-radio":"0.21.0-canary.926f5bad.0","@material/mwc-switch":"0.21.0-canary.926f5bad.0","@material/rtl":"=11.0.0-canary.59010b6dc.0","@material/theme":"=11.0.0-canary.59010b6dc.0","@material/typography":"=11.0.0-canary.59010b6dc.0"},"publishConfig":{"access":"public"},"gitHead":"516a00bc24de904c4782b3d5f4f0d285b7fd1d3c","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/516a00bc24de904c4782b3d5f4f0d285b7fd1d3c/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/516a00bc24de904c4782b3d5f4f0d285b7fd1d3c/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/516a00bc24de904c4782b3d5f4f0d285b7fd1d3c/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/516a00bc24de904c4782b3d5f4f0d285b7fd1d3c/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n|----  | -----------\n| `--mdc-typography-body2-<PROPERTY>` | Styles the typography of the formfield.\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.21.0-canary.926f5bad.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-PCzS4U/gW7yUYiXyo4LFqYdtm2GYCe2LFQURoRz+qSUKzF4w5LH/X1P7y3WdKG4Y8NzB9B8Ir2klyCBO0+1xEQ==","shasum":"311811fd52f1ad0158f6ef5cf5e3ad048cb707b1","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.21.0-canary.926f5bad.0.tgz","fileCount":13,"unpackedSize":40638,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSnsNCRA9TVsSAnZWagAAqQIQAIarPn80CKB50qoCRi6t\nnPYVoE3DMHmAh4aWqaYwCU4hDj4jqlGTvBB9NqP9jto/ltFqtsFBfQlIC/dL\nHPh+MfOjmZKcN6eg0j/8xKv56A9PEamZbghg8ve5y4cEZzl/Qaap9gf/IBgU\nC+bwJ9Uh7grz2u+bsa3NRyeiQpsYdJGiTWGxPtWhbcbFdBRPDSa3o0MEpr2i\ns0N+ot6RUx1aONx7OavQWYrguSnl2LhtMH04K+ZPpU27jtOl9prUgVBs2926\necIg8TeZ6j+/baIjLNEhWknvTWgvV93rb81Xc2m04PEmPPB9ahw0D1UCHVhU\nYBPCM5e7btf5yVyabbiZb/FBVlbwJ3hv6C4mFrJw0hhzVlmIAs7wCc/B0kmf\nSr3KMQlJdAMFrYANUTZ9fhBHc4hJo6/aHLr4pB0TSncRE50tVD685t6Ura2u\nayJ9X9Z6F84xlnaz9mBSn7Rxs+l8ozSYZu342ASK5AsvcXvL1P7p+ULya/z3\n7sp+mgIHLFDHoq6my3nlnN2n7LiRkceZ9aTIlJU1Nsh0dGqEHr4DPDiLcGhY\nJmzoRVa8UlCoT1P86kuXlGIK62FNajLj7A1ZUQd3XwPKYVIKKWVvdZWkzt6P\n/e2Je1EMw5SBBO6kaEU5BYEEilbpq2A57J1+DAqw31pCZqo66Ac+CmLOGnyW\n+qgW\r\n=TWNP\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGvqbaPO+3/WNjg5EbtMNO3G9tuPwSy+dpbdloEX90wjAiEAhoGPOabDN7ClNArwV5VTJB7fyqldYUrErdhOLhTt9XA="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"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"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-formfield_0.21.0-canary.926f5bad.0_1615493900798_0.594595461247456"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.520290a9.0":{"name":"@material/mwc-formfield","version":"0.21.0-canary.520290a9.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=11.0.0-canary.1e0653477.0","@material/mwc-base":"0.21.0-canary.520290a9.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-checkbox":"0.21.0-canary.520290a9.0","@material/mwc-radio":"0.21.0-canary.520290a9.0","@material/mwc-switch":"0.21.0-canary.520290a9.0","@material/rtl":"=11.0.0-canary.1e0653477.0","@material/theme":"=11.0.0-canary.1e0653477.0","@material/typography":"=11.0.0-canary.1e0653477.0"},"publishConfig":{"access":"public"},"gitHead":"9817154a83b0101256b341e18843332e354f6c08","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9817154a83b0101256b341e18843332e354f6c08/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9817154a83b0101256b341e18843332e354f6c08/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9817154a83b0101256b341e18843332e354f6c08/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9817154a83b0101256b341e18843332e354f6c08/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n|----  | -----------\n| `--mdc-typography-body2-<PROPERTY>` | Styles the typography of the formfield.\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.21.0-canary.520290a9.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-Nu3RPy1o6WPBF9L4y6Hw6S4+mBKGplMtVDa/7DYLXHoIBUyzAL2j8i1tj6eR/CvOwcAc4YfHFkPG8R4nM9aqig==","shasum":"46963c42a61abaa3fc87c78ac559bd94f1f3bce0","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.21.0-canary.520290a9.0.tgz","fileCount":13,"unpackedSize":40638,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSplWCRA9TVsSAnZWagAAtK4P/jo8HwWJtY+EeopRt1Z+\nFrSqvFAZhgxOZPlJOCMDf0J41KVEjhScWMucUuhwoBUTBZVBuw351t+pirLl\nN+26nhWIt0ayrdfQQqd+TY1wbcfWkBBHLk0GdHZ5bOmnTsodCizSbQtkKN2G\nT9A8qbLBcbQ1lkuLFtF83Z0R+atDQlwXnbRNCdzIO9IN9gckFLpCeqks1wdr\nm7zZl5bww9SHQzJSEyXZjYaNo7AGn1MThUoWlKzxK2XGCVYUup7Mq6ya4mlw\n5/zIVMG/RlMI9HfDPNWjr/T7PrORNvkXRhyF8hV900KamCbRSuBaWdWMOzic\ngbejUiiObhh1k/oGAb5JRX2dpulFYsBImlPTvCVgvAqEGpuk/V2YKcN/EE5w\nk5cogMaVn+7yP+dHSp3skPVRQ5Sgnf6cbY2UKZsK+NxRmyEdRfOVdyiClGM6\nC0AE+hn70VJk1lexEfpW9k2RwHvggLm9vBoUuObwxXG2vgiPAlNxGHH4xsL/\nfL0D+1UVv6zIlsz3WJbfNu5Tzes2Mn/PzdFkvw9dwzUal+F/i+jaVka3655M\nQLRJOz8jCBKH2T4Tn48n/Bl5WLo/n2x/QdqqjTX45aXh/HHfkywLRQpWjBpq\n+Rrv7432QT7o+ZpZ36qs9aY8+jIQxPgp1HUR7m0JCnytLwb42Kio4MMBSVO/\nih2V\r\n=3/ji\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHo9HA7a9wJ++mpg6cQoWfEqiSzLQ17mj9km//1v6UnVAiEA0oefvpVoZQCcb4qoaqo9dlQ214wyT6nk16TD1LhQze0="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"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"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-formfield_0.21.0-canary.520290a9.0_1615501653769_0.03532164984524955"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.9ec431d1.0":{"name":"@material/mwc-formfield","version":"0.21.0-canary.9ec431d1.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=11.0.0-canary.1e0653477.0","@material/mwc-base":"0.21.0-canary.9ec431d1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-checkbox":"0.21.0-canary.9ec431d1.0","@material/mwc-radio":"0.21.0-canary.9ec431d1.0","@material/mwc-switch":"0.21.0-canary.9ec431d1.0","@material/rtl":"=11.0.0-canary.1e0653477.0","@material/theme":"=11.0.0-canary.1e0653477.0","@material/typography":"=11.0.0-canary.1e0653477.0"},"publishConfig":{"access":"public"},"gitHead":"d7159bb385f7dc7e6077615de2e9bd441747fdc2","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d7159bb385f7dc7e6077615de2e9bd441747fdc2/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d7159bb385f7dc7e6077615de2e9bd441747fdc2/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d7159bb385f7dc7e6077615de2e9bd441747fdc2/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d7159bb385f7dc7e6077615de2e9bd441747fdc2/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n|----  | -----------\n| `--mdc-typography-body2-<PROPERTY>` | Styles the typography of the formfield.\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.21.0-canary.9ec431d1.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-/MrWzfVgOnaZC/0UFSaiyZVwaKQW4YCPH99OHD8wmZ7NMFf1s/v5Db0t+YvbD1QYju6kMd/pb/pyc6ciIKkWcQ==","shasum":"c82142bde872983f8afd7d65fd0c1c1b22b9e8d4","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.21.0-canary.9ec431d1.0.tgz","fileCount":13,"unpackedSize":40638,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSppXCRA9TVsSAnZWagAAAhcP/12gs75dedxta3EPZwOY\nd6pg+052aRdnaqygJVripqFJn6LPi92jG1Ifk+7dpKHVBdKMVx94nJuCNNtd\niFvCDYW+b53ABPCj9P0PDEcsEOZ5w1a2FyaYJLX+XDqJYG5Bn8pR4pVhZ75A\nGFHj0S/rlyM5CDmi9GPYwwHd5BfsnF3NzoQgK0dGWGv/hLNLLsywkamGwO3q\n3UWiN8Ks5MMMIbm5hAw3+jEXFViKGdaQcX/IM16bi42rkU4T+t2ZI5NxXTUZ\n+g3iBoz1/7nsXk8NrwdsW3DTXqAxpfb5wY1Zh/86y6dTAY9dAwVdAdyKZAZ8\nRC1x9XoZJofdMRRL2w+sqr5qgvBXyqTgQGxMts510Mcqzt2H0xe77L4EjdN1\ns0+rQMcawvU3Og0dx2Y9UumXoEJI9k1LHDABR9hHeNHWPYnNHZVetntrWHz8\nlXMb5EXtBOU4ELF6BajwvCe33njnJOvqBE44vztJxCVf0+yEBNr5N7HRQZ+Y\nV1EVUNUyx5PHB9heUjolhxWO8M/ZNK4ICBpIL+WHLOlXQvVWDdjYLrNv56qQ\nTduFFV9EWMMDs0IYbnpbuRCW7qZgbU1+9jKgfywmHX4JAeExplp4cMAtKSdV\nvnwxkiwDL5zkpUTseKMIOJDmnCa2xz8pWnEGu7CoDr+bxHcM+1ci2snQgYyL\nXpFd\r\n=dCpW\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIB+U2weT4MKzgWJDeBLs4nmesOdRxE2ztgqnwnGI1zsNAiEAuuvA6P+daCOx12kWrv1waCdyq14z7cPtBqy6uJhtWew="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"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"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-formfield_0.21.0-canary.9ec431d1.0_1615501911074_0.785912315762453"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.4246c082.0":{"name":"@material/mwc-formfield","version":"0.21.0-canary.4246c082.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=11.0.0-canary.1e0653477.0","@material/mwc-base":"0.21.0-canary.4246c082.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-checkbox":"0.21.0-canary.4246c082.0","@material/mwc-radio":"0.21.0-canary.4246c082.0","@material/mwc-switch":"0.21.0-canary.4246c082.0","@material/rtl":"=11.0.0-canary.1e0653477.0","@material/theme":"=11.0.0-canary.1e0653477.0","@material/typography":"=11.0.0-canary.1e0653477.0"},"publishConfig":{"access":"public"},"gitHead":"571cad0df3b7d77ca4f17d7248d6115fb50b756b","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/571cad0df3b7d77ca4f17d7248d6115fb50b756b/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/571cad0df3b7d77ca4f17d7248d6115fb50b756b/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/571cad0df3b7d77ca4f17d7248d6115fb50b756b/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/571cad0df3b7d77ca4f17d7248d6115fb50b756b/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n|----  | -----------\n| `--mdc-typography-body2-<PROPERTY>` | Styles the typography of the formfield.\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.21.0-canary.4246c082.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-yc2QPgppBTfnxleRKq5JfMManfWOpqlB5qPC2S1P+3eri3u0KBjOsTZfnMLIjDeUhQDYNzpQla6q2bZxmRbXww==","shasum":"d6e967ceacac7c9179b172a9b7fcec3d474eb4e0","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.21.0-canary.4246c082.0.tgz","fileCount":13,"unpackedSize":40638,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSpwBCRA9TVsSAnZWagAAOKMP/2ASmiCnr41G5fTH5U0F\nOhM15h6UYBl0mS04cxjqJKMM6QGwndH+kyXpZyPpiGmrHuHkoKnKMOHOqGBm\nPS9XEfbDLYekAuX/U8UzXBaCcXoLvo+LrDzaYC538VBl+pOSRyrumJLl3cgg\nrHnN6CEQlYClSqcxkLAVY9nhC+7xQwIG3BllaOor4Bcg899IUwMmiDnHz7qm\nPyqIQXNurMI7J+g9vKVpL9GPwZXDc2evBmfKIfqZSC1X82bmJmG8sdWkAHxx\nhUfMYmrC6HzOVL0bjCx0XCLnGX55Rhwy5ATaIqdwSrq7d2iYDRGVaRAP672R\n/nxirv3QAIWFR3RbxJ1NXmUKUiLjaQjYNkesSNW+QqK6fA13dJ5pW2jz2edm\n58ulWRui7NnKXbCoZzlU6Hgw/wWiwV4KtwGHnY7HAVM2bWSMXW2y8xZOSFet\n3Xo0mtxyzSLk2qqLlkrSXAKg+g3Y6+vXTdmeF9FShZFssKhHGdi0KMkhOVQ8\nh5zi/jcJNOZ1FNESU5wiEdtTDBElWrVNkCSaObmaZfC83B9wf1UTqMDM+uS/\nEPchpSi0YiVH6ZC8xJ5SamNu32WfrjBaN7I00Qf8LGFTYCSFxB6h1GQ7LoSk\n7L4C8kEn4YadMYvygB4EL7UcjF3AgWojQSWyeHM40aYanKBK1S5ZGvFzpBk0\nNhDl\r\n=7LNC\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCR1iMnufI4p04v0KzQk9mwrdP/CN/jIYmugLuwuehAUwIhAJj9e9lgmkWNiNmxH6F6oz9lH+CgE8kDhmZE0FP0OWHZ"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"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"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-formfield_0.21.0-canary.4246c082.0_1615502337611_0.15758645003450433"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.2d736253.0":{"name":"@material/mwc-formfield","version":"0.21.0-canary.2d736253.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=11.0.0-canary.1e0653477.0","@material/mwc-base":"0.21.0-canary.2d736253.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-checkbox":"0.21.0-canary.2d736253.0","@material/mwc-radio":"0.21.0-canary.2d736253.0","@material/mwc-switch":"0.21.0-canary.2d736253.0","@material/rtl":"=11.0.0-canary.1e0653477.0","@material/theme":"=11.0.0-canary.1e0653477.0","@material/typography":"=11.0.0-canary.1e0653477.0"},"publishConfig":{"access":"public"},"gitHead":"4d8c53039218a8da7cc5199162317802bf01f7a6","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4d8c53039218a8da7cc5199162317802bf01f7a6/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4d8c53039218a8da7cc5199162317802bf01f7a6/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4d8c53039218a8da7cc5199162317802bf01f7a6/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4d8c53039218a8da7cc5199162317802bf01f7a6/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n|----  | -----------\n| `--mdc-typography-body2-<PROPERTY>` | Styles the typography of the formfield.\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.21.0-canary.2d736253.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-N7T9tkBaPT2sphudzNFbR0Z+s7Cq86FcrXbM5rJ9cErElto9B5tbs7D6+EIUiJ+vq5exROUk0EUTtH1Xe2n2QQ==","shasum":"62e26ff12a02d181a34093d4c94e1bc5a474701d","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.21.0-canary.2d736253.0.tgz","fileCount":13,"unpackedSize":40638,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgT+EqCRA9TVsSAnZWagAAw3UP/ikMwEj5rxgx4vHfDW18\nuWnsJsgKARVO6I8rGVrK808eRnIzWItFkOO1vb9ykxMOhKl640TRMbpRfFYK\nDaQs1gljyPLXAPJIOE13AWVknkKHbHuz8ZpEBKEV6nwNOkcrFBMweN+vc/bT\nXsGtGnxrPvh/j/wIugdGtdPmT/3gd3sdCcU0dOlWanxh2KVmPJP1a1uwvw6Z\nc9euCnT4wqvTcPKCkNBdpNM9RnQ3ogd3z77gWvVlK6UtY71dIPOPl/Zs7UJc\nFSO/6+7R3hhhJsD2xovkAd56FvasGVM8A5RMD5d0hDWb4lWoffQok8AHqdsZ\niy+ZOtrcDLy1wBkIrDXHujCggWOQlP9STZWkTT31xdurNAiBLzS8znexFiKG\nweSD/sndHVDXVe3NVcHy21VG/UjVOI69dnEria481tzAVGwuxyYD4SXRMDA3\nuyEieyUERgEXC7szQ9p1OXBFmBmJiOhgMdP1AAU07Pe47F7E4v0XnIUcTuPr\nQsBK1VSGdPCzBoQPvb3babW10i/pg+7C9tnGrcwaO1wJpI620A19+8DZe77B\nc4+rK0DR9PAY6C/GfEeIm6S9gtobdzJkubyxeHQ+gdBBpikimei1lUlWb3Cs\n0yUSm3nB2FSaz+wDKzeh/uV5W5H6u1jRHPSuFNXyRSzrKo/z43MnrqjQMy+R\nedtU\r\n=SNUZ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICTvlIk/zpoEKYJuWOLaI1s44T7OHuxzr7yokQQebIFWAiEA8mOsk0Pf6bOgKLK88tjueGMj7/i8EF8ltnSVWPj85LQ="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"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"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-formfield_0.21.0-canary.2d736253.0_1615847721987_0.7541293041618948"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.7033124d.0":{"name":"@material/mwc-formfield","version":"0.21.0-canary.7033124d.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=11.0.0-canary.73a227194.0","@material/mwc-base":"0.21.0-canary.7033124d.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-checkbox":"0.21.0-canary.7033124d.0","@material/mwc-radio":"0.21.0-canary.7033124d.0","@material/mwc-switch":"0.21.0-canary.7033124d.0","@material/rtl":"=11.0.0-canary.73a227194.0","@material/theme":"=11.0.0-canary.73a227194.0","@material/typography":"=11.0.0-canary.73a227194.0"},"publishConfig":{"access":"public"},"gitHead":"7797af96dedeb3641f0889f0ae67bc02a1ff2332","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7797af96dedeb3641f0889f0ae67bc02a1ff2332/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7797af96dedeb3641f0889f0ae67bc02a1ff2332/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7797af96dedeb3641f0889f0ae67bc02a1ff2332/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7797af96dedeb3641f0889f0ae67bc02a1ff2332/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n|----  | -----------\n| `--mdc-typography-body2-<PROPERTY>` | Styles the typography of the formfield.\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.21.0-canary.7033124d.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-LT3jT5/YA+nLwoaftrm8fbBxxiOFI2jfHkjqELBiBTu7bdyBtwqCkhECpZ58DnPsoRVvQ2CUXTD27fWfThnWwQ==","shasum":"d5b3ebccd2baba65c4186df3af28b324fbe64fcd","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.21.0-canary.7033124d.0.tgz","fileCount":13,"unpackedSize":40638,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgUPrTCRA9TVsSAnZWagAAagAQAIyTD2CKX2H3ror9e4kO\ny9kfXHV/KzdP/8j01TotKGdIHIVTCAL2HSPtqxpKLfwhFqLFWo2V+X1hImRd\nCMt7mdcDRvD5FIbpYmcgEPQMllO6xeLD3OtPwVM79H/ed0B9OtZQ/i53s0h/\nqWeuu7ehAof8VdnJls2tho+STtWzPfp8AYxBkyRSGaT9ap3yLuWjTm/cRmGg\ny5ZdY0G0A0frynvxcpCYZXXyGypIVcwh4eHkI8RqhP/WRGc/Y8VMLG6VxWLA\nvFlsrlR5Iuj3sZLtIwT7L1LL93Eo/kv3RVkQlkZr2xsju5bGKIV/RzJD95Or\nIEeZucII754TRinEAjbD58VYIM3eCcUoAkCPGHRYRqwLmQHwqHta9I7pJKDY\nIy0hQhXZs5fpTc9FOmdhxGw00nWZ8Jl8H7U5MWrrSh7/GBhG4MktZ9P2r2jQ\nCdB2TTrjpB6WISINA05xS5VqBGClNicd0l+D4sm+8UKRyUIZb6GiOMCXLIsr\n8zUD5dEJYj/JqCRBO+UoP6liehYRPp+n+wRZLNaGV1MTrp+hL7OIp/S3+wcw\nPKwdtJFfsZ7Tp91ADc30x5eFc5eyidzc9/ORv5t6sy4rOPQ55x7kEP1Wcqyk\nOCDIQR21RImRXM8/7iCEOVzXxdLNIpiTM9PBd3a6W8z+sOA2MOD6COPmcDdi\nvL7K\r\n=XXO3\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDylP06imGN88wPfHJpgzEltYBW+kc7Y5mlJVlAmossQwIhAIEw90Hg5vd08pEsxGTD49g2blw1vJr74QFQQH3rMUsw"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"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"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-formfield_0.21.0-canary.7033124d.0_1615919826580_0.5020263355333232"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.6c0ee901.0":{"name":"@material/mwc-formfield","version":"0.21.0-canary.6c0ee901.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=11.0.0-canary.73a227194.0","@material/mwc-base":"0.21.0-canary.6c0ee901.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-checkbox":"0.21.0-canary.6c0ee901.0","@material/mwc-radio":"0.21.0-canary.6c0ee901.0","@material/mwc-switch":"0.21.0-canary.6c0ee901.0","@material/rtl":"=11.0.0-canary.73a227194.0","@material/theme":"=11.0.0-canary.73a227194.0","@material/typography":"=11.0.0-canary.73a227194.0"},"publishConfig":{"access":"public"},"gitHead":"d7894da96b1452ae771bb3096b993e3f51ce8adc","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d7894da96b1452ae771bb3096b993e3f51ce8adc/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d7894da96b1452ae771bb3096b993e3f51ce8adc/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d7894da96b1452ae771bb3096b993e3f51ce8adc/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d7894da96b1452ae771bb3096b993e3f51ce8adc/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n|----  | -----------\n| `--mdc-typography-body2-<PROPERTY>` | Styles the typography of the formfield.\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.21.0-canary.6c0ee901.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-fKHuAoNzqKMSQ22nKGNBYPATRFh4E8GTA7uqkMLHFz0B1eCBkmMtj8+NabOyEXYcFHYlhH9X4CZtAR18RPc8CQ==","shasum":"caff5d33570870778dd73dfb91ba6f3f19b9717b","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.21.0-canary.6c0ee901.0.tgz","fileCount":13,"unpackedSize":40638,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgUTNqCRA9TVsSAnZWagAApSoQAIm/NZnKHBrv8+u3x3Eh\nk0RGQsfqaBqKpYZVlRKeKCFmSIzno0P9eNDVnv6tyOU+AprHsaqzksU5i7iS\nhzWeVleIjxoEJbh9Ao5R4hB6voG55g0v0JqqyfbJLVlZ8YXdqirWj5bpwsHk\nJ6b8P05UJRdOx+ossFLU/KeHF9QpPVRIr6BNsX8EpxJIpB3ZVIecQ4ToTN5P\ng+bzriDCgZH69QCuPLR/liGZV2UG3qYBJM3KCQ/Gx96DsauauNCfGGAEM+lv\npFn738v9mlvnWFC5mLIoGNvrB7NrWNhtSEjLX2kwjuycd8NCCZzdxWw3tEZ4\nd92wYxd1QlM0I7WN2EwX2CRZXwXoB11z7ecUxtRlTZW0UopK+BCt0oCaWvSs\nYRTaf7gntSAEpS6L2bFyB0gV6UxMGqKFNN5uE5KW0fT3mnVirZV4VD/2DF3+\nv4Q+KZL3zFaDCgMAsymntg0YYkrMyEA615pthMdpL1XDzby9JqKR8hYP4VOO\nAVwTN01WMMQO9dfaPFDJPUNKi82G33AY+I90ivaOFfZdmv6Q/TWDcvnVHYsK\nBj1HwnASqNuhHSkxVjZzpmwiiZjkBx2LhjQH42Vb6A/2TqoM+dUv4uTEjz3X\nPSp2mtMoJCnUZrDi+Zs1bhzOVtBeROOAFuaqmsEPiXSRgowRiFG0GjbjP8vX\nkA2q\r\n=Uv+H\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCLkpu6PN3JWqQ5bjarGVK8HRHE36nX3xtLcEyeTgMP6wIgeJLoRLNlZwlnWeWrdDT/xL48DvAzo5HToB0fmUJui6U="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"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"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-formfield_0.21.0-canary.6c0ee901.0_1615934313111_0.14521009644785865"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.7f0d605e.0":{"name":"@material/mwc-formfield","version":"0.21.0-canary.7f0d605e.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=11.0.0-canary.941ca3b3c.0","@material/mwc-base":"0.21.0-canary.7f0d605e.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-checkbox":"0.21.0-canary.7f0d605e.0","@material/mwc-radio":"0.21.0-canary.7f0d605e.0","@material/mwc-switch":"0.21.0-canary.7f0d605e.0","@material/rtl":"=11.0.0-canary.941ca3b3c.0","@material/theme":"=11.0.0-canary.941ca3b3c.0","@material/typography":"=11.0.0-canary.941ca3b3c.0"},"publishConfig":{"access":"public"},"gitHead":"77ccd00da9f68d22de2494a2aa4f35b0da375669","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/77ccd00da9f68d22de2494a2aa4f35b0da375669/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/77ccd00da9f68d22de2494a2aa4f35b0da375669/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/77ccd00da9f68d22de2494a2aa4f35b0da375669/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/77ccd00da9f68d22de2494a2aa4f35b0da375669/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n|----  | -----------\n| `--mdc-typography-body2-<PROPERTY>` | Styles the typography of the formfield.\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.21.0-canary.7f0d605e.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-Y0/DhvE5ypo4BLNmRxQbQEWpPyvhygNOhIk/I0oJlsD1nPhKhtt0+Nbv6/1h8ARM3m7uW/+o/Mn1ZkZwkuWZGg==","shasum":"eed250e3c1a120335ff2d5cd7cf044026ad557b0","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.21.0-canary.7f0d605e.0.tgz","fileCount":13,"unpackedSize":40638,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgUkSYCRA9TVsSAnZWagAAoeAP/089ZgToimjJpNGxeokh\nEdEcz0YiW/on1d4/zXbWKcq78qoPEHMyd2uU3EHlC6jq2hQvRQjDQBKEFGFN\nw4gTQhx6cpHwz1GagfIOp2BzCWDJwBGVAjQYwGaF0JpNG5QN5PJxUl3gI7A3\nRkNKCz9feaVOm8IRDzrvsXXMIFN7IRHjqCOuf229Qt5jhCQHsohdloRAXT1T\n3qTjBZRTUtRq3+ZCSGOd4AkVERv7/nn7DfZFmuK7je0Zx0S6gTo0g0A3Prgd\n2nAbH3GqKt3uZEJSALK4PtOuILbUoEZ7Vyzov5iFOi8o2R7pwYvOkl+PxjxJ\n7Pj4aSqs+sKeUdN3+tZ2VS7y+xT9bkxK2OtCMYKHBc0kfn6PLTnNnnbuTCx/\nVT1zz6C5qPx7kMWdcwnp1xeI/kq+MKPKmay7KrM3SfV0eTB98tntg8UVnP67\nsugUFThheHQ99G4jPlIdVS9Yypf1f1wZqz5F7elCCFJ3HwZ+mX6hmxvXlesr\nXFYZ3RL9BoDSUBmJiUqV62Eo+irJApCq9FR5/QRew+ESBfiFcga0m7062RxB\nnQccDmwg/EZ3Vh5Qpg0FpEV4FujxJKWe/YyTE+PHqMgcsAKeS3iP+FiPGOUa\nIQiBgyiAoabxwvQtJtsNLv3qzPoqlwDGmSpP754r3G1RW+dW5NHBxclqIJMr\nrInk\r\n=TdH1\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDdpuxUVdpogGWWYCAO8UV5X6H6DGoD6p+3XYrzuFLXHwIgcQQZfHx6ZmeLyk1ZcKov9E1/VNFztJGbxAe9bGO83Qs="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"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"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-formfield_0.21.0-canary.7f0d605e.0_1616004247979_0.2813786829028375"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.572107b5.0":{"name":"@material/mwc-formfield","version":"0.21.0-canary.572107b5.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=11.0.0-canary.941ca3b3c.0","@material/mwc-base":"0.21.0-canary.572107b5.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-checkbox":"0.21.0-canary.572107b5.0","@material/mwc-radio":"0.21.0-canary.572107b5.0","@material/mwc-switch":"0.21.0-canary.572107b5.0","@material/rtl":"=11.0.0-canary.941ca3b3c.0","@material/theme":"=11.0.0-canary.941ca3b3c.0","@material/typography":"=11.0.0-canary.941ca3b3c.0"},"publishConfig":{"access":"public"},"gitHead":"9399ecfdfc3b2f0153e16b3970555c1351c9ea81","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9399ecfdfc3b2f0153e16b3970555c1351c9ea81/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9399ecfdfc3b2f0153e16b3970555c1351c9ea81/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9399ecfdfc3b2f0153e16b3970555c1351c9ea81/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9399ecfdfc3b2f0153e16b3970555c1351c9ea81/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n|----  | -----------\n| `--mdc-typography-body2-<PROPERTY>` | Styles the typography of the formfield.\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.21.0-canary.572107b5.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-Fohh5yvwsZyXHkrhUIH44BX8ps5dAvnoRZKIJfRGxxvPZsKbwPrDofJRu9OvfINs5AqRtkqcuAZQW3riT9r5qw==","shasum":"a6d4103ae1ddbdf81a9c495f92984eeb15b4ab5e","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.21.0-canary.572107b5.0.tgz","fileCount":13,"unpackedSize":40638,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgU+gRCRA9TVsSAnZWagAAwKIP/3LXL3bgWpuD7gwXuhXg\nju9asl8zU8xn5bf+x91RkcU/yGfxmNdrbmiX7cfZIPgje+Yb1Ho/PTQG/tjR\n0ahYvT5L8DIjxPaSJuUE6lXgHIX3oUyH8k53TbUDGnBKKJEPFa2C53Reamli\n707XE6G2Wo5BFUpJfusjcF6gHbgOSrnW/nE7VEOYDZk7o/EY7ByL1Ijgc8ye\nMcZAvS/pATHbJjERoXA8f+OwUdKSp/J/CAbksf83GM2TUGKuflAZl7aZyt+F\nJ3KPz+SXcOgu2Ee0PUuOTv/HqeITQZdMmYC68nfiE/iPgEFroSI47KUBFspu\nULw5bNvPW4ZWc8dmkh0nuNjVItor9v4+gCfhfD/+FyZkIhENE4dtpYvXO1yY\ngUQkHdLfcEgtm84m+iwhwmMmFNDF7+CexffxumPTXKi2mb4xzxN79j70JY5j\nuMy1xkbtPWqvNqiJka55tvBcwUCAbzI9fW3+e/CwSKcoAs9SxVsxRQVWU6Vr\nPcVHOe0APivdYptrFs24Wp1mq6BhQSuEJuq+g2ua0BcmrgzArZVJ040UxgX+\nWyO1R6G/xl1t6oyWRV/F4IAjZkLyjtKE21C5nLT10lsUUIMHcEPeBbapU3/z\nVulRVbbe/JxWNIjVnPVSNxMJFxV5IpzmBEQvvfoIEOqK6Z6pAhhgbyDLdbW3\n4p7R\r\n=Kemf\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD7mdDwML3RvQs/1TU34UusCqMmxmo2bpkaSHiwdVuoxwIhAPk3+ppGbhRfwOuQB+BytS7XpOBB65YucPOjiq/HO2TD"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"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"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-formfield_0.21.0-canary.572107b5.0_1616111632825_0.3930051184302499"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.b7b220b1.0":{"name":"@material/mwc-formfield","version":"0.21.0-canary.b7b220b1.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=11.0.0-canary.941ca3b3c.0","@material/mwc-base":"0.21.0-canary.b7b220b1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-checkbox":"0.21.0-canary.b7b220b1.0","@material/mwc-radio":"0.21.0-canary.b7b220b1.0","@material/mwc-switch":"0.21.0-canary.b7b220b1.0","@material/rtl":"=11.0.0-canary.941ca3b3c.0","@material/theme":"=11.0.0-canary.941ca3b3c.0","@material/typography":"=11.0.0-canary.941ca3b3c.0"},"publishConfig":{"access":"public"},"gitHead":"23f87dc3afa9f7b0599f9673a9f27f15d9751f3a","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/23f87dc3afa9f7b0599f9673a9f27f15d9751f3a/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/23f87dc3afa9f7b0599f9673a9f27f15d9751f3a/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/23f87dc3afa9f7b0599f9673a9f27f15d9751f3a/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/23f87dc3afa9f7b0599f9673a9f27f15d9751f3a/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n|----  | -----------\n| `--mdc-typography-body2-<PROPERTY>` | Styles the typography of the formfield.\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.21.0-canary.b7b220b1.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-Lm5MVxxO7yokHPXNpg4wGqw2dop/sc4iJ0/4eYO7/v/5UgQrM6vGyPHXA5Ah9P8Sy9gbrUr15PNQ6cp3Qjv5hA==","shasum":"ae0c135d44e70e5834da06cd3e54c7a64fc8cebc","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.21.0-canary.b7b220b1.0.tgz","fileCount":13,"unpackedSize":40638,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgU+4YCRA9TVsSAnZWagAAV6cP/iKOocVSEvsem3a+ERyb\nIIht1prYknWNAMPICFaAOBCJVL+Daus1kjJNGpZ3bJgDKNvKyvfKWCuH263T\njZDEcJqL1w4hVqSwkKagdnpkMK8qLqrnmQtNi6ddK+su9fsF+a2mKBSGo8WN\nPO0TpFwStkGiQi1WSdv72SYh8/DAs2BZ+9c+z9UQJkkWJlSH7xa+ST6i2E1e\nOdtcwJ3YAFoIvicoDBq66PhmTp0TA1CF7TiHPKSV63KTyKIsQcquHubyfTtw\nDrJ7scDLnDCEHO3L9CxsRNzUe9D2QpvosiYJ75vfZwA4VhleRG8M+Z6cFhSC\n2hrRArJrfv6zPukZpPBKGswlqefnrUfjxiAS16k3Y2zp5Q23ZAl4IkUdBKtx\nX9A+w9OjpICH9g2MYMBK9tsw1dL/YdChtBR0ZnlNoOzAk34xrmh9kkTgGyAQ\nJFDy7z/4dAYqadoOaQGlpq55a/HIM5YooHA7471HJGeJfwJtymPow0MTv23w\n9Tn/+Q17YYw+oj17BxURwhzFz5Z7YAe70f3LqN/APksZuhObmSq46DJcTxCb\ns+27yI1KxY4KuFbKMed94icQcUQUgYqr22ZKGg3DrJpbWlDfcea2XHYX7y0v\nX43M5YRlzcAqu7IIIzZB15lhQo6nKh2chhvVFIKmdsiaWFOK1eaPr4c5L9vi\ni1re\r\n=6pKp\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDHSdUrq4eE8RfPXm+KnmWPv2kuWVswYBYJg6K0p7SA6AIgKix0jjer8bpCJeH38oZ0mzMxMFS53j60mHvoU/qPf+o="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"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"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-formfield_0.21.0-canary.b7b220b1.0_1616113176301_0.9736927539396003"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.233b2de7.0":{"name":"@material/mwc-formfield","version":"0.21.0-canary.233b2de7.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=11.0.0-canary.941ca3b3c.0","@material/mwc-base":"0.21.0-canary.233b2de7.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-checkbox":"0.21.0-canary.233b2de7.0","@material/mwc-radio":"0.21.0-canary.233b2de7.0","@material/mwc-switch":"0.21.0-canary.233b2de7.0","@material/rtl":"=11.0.0-canary.941ca3b3c.0","@material/theme":"=11.0.0-canary.941ca3b3c.0","@material/typography":"=11.0.0-canary.941ca3b3c.0"},"publishConfig":{"access":"public"},"gitHead":"6887e9dd977fe57d5199416b097952ea056e78c6","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6887e9dd977fe57d5199416b097952ea056e78c6/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6887e9dd977fe57d5199416b097952ea056e78c6/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6887e9dd977fe57d5199416b097952ea056e78c6/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6887e9dd977fe57d5199416b097952ea056e78c6/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n|----  | -----------\n| `--mdc-typography-body2-<PROPERTY>` | Styles the typography of the formfield.\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.21.0-canary.233b2de7.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-bOrKrGuBm3dPiQJD0GNiVEJpuUF2iojxBgt6og2GrbCwXGqSQOO1M7HsWmewLVTm9heRyn2/ybUfNt103BLqTQ==","shasum":"5d29e7efe0ffe14a88a2efb21b42ab5ef1009e12","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.21.0-canary.233b2de7.0.tgz","fileCount":13,"unpackedSize":40638,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgVO2HCRA9TVsSAnZWagAAqd8P/0YgOrN2jUmMJvPYEwIV\nXts0wauhftXqhfdRZP6BFoNo8PAAbimQIPUGqCkXtUFrPrmeilTGK4ThaWrq\nXoDfFcZqh/1hLslTrVfiGejodeu5jImP1w7vPx7uLt1C+TE4oq2tlRYNOQ04\nVb6xJ2JcP31fGDF0ALL50Z4ma8zfDiuEiKIJnmPw3/VHvaGva8N6aJOXIlkW\nEI6Qunl1PxcgdVdZfqIQICgU2ARZj3kbjTHvWNo/SSYNiSMsBBqC7tprPF4Y\n2j40/Nzt6W0mTRbyqpcPGXbMDrkZoHmoZa1tAMwvP10ZKs8u2j47O1MRo/ry\nS++FqYU2vArT9N5O08HjrIezWjlRhVUSBaExd8XnJRuPxJZ18vae+OQ8Qk5Z\ngNDlk0g8ARkOU+7jffkEeUhAixQjAh3zUDhmi37ejY0G5NiSWhuPVghQwxMJ\nruML15tNgklSO7VE58Hk7Vl5kdVBUr87uqf6N59Kgarhj/FD9ksw6tJXgHyh\nUE7tSl9soHV3MmISCYwQbj5vOH0NUyQpdSYtaaKrbRVq9Ez5gAZXzaxbGK5S\n0cYsSsNzq1TOrvboNOq9e8lgtIS5BMIN6n1aKHfT8GdwtD6LdkXPyEcMnw9i\nF8EIRMTPrrTIXsk5C1c74WWuzhZEz08i0aCmVIt7NPnaXgXXd4WxMr2GoD3J\nXlis\r\n=2O7W\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEttxVkKdCkbCcA/eOXYHffz89EVzipcCuAXi0Ebe9WHAiEA8kVrznnRaF7rJnjuwEkZa/hydoSyli2BEODewgVol+s="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"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"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-formfield_0.21.0-canary.233b2de7.0_1616178567422_0.04436289191110032"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.0c1a2d97.0":{"name":"@material/mwc-formfield","version":"0.21.0-canary.0c1a2d97.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=11.0.0-canary.941ca3b3c.0","@material/mwc-base":"0.21.0-canary.0c1a2d97.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-checkbox":"0.21.0-canary.0c1a2d97.0","@material/mwc-radio":"0.21.0-canary.0c1a2d97.0","@material/mwc-switch":"0.21.0-canary.0c1a2d97.0","@material/rtl":"=11.0.0-canary.941ca3b3c.0","@material/theme":"=11.0.0-canary.941ca3b3c.0","@material/typography":"=11.0.0-canary.941ca3b3c.0"},"publishConfig":{"access":"public"},"gitHead":"d341fb857369610d763723d28d8c9955cc461de4","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d341fb857369610d763723d28d8c9955cc461de4/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d341fb857369610d763723d28d8c9955cc461de4/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d341fb857369610d763723d28d8c9955cc461de4/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d341fb857369610d763723d28d8c9955cc461de4/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n|----  | -----------\n| `--mdc-typography-body2-<PROPERTY>` | Styles the typography of the formfield.\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.21.0-canary.0c1a2d97.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-rwSNK+5wTdP2ofMtpmd1ezpd/OUuPrHTZkBzUjYfTfzZWIslwc2WN7iDXaDcM0p8rb5Sza1QSFUQbbGzQrOPQg==","shasum":"ce4c9257db8b4c7fdabe1819cb0c9d476ae6406a","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.21.0-canary.0c1a2d97.0.tgz","fileCount":13,"unpackedSize":40638,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgVRWxCRA9TVsSAnZWagAAiYcQAKTzfaeAQHJIKde8nZBv\nNoLNB5BYPTukBbRpIZFV9Do6gXuRbj4eG51fwmaouaEb198uCZJr9W1oPPhd\nfnKj+WlvSBUBg+uFx0fSP+byno7NIICNNZa5zsnRn7zm8dvU6o9qz37EXXLM\n2tLhspk22rf9/OCgTyWKDl87jWYqKuVr0wn97yCpFbw7FAYMneP6J1rslS/L\nKPAqrjyY8oiwreQeeiSVcmXYsBOwmGl9aRiMXFiPTzr+2Y3d4VjfZLG/Ug7h\nivceo4Yfyc3UA8/FKkZU3P1n5p+z0q7o0bkWCaKQ2Q9lwcy3Jh+crHCcG5Ed\niBC0Ap0mNR3xDzvKc8xBjn9U57gX0b0SF70lg2Sj6Gxl7mu1ZOl6ItMVxLBY\nFRGLEWLGKhOItjyBJv0SqUhtSOmcxcMeV4wzfbPYmMhKkCMMLznbLRdtzjBw\nmLD26ifdNV3HC4rR/OipzcSoTa2ElMVwTcBivAZGjyCUAURv18o+F3mn5VuM\n1Sm7H1OmbHAZ0QzJTd3Fv9h7wOVkBfeOmv6oOKdSS8rsnr5lbDvdKRjY6zkR\nnV7Yq1WUTXvl8pogtL+35yIl6CjWPUxIT3A/qnqSOMM4OcPHZQBcPMSmbq1s\ng5D1hU/z0wNRR+NfmtutBb4COXRzcYj9a5L9OaO5kJcOY92Hb/yrAPk/6Sz1\nFU1U\r\n=bsC2\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHprfGN4ayXEvvcITgTBEgYYJ84vV5l31evvVqTvzyRvAiAuTYIkjGVshPPgMoLWZNUPVmhiMyAeDLH7+nd4wYQ7Aw=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"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"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-formfield_0.21.0-canary.0c1a2d97.0_1616188848515_0.8818936823454104"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.57ca2e73.0":{"name":"@material/mwc-formfield","version":"0.21.0-canary.57ca2e73.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=11.0.0-canary.5f0fc444a.0","@material/mwc-base":"0.21.0-canary.57ca2e73.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-checkbox":"0.21.0-canary.57ca2e73.0","@material/mwc-radio":"0.21.0-canary.57ca2e73.0","@material/mwc-switch":"0.21.0-canary.57ca2e73.0","@material/rtl":"=11.0.0-canary.5f0fc444a.0","@material/theme":"=11.0.0-canary.5f0fc444a.0","@material/typography":"=11.0.0-canary.5f0fc444a.0"},"publishConfig":{"access":"public"},"gitHead":"aa86345a10da02c5166fca78e72e367ebeb95677","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/aa86345a10da02c5166fca78e72e367ebeb95677/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/aa86345a10da02c5166fca78e72e367ebeb95677/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/aa86345a10da02c5166fca78e72e367ebeb95677/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/aa86345a10da02c5166fca78e72e367ebeb95677/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n|----  | -----------\n| `--mdc-typography-body2-<PROPERTY>` | Styles the typography of the formfield.\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.21.0-canary.57ca2e73.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-ZkS9t7ZyNTnTIgxJTZQWJyWBZtsZJs1uEmCg+tYA5xM2imea9NcT8qlG2Aq7Z6xu4uvkK4aGsSWr7qh13XszKQ==","shasum":"56611a85aa24c229fb43f4b99913190d28cfe9c7","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.21.0-canary.57ca2e73.0.tgz","fileCount":13,"unpackedSize":40638,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgVShaCRA9TVsSAnZWagAAHFYP/RvcQwZQfv8lASOJgZrA\nMSlD8ZOMptskX5tvf3sub2zILAn6+Hxl666TuaRH5Tu++wgChmQ0ykdLcTQ7\nm2sObbnJj5AT5fYkJSGpuG54nqG+a4h54IPlqdYZ3LK6uPoD8vHSKwX+h5RO\nij8dRPZBVfgtrBI5en4DRjOp60ST35Hfo0/SoGYXlQ0SKeL4fV0TcmkUjgMk\ngXC8G+lsQlLl0eYH7Bx11ig4QIS5lYD2ohNgFVc9CzBQNajkltO1ZNMoqfGW\nwcX9rtdTAzOoiuOKTr0Rfre/ODV06bKvTxCogA5QO3DU0NH+SIILY1HvVFJA\nRvJPujBHW/Xtr6f9tL+QJRm3ZN3dvkaDZJZgznxBkeqWsjeHpN0Wfdv//cl0\na2RZe8I3DAR49JNiiQWfIUIT/TceYNtK3ru8TlitqRunu1btxmIaHd6XTdei\nzsmC4B8LyOKHuQH2A0a3NnBUb6YLnFFeFJY4bbw+QXx3ZWFt6XeGzqa7LHJO\ni7JDhoCZja7Yb1OkixVdTZb5fZfzzxZisxSSYYYXPdj31qBhXJPdYp8tALOW\nBAj6rIoDfnCOzyqBQu9KJhdLVCRWGSfdyCs6v6V4hiFeXvp1y9QUafBCBr8z\nD9NTE6rBJI18CbbBfDEalX5RzNtA3fLupE4kd01yUCke1hoG8nlisbTMSYA1\nh8ny\r\n=ZsDv\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDh8P3Q1Adn5qhWOmbDAbgFOnmwRyUli4hU6EuegHWWPwIgA4XbA6EExGlAAAY7Se7aw3Y5UrsiXNz/vO1wLl77vD8="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"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"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-formfield_0.21.0-canary.57ca2e73.0_1616193625997_0.20860906592254547"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.5c058f4b.0":{"name":"@material/mwc-formfield","version":"0.21.0-canary.5c058f4b.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=11.0.0-canary.8943b991f.0","@material/mwc-base":"0.21.0-canary.5c058f4b.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-checkbox":"0.21.0-canary.5c058f4b.0","@material/mwc-radio":"0.21.0-canary.5c058f4b.0","@material/mwc-switch":"0.21.0-canary.5c058f4b.0","@material/rtl":"=11.0.0-canary.8943b991f.0","@material/theme":"=11.0.0-canary.8943b991f.0","@material/typography":"=11.0.0-canary.8943b991f.0"},"publishConfig":{"access":"public"},"gitHead":"6a50e9efec728fe20024c0ac52645387b1485f08","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6a50e9efec728fe20024c0ac52645387b1485f08/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6a50e9efec728fe20024c0ac52645387b1485f08/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6a50e9efec728fe20024c0ac52645387b1485f08/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6a50e9efec728fe20024c0ac52645387b1485f08/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n|----  | -----------\n| `--mdc-typography-body2-<PROPERTY>` | Styles the typography of the formfield.\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.21.0-canary.5c058f4b.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-TJTY01u7+VfZTrG/zqMlNFlw80B0LhZ3E3i7VUB8NFx+XUO09FmQBmXxmwOfSokJzi4Lj/6XyyAj2BDifYssXA==","shasum":"517c19e98e891762d911c5f85205812871d35204","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.21.0-canary.5c058f4b.0.tgz","fileCount":13,"unpackedSize":40638,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgWnTXCRA9TVsSAnZWagAAdAMP/1MN4FviauZNZDqK3QFb\nhbF0FgxlDSA6gC07UcIS1JT6Y4LKYCxek6GOIoR2fb1xomJ5Wkd6DtgBxb16\nQGTDPuPEQDVvCkDDboXVfxdz0N8aOmK+LfdmwqJy42wDxAxUyvmwSNBxSfuh\nJR6sGZWIdVeRyq+Njz5FeQmnhFrM/f7kQ+ItbWsaQBzmbngk9Zj0OZuZmwPm\nvyHwLgvaM8sTex1RzfCOWw55qr27D+n8B8FV0NTpDggpyJDQD3OtPx9joIgb\nKixgLWMKdZdx9qGMDzDtwj9HU/J+YcIJQkR3W5B6pjTlrZ7wJ/U7gm+KovEE\ncwv/d6hdzNMJHk3KkF82fJD3Clu/oD2rijMHjbEd8I56fUC8l6nXitmEClaT\nzvbtnbSjRJ+QnommhrjXdgtyCuM7f31/arlAgNHohzdRetGECUtAkuNafBo+\nw3ioLr5Qzzr+gOhzjShaAyw1Ho4O9rpY7DXhUTRzuv+CMp/NsKGrqsWoduna\nG9oai0WWJ4j8S3vLOo60UktxSzxVXpf/tteBmzC79J07a7MSzptHboglFJv+\nIgBq3oeoMPENwD4wkIcRdKyAIH9nWTxVZQxHNqi68jou35eKhSqSMK04Id9c\nBH58Oa2pqSQ3RFNtM0kgvWhNmQk6QxNvnGNaT/xNXuI1dEjKlBwvLMBYBjSA\n4gmB\r\n=DNuj\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDU9txNzDaIDNYG+ENjbtkbrly4Jg3hbEtlgopEl0Pv/AiEAhv48l90HoEohZcK17tdErj77vWd5IApEOkR2YyyXB5U="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"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"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-formfield_0.21.0-canary.5c058f4b.0_1616540886548_0.5204347367109681"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.e27ef7cd.0":{"name":"@material/mwc-formfield","version":"0.21.0-canary.e27ef7cd.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=11.0.0-canary.dc9c84023.0","@material/mwc-base":"0.21.0-canary.e27ef7cd.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-checkbox":"0.21.0-canary.e27ef7cd.0","@material/mwc-radio":"0.21.0-canary.e27ef7cd.0","@material/mwc-switch":"0.21.0-canary.e27ef7cd.0","@material/rtl":"=11.0.0-canary.dc9c84023.0","@material/theme":"=11.0.0-canary.dc9c84023.0","@material/typography":"=11.0.0-canary.dc9c84023.0"},"publishConfig":{"access":"public"},"gitHead":"7631d1b220323112ce72141784e75c8356ca0f88","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7631d1b220323112ce72141784e75c8356ca0f88/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7631d1b220323112ce72141784e75c8356ca0f88/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7631d1b220323112ce72141784e75c8356ca0f88/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7631d1b220323112ce72141784e75c8356ca0f88/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n|----  | -----------\n| `--mdc-typography-body2-<PROPERTY>` | Styles the typography of the formfield.\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.21.0-canary.e27ef7cd.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-HWwKDx4XusfPxtH6K9YupuAfrm9/xXK3dZzjhIOgVE5KuqGJ2h1kHWUzVN2gq0yfxWKZ+iFEz9oqooZZqy3RZA==","shasum":"91765eb207de25905aeba59d9fd13d169da72782","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.21.0-canary.e27ef7cd.0.tgz","fileCount":13,"unpackedSize":40638,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgY4XRCRA9TVsSAnZWagAAXXcP+gMMbPc+CanR+4qrsDip\nFkFPMrmIzfHPhMZvNkZJXoTsWnOxGzjszOLWmgC7i0rKOQ88WSKYM++0nAa3\nuTfoLY8skiYhl4z6Gs8S6Kw7DdGR6JjOYBPLddeC/Y6NtUqN+bWxA57t491e\nKHfPMQH+FB/+EScqsptYbztUwbP3MZie5mGe9GqQ+kTXZe4AA0daK3ipZUs8\nrsBL9pwhREA5AcWOxxYUgpMrYI5Ado8qxEsAe9mKX5ySPYMaXDB6+8jOt8MW\nAEs5aI2WC0En+FOTP2CsrGrDgG+fZNP/D7ER47uWz05X5hHAI/r3itdTCV/I\nA8qV+HeWRrGz+NfbZDH7ZatOO6vPGpPpeGXrn+drNjQnnP6iWhfMpLHG16si\nrV0DY4AHEnm4LvHYv1RsJq0SylFrkAK7xjjYgV65lBf2//ocXYVsN/P3Roon\nzNT+Ga24kTXx/JtO1/+33H1ycFkyPIkBn8eFzoCB01Cm+1FohGKA9uoilKKO\n7Zd7rZ8yQ/ND0PhaHwgobQR3LwHXNuOYPSFQXs+RMd5ldAz9CyWZjdkiOJX8\n1Gq6/2XTAf7CeYScEMrzLqnO2I8LM4+Z5nzr5zGxjf9bMRvmVjwTiuEwL2PS\nTP8+jdgOx128lVFON4bXEUoT1Dvr4zxOb6WYEZKjNYlSm773sKkZLQgT2Mcf\nfxyz\r\n=uVvq\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC9mB37gOesw/oh+c7mkm3+AYfQL6KYHnPHqTuCOho6qwIgSsgpkeh6Z72lwYqO5JyA0pH+6NOLZ5lYCnOnXeAoidY="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"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"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-formfield_0.21.0-canary.e27ef7cd.0_1617135057416_0.39394570087826564"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.15c09e74.0":{"name":"@material/mwc-formfield","version":"0.21.0-canary.15c09e74.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=11.0.0-canary.dc9c84023.0","@material/mwc-base":"0.21.0-canary.15c09e74.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-checkbox":"0.21.0-canary.15c09e74.0","@material/mwc-radio":"0.21.0-canary.15c09e74.0","@material/mwc-switch":"0.21.0-canary.15c09e74.0","@material/rtl":"=11.0.0-canary.dc9c84023.0","@material/theme":"=11.0.0-canary.dc9c84023.0","@material/typography":"=11.0.0-canary.dc9c84023.0"},"publishConfig":{"access":"public"},"gitHead":"6f3ebc4bb5f04f139f9cc24061e00f418b04ae88","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6f3ebc4bb5f04f139f9cc24061e00f418b04ae88/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6f3ebc4bb5f04f139f9cc24061e00f418b04ae88/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6f3ebc4bb5f04f139f9cc24061e00f418b04ae88/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6f3ebc4bb5f04f139f9cc24061e00f418b04ae88/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n|----  | -----------\n| `--mdc-typography-body2-<PROPERTY>` | Styles the typography of the formfield.\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.21.0-canary.15c09e74.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-cb7fFWmvr2Ss7DIex70wuSLEJz+A6UxLABIg2q/n7dIbyuKq8VaP77YvxDH+Fa8gCe8seDWOTHOA1+hXoZ5oYw==","shasum":"44fcbc447f645cb2993ebe673e491c598d58252f","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.21.0-canary.15c09e74.0.tgz","fileCount":13,"unpackedSize":40638,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgZKeRCRA9TVsSAnZWagAAJFEQAJnPz2jQ8y3CYwe47Nw6\nNLurIgJlqDApKwoEx3xfKmJAFCWCFnkEaRUxk4Oodly2OC8y+DPxsvZ2rN84\n+xQGKyH02s5d/nJg+86Y8GEdnmMVw1ZLckmiuLLHwz7dSAvsqlqv5BrcI3yZ\nJRzxHypZyBf879tBBlt1mjMDCiDvP8ToDocxc8qST+fZfViW5mml6yKBU29f\nupPAIzAt5IJxKJAmqbrlssh7WXC57PHS/2RyZwbU1mQTC1Zk0fj+8fcNK3kv\nd3GN7kxLS5KzBzt9zgYyFMrDCqMOH2/rLcs4z5m4G1otT0Zw+HGCM2Evdo66\nU8zi+D1cI14wH4MWRm+fqFJ+4yaTYlCfnQsLkZ6+5oJcaomu/FvRFkG/s79L\npNzYp8/Xl85EsVNpmjAI/rQe3OpmJ48DOsoAvCGSbV2/gsrurOJbkVxGdOX1\nDR0WfpvuVxXqxc0Jsb++mAsxXzK+OThNjuF9AtcvjG2tiQYI9WWYYSKJIvXM\nzrxL7w46It2W7JOCfJz7N2hOSKYvbCwA4jX79VJC4OFLP11XKq7EAKUm6QZj\n6qrJN3GuBgWeUN0/I7wFpccwlPgQnBY9zTsKlydL2zDwiD6wBMohbNbfJyAW\nyrLQDoRjj0w511BBzkv2nwUWd+eFWKLeGS899WkydxF0V+wk6OzCejyQi8dV\ndwN8\r\n=+hbR\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAjpwIQYddqre3cFPxVhPRn7tjQRrhz5MqSEFQ5gMxvtAiAGmYS3Dnh4pRIKeXXhCHL3fKyxihM79q+bvtbiRc+P4A=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"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"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-formfield_0.21.0-canary.15c09e74.0_1617209233198_0.877229556094475"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.4dc32be3.0":{"name":"@material/mwc-formfield","version":"0.21.0-canary.4dc32be3.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=11.0.0-canary.dc9c84023.0","@material/mwc-base":"0.21.0-canary.4dc32be3.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-checkbox":"0.21.0-canary.4dc32be3.0","@material/mwc-radio":"0.21.0-canary.4dc32be3.0","@material/mwc-switch":"0.21.0-canary.4dc32be3.0","@material/rtl":"=11.0.0-canary.dc9c84023.0","@material/theme":"=11.0.0-canary.dc9c84023.0","@material/typography":"=11.0.0-canary.dc9c84023.0"},"publishConfig":{"access":"public"},"gitHead":"1f71c032815f456f2ddbee58c9b175e65da3c18a","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1f71c032815f456f2ddbee58c9b175e65da3c18a/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1f71c032815f456f2ddbee58c9b175e65da3c18a/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1f71c032815f456f2ddbee58c9b175e65da3c18a/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1f71c032815f456f2ddbee58c9b175e65da3c18a/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n|----  | -----------\n| `--mdc-typography-body2-<PROPERTY>` | Styles the typography of the formfield.\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.21.0-canary.4dc32be3.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-p00DZdSX8drRtor1tYVrB8dLYC6xQVc1SNzAmXO/yuUshFseAUVeAZchmGCOpwXQohQxWpGVJXqrlW2lfTWS7g==","shasum":"d3a502a2f6ef2ce50b23ae38787cd87cd40c61c3","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.21.0-canary.4dc32be3.0.tgz","fileCount":13,"unpackedSize":40638,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgZQolCRA9TVsSAnZWagAAkaEQAKCe/pEjpioxoBt0yCPT\nVhPpEq+x+I4RNxNMO6t7LoEXauuIrR15m44fk48+kYE9K9qNulGpPF8kg9AJ\nyZrBPndprgFknuS0UWMKeXPy50dQSVFUPzf0FUwGr9YyF7Cen3F+DwVSfmlx\nImF/ET8XJVpAAfE3U34HM/LbZqhbP0I1pojfQvVETQEzhtVGOLy7VLnXl5Yl\nZHenNCMVEU28vY5xaHiPU5aiZWs+ZoKx1gyCefDxDa6ALs9p7PS2ebqwf3Qj\nVvcIFRHn0+92A49Yg00VQryUYmLLpWGa4iIZn/WMhyPsN0RHH0jsCe4WPTPS\nHqR6+sqAhUglOiMNsNwpjWCL4/3X8y/wZhWXZKiAz2RcJ+DenKWt22myb3LR\nGjlK0J48gimQ11rNN6PjAJGab99FsKMAA+OyvuQd7mX05YkGxfVKSQwdteVi\n/G8cOmpyV1bd1kZ9S6VpXb6JxYkrmDC03efllPuyNEDaws2wkTUsk3HvbNW9\nc6g11BxxyNUpUlWbCv/NubQt05fol6t1hsMOopPa4eW2fCrb4ZLATdHbvOc7\nfbYjtgc4Wt6LtHbsXavoKbLxl+v/8EtoTMTvwh1pRKqiK22l3r/869M5oIjy\nSak4B7jbkY7n4HZR5Aai5VtUGMyLVvKTDrO8MqDSc9vQNQ09gq86rUg5HdLB\nTksA\r\n=LZ4s\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD5NRwW8kVvj4j15chUwIj0V6uJQ6bp/K79YNl8jnfqSgIgOPnD6W+SrP1WVDNlNy4YJNL6vcSOC9s+w3MUWepA7cg="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"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"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-formfield_0.21.0-canary.4dc32be3.0_1617234469541_0.6405490890262757"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.4b717f65.0":{"name":"@material/mwc-formfield","version":"0.21.0-canary.4b717f65.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=11.0.0-canary.24609b822.0","@material/mwc-base":"0.21.0-canary.4b717f65.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-checkbox":"0.21.0-canary.4b717f65.0","@material/mwc-radio":"0.21.0-canary.4b717f65.0","@material/mwc-switch":"0.21.0-canary.4b717f65.0","@material/rtl":"=11.0.0-canary.24609b822.0","@material/theme":"=11.0.0-canary.24609b822.0","@material/typography":"=11.0.0-canary.24609b822.0"},"publishConfig":{"access":"public"},"gitHead":"a7b21246791a74b1ae4e57975b1f4a394ad9cba4","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a7b21246791a74b1ae4e57975b1f4a394ad9cba4/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a7b21246791a74b1ae4e57975b1f4a394ad9cba4/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a7b21246791a74b1ae4e57975b1f4a394ad9cba4/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a7b21246791a74b1ae4e57975b1f4a394ad9cba4/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n|----  | -----------\n| `--mdc-typography-body2-<PROPERTY>` | Styles the typography of the formfield.\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.21.0-canary.4b717f65.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-/sN4gjvNm5P0JT3yK49JwoOkCBdQwsvtfd4XyV1fDpZRcB6aw90ltaWO8w9SFca8fBQt26pyYiHq5q7Kbrlrqw==","shasum":"927d80c0a658adb5b2518997eab95fe6a022f589","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.21.0-canary.4b717f65.0.tgz","fileCount":13,"unpackedSize":40638,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgZg1fCRA9TVsSAnZWagAA6iAP/2MU3VB5gZIQo+y1hM2W\nsOBpBRfk0SY+RyTSRixr8EnshIeYM3xKaNWc7Cn2cQJcE4Q8e1y11SN7xihL\nUzjLUY44oQwBrVEQJTWemjFcPaxrZJ1BqtxPAJ3eN9p2lAcLOF9n09+Jt2kl\nrgR7IVdV9ohAHOM47RUH+dy3nwL9dmFE9IWK4rY82ipllRTVoH9Dju4UD5EV\nXiOiUZ6WOpBMlcUsgu2s+Ri9XYOr6WbmRaWnJDxRrx3CKVkrBRfaB3eb0mzb\nuAa8oI3Vw3ZckwlTUbdoUV1o8sBbUTX7kow+4L3g4QUpE2VkNpADLrmAHjtf\n4Ov2ZrqlFFhXGbxtDkmlSB0OhRr/N3MTGk9emCXBa5Y2EwEcALoBNrODNWUy\nr51R7tJgRx/igE38Q+QUI+XNaqVmqjbvfhFMmvRXLp3rJuNIKUPqEFWZXdiy\n3Iz1cPDjjMh1ekWoGJQBsgv1KgD6e9x6WrSEoht2Eh4DWYE588mq27jZ41TW\nlriBS2G4VTUKfMtHIFlKuo0hIemdIzgp1laL1DDT6IgOQNfe22mM6GEZKUXK\nHqt57gD/Wseh0ntpWx6h0h+S+BB58u1T7iBQ8F4QY2wrg1Fl2vB+ms1ddkxY\nCX7iLvcsFjEnnS2dnBafJPIz+ECNJlT+KY3hqw1jVWlLG0e2Mpz38WcoF+vn\nFxX2\r\n=kJA7\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIExyGpDoMZSuZYxvHfcVgPSCNVPP6EF5//yEujVewogLAiB2KZqcIU0SHdLDjAtYN8g06OgQ+Bx+NCIBU6XquKGdPQ=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"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"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-formfield_0.21.0-canary.4b717f65.0_1617300828531_0.618104063428421"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.c6870f20.0":{"name":"@material/mwc-formfield","version":"0.21.0-canary.c6870f20.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=11.0.0-canary.24609b822.0","@material/mwc-base":"0.21.0-canary.c6870f20.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-checkbox":"0.21.0-canary.c6870f20.0","@material/mwc-radio":"0.21.0-canary.c6870f20.0","@material/mwc-switch":"0.21.0-canary.c6870f20.0","@material/rtl":"=11.0.0-canary.24609b822.0","@material/theme":"=11.0.0-canary.24609b822.0","@material/typography":"=11.0.0-canary.24609b822.0"},"publishConfig":{"access":"public"},"gitHead":"5808fd48fe9ee3cfe17f631aa6addaaa847cea19","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5808fd48fe9ee3cfe17f631aa6addaaa847cea19/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5808fd48fe9ee3cfe17f631aa6addaaa847cea19/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5808fd48fe9ee3cfe17f631aa6addaaa847cea19/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5808fd48fe9ee3cfe17f631aa6addaaa847cea19/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n|----  | -----------\n| `--mdc-typography-body2-<PROPERTY>` | Styles the typography of the formfield.\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.21.0-canary.c6870f20.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-LiyEOJYA9AUbz/C7jnB+BnmSy95jQqa1eLylqOGOGZ1He2ceJiREjdAhneocjjf+MKFGeDx/8KwX0ffWgsy/LQ==","shasum":"7027ad99380bb131c48f46335b997a42fd1a1586","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.21.0-canary.c6870f20.0.tgz","fileCount":13,"unpackedSize":40638,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgZlo0CRA9TVsSAnZWagAAFTIP/3oFQUOAD2QRwE2WBjzc\nJDgFj/rzq6h8Yyeuc/t3gv3adUjjwoQkNm1hz9F07Il/A3sYgjDs2qwMCR6R\nxRMrf2qFHu/wGTfTauvGYIBnH6+8FJWkVyotpEg0tRJHAigvPN2UJTdt158Q\nLbhL8wv72dSufKlm1isxJF/bkZ5PpQ+HITEvcuMTATDGRWIHw8iliPeIkR3P\nKdsMzKhBrNfaNmExXulecP8j6sMDoE55qu/KJZw50Lm0vJps2e/QctNtAVZt\nYNprMYajSliiPs+DM3rQzWhODi+ozw7WLjUPGAu/BNTzwenpSaZjBA2OMc7k\n6aptwKWs+I5u0YqhXCAyX42of7/TxTaBVCaASjICph2Zl5XZ45n7DZlgR1b0\nIeZwXnPhQMynqFjaM7DPOvUkYNKW3iLdVLMnR1D/1obV9AHoV33UxVXYLNSV\njG4+w+zD0DLZEwNWBWbnkrLCZ1NLIkEdWDXI6B5NoYAg1ZENfbZAZNuDpr6t\nH90oPba/ovJhaYs3Omjwvsy5faev/ZQJB7NzMOeLRGcgzE9JdmETQC4/PtwT\n0bjDGFf6DZtPbikDzKpbiIC/zSqO8eUZJhYpobdBFYJC3Tm3uQpG9xnuk6IA\nOXO6cHPwaGM1Tlu3cD4qaz+PneuDGKGKcjUZ/OpA0yA5prqABE9N4jp+QTDr\nhNCV\r\n=CDGk\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFf8+xpW4pkArnzq3JaKIs6pDK0DkFWopb8bgMZBKZGpAiAcPKiF/pwjV3ZiuWZJzMcAIl32IgLKbuxptgyr7y6F5Q=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"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"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-formfield_0.21.0-canary.c6870f20.0_1617320500008_0.018360674009423983"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.852f873c.0":{"name":"@material/mwc-formfield","version":"0.21.0-canary.852f873c.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=11.0.0-canary.24609b822.0","@material/mwc-base":"0.21.0-canary.852f873c.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-checkbox":"0.21.0-canary.852f873c.0","@material/mwc-radio":"0.21.0-canary.852f873c.0","@material/mwc-switch":"0.21.0-canary.852f873c.0","@material/rtl":"=11.0.0-canary.24609b822.0","@material/theme":"=11.0.0-canary.24609b822.0","@material/typography":"=11.0.0-canary.24609b822.0"},"publishConfig":{"access":"public"},"gitHead":"f528b03c675bb05baf871766e103e6e35c28e203","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f528b03c675bb05baf871766e103e6e35c28e203/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f528b03c675bb05baf871766e103e6e35c28e203/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f528b03c675bb05baf871766e103e6e35c28e203/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f528b03c675bb05baf871766e103e6e35c28e203/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n|----  | -----------\n| `--mdc-typography-body2-<PROPERTY>` | Styles the typography of the formfield.\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.21.0-canary.852f873c.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-9d45jqx1pHOWZlCqFdmu3TjD3MPAUfmSSmeL3bdTN8hGgS4hv8dwuX5H5IFmyQqjzR40jTwlzIQfySyg8IUSYA==","shasum":"f3c07d657dbdb127346d5e6f2c76111261282067","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.21.0-canary.852f873c.0.tgz","fileCount":13,"unpackedSize":40638,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgZqnqCRA9TVsSAnZWagAAm5YQAJxoL/d7uOCIbyYjfCiO\nksb5gz1s/nBgIvtPs9j4MwPwl/RAC5clohRLu5zOGr2s1gzztEZ/oZMtz/rB\n94YayNHKQpEF2Qr0UESbhdj9SKKJIjF5oqwVgHSmNRJDYGn8BA2b5ifIpXZb\nolnZNiyYQRyOKzkZgWVRz6DJsWdOCH4b/6NPAKAfrMEsFETUxdDbz33OF3tQ\n+wtZwHUznygt2ZTShqt7G41ebVnjw6dSd+fUEmvdEbj3nzN3J2xKevt2vFgO\nONja9eOdkWdeEi6QxUHvjYfv+p3szJqDlLTntU/zDBeZ6zlz4Yqf7MesNcLe\nQfzhNhrEWCrTwZ+pbEdMK75MgHI51512qBRI/beWyNWhhB0oSvMgrtHDFFTX\nZ8xSjBEOhneSWTR1wFTOFLaLJd3X7S2v6/NM8+yOp6XOokjrgW9CShUNrSHi\nKXfdDt5fYND+DzHpfKbzwu3vR4IhwiPFVHQw/TG8uMtCP0LfgPIfi5weK55S\n7hZH2ZFuNV0XZvn8ULOnJsVrJXjzODZ6S8LsROsuwWelp1YFYUT03NQkO4FF\nkINm1R5iByH5P3jbyENi5Jz332EoGzSSYT5VvheNXZE7WZGzOxkFzKLkkJ5s\nSLTqV5UfzSibT1YBZVCWN/jvLOYniihwzvF91ax9yytqAGNRv5Lwq1ikkfAG\nmytC\r\n=132R\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGJdsRFyHX7BdagT5FjQGSS1e+TWDfFohh+TXkegWb+yAiEA9cSpnjGnKwLBwp2AS7ZS4icS6EOYDfRrDI9bo1zRZZk="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"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"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-formfield_0.21.0-canary.852f873c.0_1617340906438_0.7295077157578176"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.4a674a1d.0":{"name":"@material/mwc-formfield","version":"0.21.0-canary.4a674a1d.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=11.0.0-canary.24609b822.0","@material/mwc-base":"0.21.0-canary.4a674a1d.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-checkbox":"0.21.0-canary.4a674a1d.0","@material/mwc-radio":"0.21.0-canary.4a674a1d.0","@material/mwc-switch":"0.21.0-canary.4a674a1d.0","@material/rtl":"=11.0.0-canary.24609b822.0","@material/theme":"=11.0.0-canary.24609b822.0","@material/typography":"=11.0.0-canary.24609b822.0"},"publishConfig":{"access":"public"},"gitHead":"d4f9464090813f45495113dfd52201f8c86bab3f","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d4f9464090813f45495113dfd52201f8c86bab3f/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d4f9464090813f45495113dfd52201f8c86bab3f/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d4f9464090813f45495113dfd52201f8c86bab3f/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d4f9464090813f45495113dfd52201f8c86bab3f/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n|----  | -----------\n| `--mdc-typography-body2-<PROPERTY>` | Styles the typography of the formfield.\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.21.0-canary.4a674a1d.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-APn1tS5xzkRWvefJgtiV6LAGBUOo4ky2HyYhvMNBUzFtBYJXMQxFnIbg5BXp24ynXfVUUzZUSgMSXH761SAtog==","shasum":"1a2013ae18fbb9304bbbc0e9715b40d48c381683","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.21.0-canary.4a674a1d.0.tgz","fileCount":13,"unpackedSize":40638,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgZy2xCRA9TVsSAnZWagAAn3kP/1nlPLl087yC+13vZesV\nM2S+5iREWpJ6YMT8J7HqKYqQGP6REQFExUwLZfxluC1R1J7HIwme8AE8+G9x\npifpKGGqBjYsuiWseITiP3ZUozD5SzQz9nYeB7+rlS258oFoHoNnJJqDPm2t\niTr7y+S+DO8Sjpl86P2tq5UrFOdihWZ/a4q+yR6poqoBSwWWTyusR1wurnb1\nQN5RfFMVS2NmWczTHZEEDiCXzsYhMlMabD4nz3fwumjkmk3ZwK2W+rjYZxoj\nKWmnoFTnp/086/8/78j/EduLG6xWnDp8yrAIfC3xwpxF1DWfs6/8upYb8IUX\nLA6WV8mi1BsuabImTHypS197zWdY9cE2SRvx8P0fl3O4EDxl7itX0ht9AVYF\nXLEmmhcIyFs+hAVFvu1aB/wc8OJmCmFDvEptfMhVdpxsUtKztn0IptytkFbW\ndWZeiZB5SbwjPK3gfKNebXV1Fz4bE9p2EUH9TDmkh1xW4exE2SLIIwINEL6V\negoUbYTIOKL4kea8SL2umXFqTr5v4yu6n9KRbjHAUhIJSFfHC2g4E3F+N+lA\npF5awCcDLVD1X4HqM7VIWqt2oGVI7wwP3gM4ENNH1T8qe/6GrZGgV3GhcRxH\nFCd/GGYRpeUStmJ6oHDMCqw7sxBDlG4i1gz9QeFB3HD/bWneqC0ja22NMpr5\nOEog\r\n=apgM\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEQYIZVpnzTgHCV1KcLHi3/9yFedPmiDSEre1mQ9A1goAiEAhm04Ndu1ptYjpWTBtLivsvn4T75cYcjG3zsJdclLmJo="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"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"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-formfield_0.21.0-canary.4a674a1d.0_1617374640854_0.48117631689059204"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.c5b29ff1.0":{"name":"@material/mwc-formfield","version":"0.21.0-canary.c5b29ff1.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=11.0.0-canary.24609b822.0","@material/mwc-base":"0.21.0-canary.c5b29ff1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-checkbox":"0.21.0-canary.c5b29ff1.0","@material/mwc-radio":"0.21.0-canary.c5b29ff1.0","@material/mwc-switch":"0.21.0-canary.c5b29ff1.0","@material/rtl":"=11.0.0-canary.24609b822.0","@material/theme":"=11.0.0-canary.24609b822.0","@material/typography":"=11.0.0-canary.24609b822.0"},"publishConfig":{"access":"public"},"gitHead":"c1604e99ccbc76c92a4371c529c43a4997f78c3e","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c1604e99ccbc76c92a4371c529c43a4997f78c3e/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c1604e99ccbc76c92a4371c529c43a4997f78c3e/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c1604e99ccbc76c92a4371c529c43a4997f78c3e/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c1604e99ccbc76c92a4371c529c43a4997f78c3e/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n|----  | -----------\n| `--mdc-typography-body2-<PROPERTY>` | Styles the typography of the formfield.\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.21.0-canary.c5b29ff1.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-yueU9DHL21Y6W2Fy9a29+gmgGRJTWoqMNOQ6OmFq0NI1PKuRwRDoE4uiHS3UXz4hpz/yDMZATB9BS2/1VoeKZA==","shasum":"a5328c6e4e96998f3e09b2673442db0bb3cb6e43","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.21.0-canary.c5b29ff1.0.tgz","fileCount":13,"unpackedSize":40638,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJga02xCRA9TVsSAnZWagAAvDQP+wWjrJ/5NsGfXayzBDgA\nsMafJyKd7l+rDEiGOJ04RqUMNo31IplHRYRNxQwvIaV4/aEvToQEoEnlDDsP\nOATAWDPe/DNwvnsqT9kGq3LtGpFdYah0HY2bAD7OAc12chTAhsAiocdirgzT\nIkgWqUUawMrL+W9AGSCzaEoT3ra3+am+rrtFF+0/Y6N45JJBRUEwQAvJqqlY\nS7b6AMuz2+htaV9TECmnkgEa26xL9sr+BJZM1oDL6xidhATqaP0FyBVmra+D\n14Jn7fMrxus/o1ShSR4CWtw50V3riRrWirc/eOT/5um62A81n0aknbgFR8P4\nqrnDJMtYeX8RJG9fYWSPgJg3EiGrWqphje58F80NPMIpov3E5B8evRK93D/A\n4BB5iDpklo7JxY1speAH6KqMdXbbwCPkO5HwNtz9ugzKAK+RBdttDLbJx8dk\nlUnaER4pSLhu6auWHm+T+Ry/uKffAJrmo171iXGVo/EzgECJpEJ2fmyd8v1G\n+YSHSm4v2rIgnNC+RBWx0K8L4zUPKSHuGJB07E+cOaeivr5ACar0uAHPRPkW\nllmNTih3FfzmVyKl3KY5zxJGWp8N7pp7Rt3b3BQbOsjjwtJSZrUnMphDuf+q\n0tKD1oC/PJ2ecORwKZCgEh0yquS3WmHcV0u17bvRqYbLULQ3XhEzWcxsDFgm\npBda\r\n=XuMr\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCGdx2sPKCKPiesHHlY1Dxc4LXadCnn0wYEDlv9EXMnywIgciqVOz6VKYuB0d7aJvMYnzj+yOAdOA75B38DnJxGnRc="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"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"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-formfield_0.21.0-canary.c5b29ff1.0_1617644977069_0.011154040270277"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.583644a6.0":{"name":"@material/mwc-formfield","version":"0.21.0-canary.583644a6.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=11.0.0-canary.94f50b260.0","@material/mwc-base":"0.21.0-canary.583644a6.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-checkbox":"0.21.0-canary.583644a6.0","@material/mwc-radio":"0.21.0-canary.583644a6.0","@material/mwc-switch":"0.21.0-canary.583644a6.0","@material/rtl":"=11.0.0-canary.94f50b260.0","@material/theme":"=11.0.0-canary.94f50b260.0","@material/typography":"=11.0.0-canary.94f50b260.0"},"publishConfig":{"access":"public"},"gitHead":"bf2f1c715105004d3849ec66e044434d48e08296","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/bf2f1c715105004d3849ec66e044434d48e08296/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/bf2f1c715105004d3849ec66e044434d48e08296/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/bf2f1c715105004d3849ec66e044434d48e08296/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/bf2f1c715105004d3849ec66e044434d48e08296/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n|----  | -----------\n| `--mdc-typography-body2-<PROPERTY>` | Styles the typography of the formfield.\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.21.0-canary.583644a6.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-EptgOB5E9dnAoNzc+SpXeDL8UgyUEHEm0UobM3jsFZfYz0OlWbYFbZD2ZqUXGrNiKf3AofxvG5sFJJhVTVoUOw==","shasum":"7948ddc8dd668d6668228d4c2b2ddb1ba89526ce","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.21.0-canary.583644a6.0.tgz","fileCount":13,"unpackedSize":40638,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJga03vCRA9TVsSAnZWagAAtZ0P/ifUMcuvvJtBcQVYd6oL\n+tJQCd3YLKapYr+KrtiLqPJre0364C3YK1cn7/KIa4FC18Ag1Qp5Ki1sRkrS\nmY4hRTvb3eiYGuIw6Nd1QuR8oD6pUSrN5LmXc33ZALkStKx1wkDA99HA2qS4\nWMbxVSdhdikmrypZlQ7bdoC8ZSuQ7XVd/UJ06W6/mjH+yMKJsWyJrKWh8htE\nX0GvoiFUmpx6y1arB7Pdri6SJtoKwuI6F8VH5/N3kth344CuiycZI8A8qBRw\n/W4cqMBkj0Rn3t1B/x3kLyLxanFF/cVPyEBJuC3mse41PrnHq7grmi/qo+RF\nqD2WGj2VfjQZEaebypISU/j7Ay48Rlpl1enE84qb96Z13SJ2T9IGB4e2sLBp\nINTvvZgXAlZ/2OgfQaEHBsQluuOEW8jzvfC5xFybwJgw1lcNBZnJLSHJ/u12\nSlspBa1mvSpXH69bEFQnU891lxVN3vcHnuvVmAaJCC7QPT2R6mOyUIXoSKBS\nsR79X8VN+B3JWRnCjifoq+BzXkMQbacQWZIK0Y+jx+JVRVImh068PYotYY34\n/G74UF3Z6Sp7pv172+prtilmPz00/ZoTz2wtK4gO19ufVYfbfdnylQ+rH13Y\njHB4ni5XXcI5dN3JMzdiG8eYk2Yh2l1fwFSi9vLBzsAcmxMZEeoiZ2jtz742\nO7SW\r\n=ZAsa\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEtIHJIdfEi38/VDIOOmUDfaY1fAjnK4ekv4wr13P8qKAiBgkjXcuvYDX/a8Qv+foz6OraAeYZkuw+jkZitN3XYeQQ=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"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"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-formfield_0.21.0-canary.583644a6.0_1617645038614_0.3615877160030192"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.02ac1e6b.0":{"name":"@material/mwc-formfield","version":"0.21.0-canary.02ac1e6b.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=11.0.0-canary.15604bd0d.0","@material/mwc-base":"0.21.0-canary.02ac1e6b.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-checkbox":"0.21.0-canary.02ac1e6b.0","@material/mwc-radio":"0.21.0-canary.02ac1e6b.0","@material/mwc-switch":"0.21.0-canary.02ac1e6b.0","@material/rtl":"=11.0.0-canary.15604bd0d.0","@material/theme":"=11.0.0-canary.15604bd0d.0","@material/typography":"=11.0.0-canary.15604bd0d.0"},"publishConfig":{"access":"public"},"gitHead":"c6e525b215b6043eb042d3feb1f6066bd536bd94","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c6e525b215b6043eb042d3feb1f6066bd536bd94/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c6e525b215b6043eb042d3feb1f6066bd536bd94/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c6e525b215b6043eb042d3feb1f6066bd536bd94/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c6e525b215b6043eb042d3feb1f6066bd536bd94/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n|----  | -----------\n| `--mdc-typography-body2-<PROPERTY>` | Styles the typography of the formfield.\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.21.0-canary.02ac1e6b.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-YaGZbPuxNxqgnKJz0p8+C1Qdy8uPo6ODHEAlvOawSLD7ZlwaZQ5H+K12f1cx21qEZbX5QFgkTjuELO+JMdDlMg==","shasum":"b4e4b1b531a558384b0ea8581952b179dfef0731","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.21.0-canary.02ac1e6b.0.tgz","fileCount":13,"unpackedSize":40638,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgbKoNCRA9TVsSAnZWagAAV6cP/2RQadf61zS6fnK4vi7j\nF4bxcxVOyZHj2NWN07nkjKHg1zRfNzTfLi361J/bsXWsSyFYpQkXGNh0Z2xI\noPNUhhlXbpYiOjpUvcrl26yeMDP5gkoxqhJdTNJzB2mrUJlmmq9L4vOC8uNK\n+eDoBFOi3bUWkBgJF/BzruDiVMbfO0zshTa1BM4npof9oQf0BJWR4dSTrmhc\ntqCCZVS0lbixnQIg6ub/gfyU7QcSsUsc/1A7cEBxbBpoFWd/A/wslsutTUIa\noiikWTnd0aQ8A2n83st2Nnl0fQtvQPjT6iZfxGpREpuR+dY2wttLCDqSwypY\nJ45g9SOgGUURZtU+anvp9G3c2Tp44tXKgWl7fHedh2LELtq2PRVwlx0/R1nW\ntbP3sLpMR3DIrXrhUebzbID23H1IxtaS2tVWfsczIA1nrBGv2gTN+l+HvHsp\nxnr4hVqLiRj3z2lyd4RZoBv9KDCydbUe5Dk5s/QkGxjjD3LEXCejw+FqfEwX\nI74UCWHCsRP8zHW37GY8npi9fl/xhL1bbvAUTm+13MfW8iM4yrqnC9lwnfuU\nkPuzkwNq7VUop+bumx+25xTaF0yxCeUnnR1sKkxrGRiDdmW6JJ5BS/O20IYB\nIN+azLor184j8SAnfXWFVMmCRomsTeJwgFSjV0fXyvX4aoi35PZ+DQxpsycO\nMjTH\r\n=x+TG\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC58pZyqu+Wu183fpJoVAv5wx6JiWvpwH9Yy9BT9XpkeAIgI7lfLumiToUEu3yx7oaDbpvwkYYkdt49OX4/3FvHyzs="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"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"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-formfield_0.21.0-canary.02ac1e6b.0_1617734157133_0.21539493741119564"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.5ac5856e.0":{"name":"@material/mwc-formfield","version":"0.21.0-canary.5ac5856e.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=11.0.0-canary.15604bd0d.0","@material/mwc-base":"0.21.0-canary.5ac5856e.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-checkbox":"0.21.0-canary.5ac5856e.0","@material/mwc-radio":"0.21.0-canary.5ac5856e.0","@material/mwc-switch":"0.21.0-canary.5ac5856e.0","@material/rtl":"=11.0.0-canary.15604bd0d.0","@material/theme":"=11.0.0-canary.15604bd0d.0","@material/typography":"=11.0.0-canary.15604bd0d.0"},"publishConfig":{"access":"public"},"gitHead":"66f695ff77b118469a93aac22c76e5e558c242a7","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/66f695ff77b118469a93aac22c76e5e558c242a7/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/66f695ff77b118469a93aac22c76e5e558c242a7/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/66f695ff77b118469a93aac22c76e5e558c242a7/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/66f695ff77b118469a93aac22c76e5e558c242a7/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n|----  | -----------\n| `--mdc-typography-body2-<PROPERTY>` | Styles the typography of the formfield.\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.21.0-canary.5ac5856e.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-7mCNbWA1Jci1d56NaRZFPAke/EHJp1oQ9bpadjAlMe024oMzsf+r6ZHtAAQRlc1eUd0TldjEenDf1Qvdu1YpBw==","shasum":"cc2431ead302e26f14bfd8f920f08c9994adc9b4","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.21.0-canary.5ac5856e.0.tgz","fileCount":13,"unpackedSize":40638,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgbKuJCRA9TVsSAnZWagAArrsP/j54MTNnP7fvXwPEhy5o\nltAKZ5DnXpVkFeeyo58mxWw2EWfYxYPvR/VjB1igmNfIFCE3ckfRe3mCYmTm\n612Qel327SuzHru0umsi75JWbbs4wdP/zCzg8dLzx7BSjOfMIch9DlQcJ0/O\naOADSJN0etnUeMuHjT5hqLZ59IDTIdd+T67TqteK/WPWxPYu4vakhPiqgMkY\nAzPT3qSIrBVMWHIYjKUEg3ZVZu1QFlw0kp4FAUkUztWSufy5Wdh70jrpLf8N\nSCR01h9C9Cy0sEqUS7GQj7aYiNTtDEvv3dXDzk2gYAr2wwjx+GHszOXnw4i/\nWFv1bD+pdJ6AWdOlC7hchJFgWgPxVPAkZEW1sdBFlr2djawxbuzUHUAGIAjW\nuWlJhL9TKlllQpgcepcZuKdL4DF5Q+w4VoAs5LhAq8nNfeWml5rdkr5EgB2n\nrWQEbJJc5lpoxMyBMoOOwXXTKXoEu3F+QjM9l8i4bkY6F8JTAm3SRG/dnPLT\npc0rFAGYifA9/yISakSt+ug6LSbLhqT7mxs6fLyK8IaNjjieQCfG1MQuD5nL\nJWc8hGgn83tS4ntJpoqUAlVsUMgtadCJ8L7IyH9r8RdnTaReR9hZGxK11Iyk\njUkla2ILHQJJcriouQov1vnBlim1NG6v8WPgiQmDK4rVwR9MkO9afkhJADoK\nbblK\r\n=3+qe\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGEB2RpVDV0hbkMjFu7RvV6u2Rt60itV7sVRYcmPfm0aAiEA8LTFuevvlpSCGijKwZ27hD5/Vj5ZS/GETqBA3nnGrI0="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"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"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-formfield_0.21.0-canary.5ac5856e.0_1617734536631_0.48717813852197756"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.bb23dbc4.0":{"name":"@material/mwc-formfield","version":"0.21.0-canary.bb23dbc4.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=11.0.0-canary.15604bd0d.0","@material/mwc-base":"0.21.0-canary.bb23dbc4.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-checkbox":"0.21.0-canary.bb23dbc4.0","@material/mwc-radio":"0.21.0-canary.bb23dbc4.0","@material/mwc-switch":"0.21.0-canary.bb23dbc4.0","@material/rtl":"=11.0.0-canary.15604bd0d.0","@material/theme":"=11.0.0-canary.15604bd0d.0","@material/typography":"=11.0.0-canary.15604bd0d.0"},"publishConfig":{"access":"public"},"gitHead":"42e5f906ec61897cd0de7e0e19e686d807408d70","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/42e5f906ec61897cd0de7e0e19e686d807408d70/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/42e5f906ec61897cd0de7e0e19e686d807408d70/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/42e5f906ec61897cd0de7e0e19e686d807408d70/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/42e5f906ec61897cd0de7e0e19e686d807408d70/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n|----  | -----------\n| `--mdc-typography-body2-<PROPERTY>` | Styles the typography of the formfield.\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.21.0-canary.bb23dbc4.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-M8zZfXdgveNsPZP75r3lJDM++0BNTXmcd7Zj7x1JYhnUdslcN642e53zmlfEWo/W1xmIKlbydzzAaV6Q9vJDPg==","shasum":"afe10ea210d18e935c73583954151f6b38a144c5","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.21.0-canary.bb23dbc4.0.tgz","fileCount":13,"unpackedSize":40638,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgbiLKCRA9TVsSAnZWagAAwcsP/RjaGi3r0eo3bdQSPf8f\n/DLxXGWAib0verhYjBqHVoPLl9t/gb75uX3Ic99CAfcua1EYEOPDddvExjW/\nNJxzIztXSbN0janKxAn+hCP73EqknlEI4uEhmE6lCAfQRkLs3Zs9iuIV8AKF\nyDHHHNH6UD7Bz/JMBdWkPP0QS00jJM/M78lIJ5UOVYyeKwaUBgQa2blqB/8z\nFNWP+/3N37a+My9JnjvRL+cW7TvLilvhQhfu/uQn7NcMrR/3SNdIFjxmIMbg\nK85/wYy1/JDQgcuOppmM+PGta5VQABTeGqiAJzmAUnHcNEDy2kS8Q4TINMw9\nwOtb19E1JcqNp0jEJCvSYnutDoJpSbbM0vcSYVP0kOFvIELsmY8KfP0cEpNk\nPIgk6Pd0eiw+LCuLn7iaRtuUb5UfZNSK7ycQ6UuqPOW3WKBC9KmIlhDdqUJA\nj+9loJdCl6oiTvnQxVTNio01BXcPuVavnhuetmMyR454TaoU3mf9NCpEA4oF\nOoKN0cmkot5TM7pNaqPK5N+HkhLHPyWxt1Rp1vniIfMYQYh5nFYiDTgWMjQK\n4+aTZoSrG7S/LqCSULr3m0zCMnas/qoteYrWQua/LmjC4xT2xENs71x4TyQT\nIfC8Nv0qX8fcQnYGnCmP0CQX+/FF9KNOwjbwEmR0KweqFqj7UvvGvf9SDYdM\nRNPk\r\n=cPWI\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDsTtqi9WZGr828n4HJarqJkRVYHqZ+5RSgrsXz6r2AqgIhANZ39S3chCWOJs0BnxH9cHdxGEqYrT7rFXXU2GWQB7EH"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"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"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-formfield_0.21.0-canary.bb23dbc4.0_1617830602185_0.38576779153623697"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.e539904c.0":{"name":"@material/mwc-formfield","version":"0.21.0-canary.e539904c.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=11.0.0-canary.c91e8d141.0","@material/mwc-base":"0.21.0-canary.e539904c.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-checkbox":"0.21.0-canary.e539904c.0","@material/mwc-radio":"0.21.0-canary.e539904c.0","@material/mwc-switch":"0.21.0-canary.e539904c.0","@material/rtl":"=11.0.0-canary.c91e8d141.0","@material/theme":"=11.0.0-canary.c91e8d141.0","@material/typography":"=11.0.0-canary.c91e8d141.0"},"publishConfig":{"access":"public"},"gitHead":"0522583b3f6a950dde45ae308718f06d90d40a84","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0522583b3f6a950dde45ae308718f06d90d40a84/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0522583b3f6a950dde45ae308718f06d90d40a84/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0522583b3f6a950dde45ae308718f06d90d40a84/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0522583b3f6a950dde45ae308718f06d90d40a84/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n|----  | -----------\n| `--mdc-typography-body2-<PROPERTY>` | Styles the typography of the formfield.\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.21.0-canary.e539904c.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-S80EsG6r4zBgM49spJA0yib+53bRZVLkLcWi0tFZ33cIkUyALgEwDMXattAZdP/qLPXt3Dev6T6xswyEuJid0A==","shasum":"b91b04f2233d9c0c7b88bf84108df2c6ef97252b","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.21.0-canary.e539904c.0.tgz","fileCount":13,"unpackedSize":40638,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgb0UECRA9TVsSAnZWagAAun0P/j4hI+aCfG4dmcB3xXiS\niocfxEdlh3moV/ZnSFGBJ/miKbExmvJf/xh48Ha3Aqkt3T56ad5VdVItwKAQ\n27WnGZ+VqrwSnzRqADabw00brhixyA/B3zWgdbsGiXj2y0xAvlxG1Lc5HDte\nLblHz86YiuGuAtdeG6f/OnA22Q0ZbGD6Vgf19xxJgvjR3o+8lTuCaBsK5zLU\nSJqhPgkTrWFVqWT+rjPSorULvsPEmqyLDlOlOYlAymEb/dsPd8pgPENdbT18\nVIdyAu7WSVPJ2fbZjoXnJoo9n7FHlW3+EM5pDuf8wv3WeYp13XyUG/RL7Ssm\ncXytzz0fD+M/6nqJkND2eBy8LLSxt8wfF/d2XkZ60t8j3XRJ+fBwAYik0UpE\ncsyCjLK6CBhKsjjtH7Artf+J01FFtBGp8S5+1arNLN9cmlHtcKBTCtPwgX//\nCk9zNCg9l1rJZIdof1CgvOcKVDkVCx5VfJrVRFv5sQ5ch1B5ilAoyq69ZAW6\n+ozD5CWx6fBw5h6fQXBKBY5k+Cl8eMWootiWZnEUw/BwglniNvcxmR0cKUtx\nG5tEgH8L7B7Nbvhn4xRxxv1GKiCWqNKvLnKKCfInjmXY2HdRXsZn5TbJbxIB\nKfQo5F/5YydOdQK2HYCy3tfsSlEKWWYSQzIr403Poymkgp35TbqIBs+MX8n4\ny64y\r\n=qvsB\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAXGsc4UVRenF16ntmeT3PyUdDMyW31redumZU8d+u2WAiAr40mE/8SCAlaaI21XakG9epQB4YLvhjKWJfzwL1G50w=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"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"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-formfield_0.21.0-canary.e539904c.0_1617904900263_0.2708035049834241"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.a93ae333.0":{"name":"@material/mwc-formfield","version":"0.21.0-canary.a93ae333.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=11.0.0-canary.b2fa996a1.0","@material/mwc-base":"0.21.0-canary.a93ae333.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-checkbox":"0.21.0-canary.a93ae333.0","@material/mwc-radio":"0.21.0-canary.a93ae333.0","@material/mwc-switch":"0.21.0-canary.a93ae333.0","@material/rtl":"=11.0.0-canary.b2fa996a1.0","@material/theme":"=11.0.0-canary.b2fa996a1.0","@material/typography":"=11.0.0-canary.b2fa996a1.0"},"publishConfig":{"access":"public"},"gitHead":"31a1d0d94dbc7ba9d8611ebd62d41024f6fa88bb","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/31a1d0d94dbc7ba9d8611ebd62d41024f6fa88bb/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/31a1d0d94dbc7ba9d8611ebd62d41024f6fa88bb/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/31a1d0d94dbc7ba9d8611ebd62d41024f6fa88bb/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/31a1d0d94dbc7ba9d8611ebd62d41024f6fa88bb/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n|----  | -----------\n| `--mdc-typography-body2-<PROPERTY>` | Styles the typography of the formfield.\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.21.0-canary.a93ae333.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-m6+EzIYSxdq0WlaUvoNruc6uzprLKXZ8pIhUnB/U2Ah6WxI50vkZYmlHGrzkFvgGo7VRknIVJrvNJnvbMYYB5A==","shasum":"2e8f99b767a473632dde468dc86f0a1f3640db3d","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.21.0-canary.a93ae333.0.tgz","fileCount":13,"unpackedSize":40638,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgcLTQCRA9TVsSAnZWagAADCUP/iso6w6thbn8i3UksHsc\noEWr2feXea9XQQI+KA0kJ9aghuMP/ON6RogFFHwOwPDQ4z4MM7UJuyJBBOoM\nDwJQMbR5gjGMdXGx6b+B1gt8C/Uv8CHbRqxzhW6UGl2oDngmpyV0CiMXWY9Y\nVWFgeV7hvVT9oTXiqk73fSRx303nacUCE1n86fJJe4C6G3IsJ0FKoE2Qm/cv\nEarPM14JUfZYaZyUB6JdgE1xhPyK8GkTYQyGnUVuXuZE5cTBjlGuSw/sgOjM\nD4t3ueQ86dX9LHrHVLBKP0diqW1JdbGTErKpZ1jE/TiwEejrnxRMRT6FBeib\nrlKNWMywyRvOyGYB4h1fWyHn7CVR8uXMn2G2GY2ZFJ5ch5TothE7AmXAEFAB\nMD41NOhTcHrAbZexUtq/204sTNAXmeEq3/EbZ7t0/7u8S73wySsKTCbe042C\nAhTwf+CijZDwcOu1Q3AuYtf4VhmVOO9ah6moipZVi0txi2P0lNHWeuCCHga2\nYCvDcGQCzFct9dFijR9xNkFNO+FdV8nwfY533EwMZco1jUuR6TO1R0YGmQxP\n2vvcBwWZB58PvvTRdN8cB1N48rje59r9s7Enm8yB9OdF7Xyy4665KnufSYNJ\nhzKjVV+n5hE2CueLhplnBQOnOzZTp7ViK8JdPN4aOytQ/CuaPL10q6a70fI9\nRswx\r\n=l/+U\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDVwzDbFGx2flPUOEC2EbAA/wCR7mZ5NZeQ0uRvhJS5rAIhAMSyt7m8ZaE5Su4uPdtKcCZTI7voLEcvv80X4mHLAdrZ"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"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"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-formfield_0.21.0-canary.a93ae333.0_1617999054481_0.6722226670831999"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.e142c144.0":{"name":"@material/mwc-formfield","version":"0.21.0-canary.e142c144.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=11.0.0-canary.b2fa996a1.0","@material/mwc-base":"0.21.0-canary.e142c144.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-checkbox":"0.21.0-canary.e142c144.0","@material/mwc-radio":"0.21.0-canary.e142c144.0","@material/mwc-switch":"0.21.0-canary.e142c144.0","@material/rtl":"=11.0.0-canary.b2fa996a1.0","@material/theme":"=11.0.0-canary.b2fa996a1.0","@material/typography":"=11.0.0-canary.b2fa996a1.0"},"publishConfig":{"access":"public"},"gitHead":"135f2f0e24347fef74904a437124ccf8978e20b3","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/135f2f0e24347fef74904a437124ccf8978e20b3/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/135f2f0e24347fef74904a437124ccf8978e20b3/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/135f2f0e24347fef74904a437124ccf8978e20b3/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/135f2f0e24347fef74904a437124ccf8978e20b3/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n|----  | -----------\n| `--mdc-typography-body2-<PROPERTY>` | Styles the typography of the formfield.\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.21.0-canary.e142c144.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-JJxphwpfMjvJ7nzfUcc6NhHgtKXHckuXw+IGL4vLXE8h209Addz7c33DtnpK2FesYUzXK9d+/RgSmJ8mtVtU1A==","shasum":"0c521752ac6143707e26b43b909a45abbc7234c7","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.21.0-canary.e142c144.0.tgz","fileCount":13,"unpackedSize":40638,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgdF4jCRA9TVsSAnZWagAAhLIP/RcSk8mmErmjU6XugzZz\nQoh8vH3XcdVY3QooHxoKJmIkWFRbsiJ5wcovTiF6hxxzFx6GEm0vjkHouKmO\nRcdwFVLOOlt8v02j902Wz3lOQgyqFq5cpFOBou0EmTb6Q3psYQL2n1RDedkz\nmwXgaUHTXyFONYLeZqrnzfBOS/TF2RsNOig1p+i28hvgLPetmCTnYiFWzdwf\nTqbsQQe5kPD9FDOLc+Zt4jZtQjFsJmadJKBaql0xkMS5gOQQ5Hfugrkx6pdU\n4f2d7B2x1UF4+0Eytzk2P30IXG2+b2tDkSX8eGQKSHY0Aaja8tG3b6264niA\nhpI7iEt3H3PRDUhRRjR5xXOCuK65n68Dd4g7aMJd2dhJLf0BhEegoZm015PJ\ncKAiijP/IwC+VY7+zkzF+rUalluptUpF43nYJCFXoCE/tb5WzDNBf7KxTEYH\nSY6o91RszIn76yXoCU7I7bt+6zynL1v7WtSIiC6rySwX5JabAbuZjNsnlzgR\na0YvF+tdsOAZFqEBaKOPPRpYysO3uXjxIbHwsJ8x+Si3F4BVi0n2jVbq/xbl\nNVyokrJX/J/lB6Vqf1h0iZYP0w1+KR+bzdNqJZLzY3QbRdVilYNXJ/c+UaB+\nkyLWULGfs8MizEGxz8xIZFLr8HpGbO4athQ+5gl89+OMxZYzAhCdVQpO4zFU\n+2a/\r\n=Kpwf\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBJgbBGy5ys95NW1moUT3zFurxEwTOIxZSt6/vpMHgtrAiEA0Bth9tKJGHBKQ/IpTiS4BtSVYZdHCdjzB5fArQDOJDs="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"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"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-formfield_0.21.0-canary.e142c144.0_1618239010673_0.04406036849510864"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.382d7eb0.0":{"name":"@material/mwc-formfield","version":"0.21.0-canary.382d7eb0.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=11.0.0-canary.b2fa996a1.0","@material/mwc-base":"0.21.0-canary.382d7eb0.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-checkbox":"0.21.0-canary.382d7eb0.0","@material/mwc-radio":"0.21.0-canary.382d7eb0.0","@material/mwc-switch":"0.21.0-canary.382d7eb0.0","@material/rtl":"=11.0.0-canary.b2fa996a1.0","@material/theme":"=11.0.0-canary.b2fa996a1.0","@material/typography":"=11.0.0-canary.b2fa996a1.0"},"publishConfig":{"access":"public"},"gitHead":"22f558ec852007036c1b01f2d052ff4512cfb420","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/22f558ec852007036c1b01f2d052ff4512cfb420/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/22f558ec852007036c1b01f2d052ff4512cfb420/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/22f558ec852007036c1b01f2d052ff4512cfb420/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/22f558ec852007036c1b01f2d052ff4512cfb420/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n|----  | -----------\n| `--mdc-typography-body2-<PROPERTY>` | Styles the typography of the formfield.\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.21.0-canary.382d7eb0.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-OggjW0vFi7+wLacxiflZ5Pj7qXzXenflS0rBnamHSFeRMbZjp9eI0HuDgGtECAh4srb0RCmFEcW6mKiHBtsJ8w==","shasum":"0148a44f97357434116a9bb1339aaa478be9715f","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.21.0-canary.382d7eb0.0.tgz","fileCount":13,"unpackedSize":40638,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgdMQOCRA9TVsSAnZWagAAQa4P/282rF+ahedud45YLmdE\nqSQBbq5RF4Mn/86Lu6jpW2kQ8newOWAM8fUefvTx93zQho+hI9KgEJygY8q5\nHqx0p1o15WrcGuX1TaW/zfkChnxC+emQ7V9Hrt7Zg9obPpSP8yVyApCLHnOQ\nVZGfuKHEKEyyL8GIH80F6YXJAQl+9hZEdjU/lsGZj20gz3RCLFu4x4xYZEUl\nRTCGrye48a6IP7y5adxa50yYAI/gKNO7fw9vaj1A0o2si645aw8AOSGB75WC\nTVgL7Rh1Zpq27eTX7K7Cjpql4vLYMsinq68GilJ1gVuvAGv6MyitWO/flzj7\nUF79savAZdgx+hIeaOB7KkruAM1y5MscsTQgCq9rF++mCK/SibRF0izF/Rtw\nXexaXwMHTts5nvhZyJ7/iVJWa3+7mWvAinkVAeppcvtwCI+rvuk5bRhaLDQT\nKK3DUyl+hgMP7qg25a3tHu/vblJIJ+/l1eUQfKkRz3GblCjFeuN0Pt25ZkOb\nxN3CZoczO0/PSKdUWGU4YyK6HV8tzHa9p7Uj7BRoPAhrcTfwnuE04cSF10Cs\nUFh2tpE8PrJHD+4F1fEQZ2dVNKv0cHWcBdfl5sx+qG8p2bEUtE4hpeEGtESC\nALHL/v91W0Og8zc9jrhN02zvyofnf1nT4XJ30tGO53jdBF5efZ4VHNK/wffZ\nhbmb\r\n=1aSU\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCNymgPnbYhgscPl40wbma06AdbYqJyyshm2iO7Bjf7XQIgO2378Bl01ATEIpGR6pAhYcT79BbDAHJBNNwKh+qteJI="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"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"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-formfield_0.21.0-canary.382d7eb0.0_1618265101858_0.05087094862422514"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.b16c7885.0":{"name":"@material/mwc-formfield","version":"0.21.0-canary.b16c7885.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=11.0.0-canary.352b295c1.0","@material/mwc-base":"0.21.0-canary.b16c7885.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-checkbox":"0.21.0-canary.b16c7885.0","@material/mwc-radio":"0.21.0-canary.b16c7885.0","@material/mwc-switch":"0.21.0-canary.b16c7885.0","@material/rtl":"=11.0.0-canary.352b295c1.0","@material/theme":"=11.0.0-canary.352b295c1.0","@material/typography":"=11.0.0-canary.352b295c1.0"},"publishConfig":{"access":"public"},"gitHead":"effabeb19d8128aa03c36be651c6b4eb98d15e9a","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/effabeb19d8128aa03c36be651c6b4eb98d15e9a/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/effabeb19d8128aa03c36be651c6b4eb98d15e9a/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/effabeb19d8128aa03c36be651c6b4eb98d15e9a/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/effabeb19d8128aa03c36be651c6b4eb98d15e9a/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n|----  | -----------\n| `--mdc-typography-body2-<PROPERTY>` | Styles the typography of the formfield.\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.21.0-canary.b16c7885.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-vbuWJqsiSYIkV6ylCqhl7U8qEevSBxlcBg1w8DwMt9/m1chiN7c57ufsgedog3Aaw6mmpZ69PTaDJ3RWsNm0Vw==","shasum":"d0265ef573f62069cfb28f3137bfcbca46d5c364","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.21.0-canary.b16c7885.0.tgz","fileCount":13,"unpackedSize":40638,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgdMv3CRA9TVsSAnZWagAAtDkP/3ABbrKJyWVM3dRI4YDv\ngDr+mhS8ZGrQVmX0CuhC/3zQg4qInkhan8k/K1SWQxrhpWBfSu/wPJZwUaWS\ntm4ObChmIGL3F1b1ZYQmwQfiDv8+surQbSoRieCjwX0q0oXypLs6XhnTh8HI\nPlfFojlaZuaWIebCpkSV/HcCNYmtZsUetgHAi95wGUosx5o6LPfR6k2zKgq/\nFPbL+YM+EpMZBv20eF/X/miPdrnRiKHUegBjkWZVea/XPTmj4YYwfwQyTF+V\ncidOS8SJEpDEgjGa2ZlV6y9IRwrH+20nLHVzOv96PoTkqCOe096QhOIKL8cR\nAYiiQbWMok/4le80H0pa2q8AAJhlZERWgrUtxCEkNf37ZBjLUUVOiLlmpUju\n7Q2nu0bw8s8XgwdKYBY79eNtiQSfo14an8271wUXX0QldtGEXNvwVCNWTKbG\n82hmF8fuWCJZ5pqFgA2yD0ZQ9+X098QZWy1Xk4w1c4ruLPM8Au1T4AQIUWWs\nzcZinMrgEjVvyIEsWxyaB+j9ZWStAjxWqcbiyecW2ihtA0n7OS6RPRG2Z0Zh\nKkBdB8Pc0z1acQyUzOJOlaK4QWRtYl5xUrNrypaHUUm7mfxHUgAdKX8dLrnL\njBj0j4my7Bse6uSydrjdeT1XWOmBO1LMd4lEd59kDBtW6hmyoz491gMGwMY9\nor2M\r\n=84wu\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBh4S7mU0DlNel4yefoTJybR3YkKgrPrlJ5uK0GlgkIaAiEA04x9uNVm/Gt7Yeww2eqVZDC7LDljclQpQtFpF9QAZu4="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"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"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-formfield_0.21.0-canary.b16c7885.0_1618267127100_0.9462516879805609"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.0e92782b.0":{"name":"@material/mwc-formfield","version":"0.21.0-canary.0e92782b.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=11.0.0-canary.352b295c1.0","@material/mwc-base":"0.21.0-canary.0e92782b.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-checkbox":"0.21.0-canary.0e92782b.0","@material/mwc-radio":"0.21.0-canary.0e92782b.0","@material/mwc-switch":"0.21.0-canary.0e92782b.0","@material/rtl":"=11.0.0-canary.352b295c1.0","@material/theme":"=11.0.0-canary.352b295c1.0","@material/typography":"=11.0.0-canary.352b295c1.0"},"publishConfig":{"access":"public"},"gitHead":"7c46ee6728f96c896cbcb981be39309e7fd3f60b","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7c46ee6728f96c896cbcb981be39309e7fd3f60b/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7c46ee6728f96c896cbcb981be39309e7fd3f60b/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7c46ee6728f96c896cbcb981be39309e7fd3f60b/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7c46ee6728f96c896cbcb981be39309e7fd3f60b/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n|----  | -----------\n| `--mdc-typography-body2-<PROPERTY>` | Styles the typography of the formfield.\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.21.0-canary.0e92782b.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-ck//KSDjurPnu6WY0GwcPobXw+QjPjEVk55xo6M0/5Nctyvx+LmnCibwbgBfHDBfi2OoffpUdQRJdx7T/oB4ag==","shasum":"89162694c01b77ee9dca5707e3e6d45bf9c45598","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.21.0-canary.0e92782b.0.tgz","fileCount":13,"unpackedSize":40638,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgda2VCRA9TVsSAnZWagAAS1wP+QEbAXbr8f7bdrIUgBny\nsz1XCXkN6nho+EYaSVq+NNDi24tHlH+qoxLLUh0nFy18VW+fXJ0YDaET3lnw\npe09ZX9J9FMuquIfjukRTg9oKE4StAgh3c9YGbI6u8XZ2WZ7NQS/ffBpFnlB\nCMQI5heRh0zMF5mxhXbQaT3NacEd3NZvHJccAzNg3RUDnp+iMvVvMKMJzSMO\nBi2PvsUHdt+KtDQpzo0DOxMzFylNg6iXGi+6ZDak0cUVIqyQdVn6YygUau40\n/gtSyS8TpL4AAilIpiwB4A3FruEeLHOP1ycG3/DdcwvWWMAtlh1iFBW1Z2yY\nObhiykej4qLKzTEijSt1si6OKmQeF+ny8zD4FwexcEmwryYZPv/ZmZQ4lWyB\nW+2oRgEEBbJId85Y1pp4d/2sMRSXeosgSwgj54UMMi1g6Lkfjls7vgI4/Qe7\nYvegP6hZuD4B6EcbIcJGhBiNnmXV53ZNo+hvifHPMWVfzmTOmIT1BG1iP3HC\niqwurFoiPTl67qiWX7K+24sUpC1ZR44a+/33fxmctqbVr2mPPNfpLNg/hL9F\nq4eR7Zc1hSgRrqT/ZwapSr7Q6zry+gzZF9CEWJ8i6ojG/wOoSeMu5SoBlpB9\nNkfyl5ISuWTBLqgvqguQqdxmFbu/UGa8TX6Q2SfNd/KyaWSOeorE3odZGil/\nPhgj\r\n=C6gN\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFAqnTAxd/gY8KorlD/AfzPem9b6dl4PLf76pYvhsDs8AiEAl0JWZF3dhMcrNBF0SZLvuIkcOzne0K/Gfv0NyDak0ac="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"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"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-formfield_0.21.0-canary.0e92782b.0_1618324884802_0.3761860829788892"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.70b3a072.0":{"name":"@material/mwc-formfield","version":"0.21.0-canary.70b3a072.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=11.0.0-canary.352b295c1.0","@material/mwc-base":"0.21.0-canary.70b3a072.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-checkbox":"0.21.0-canary.70b3a072.0","@material/mwc-radio":"0.21.0-canary.70b3a072.0","@material/mwc-switch":"0.21.0-canary.70b3a072.0","@material/rtl":"=11.0.0-canary.352b295c1.0","@material/theme":"=11.0.0-canary.352b295c1.0","@material/typography":"=11.0.0-canary.352b295c1.0"},"publishConfig":{"access":"public"},"gitHead":"12958287de673f6ce0eb511950c61be3d1a28235","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/12958287de673f6ce0eb511950c61be3d1a28235/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/12958287de673f6ce0eb511950c61be3d1a28235/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/12958287de673f6ce0eb511950c61be3d1a28235/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/12958287de673f6ce0eb511950c61be3d1a28235/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n|----  | -----------\n| `--mdc-typography-body2-<PROPERTY>` | Styles the typography of the formfield.\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.21.0-canary.70b3a072.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-zqPobZTDez/PWebN0Kx6bC+2u2vsPPk8d0AEr++NxtpaRaX84fGKkVuGxkoeOM4Sqqw2k4FihQpXEH7QGRdE8Q==","shasum":"ad4f9d2b10bb2052fd7b5d5c0cf272eb62691507","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.21.0-canary.70b3a072.0.tgz","fileCount":13,"unpackedSize":40638,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgd2vwCRA9TVsSAnZWagAAkFYQAKL3uXx1nfRZDevw5x1z\nd/uQh4ad7V3/FCrpWOicrVXqKFTV95tE2FrTrBuAgkQUUmUs2CxmzCXn9hao\n0B3VNnNcfJIp9EPtPHjI276waLWUdRbQdhWjEiOl+OsWg5C2rkJPdBio8Hc6\nLj3AbMIdI0y0jb6SaUpGAVfAnIbAuPRgCxk1zBehsE1V3OMw0uFknxPaOMjc\nk3YBY8ehyhXJFQXv5dqghmmVPGv7S8/zeFhIWtsNGqLSTNKHwzCYDJiWUk3j\nQUnFUwvsMuUj+yngvMIHShmDSKWYEAmJgWeB9MrAPdiF2NG0jUzQ2K0guMYg\nsDJLBG3baM4EZKdBCuYoL+5jwTRJI9wL71+e4vQj/0GOj9TrWBxz1u/cPGXy\ntB/35a/EDh/OH76/5GODr05+E0vhOiim1OQ0HCraYQCGT0FPI7vlJj3Vgemh\nQXjNlR6AXZJyvGy9OXSkZggg9peAI+CY4cJK93iKyva6QK6wRxL9R7vOllRO\n6iuQdgSpDdiM/YGn6zD09Pr7+anItBYq1lFXMaYPuJrEW4e8nlKOX4Qn94Zr\nPJOMJva6g1eR/Sqcji/xLPrSKYgYj0HCHiLep6R+h98n/epCtaXfj54biIYq\ngcEdnC6xPd83ibioNxg1mQq6M+3QUwjy+4XA09zM0eecoXl6aLiK7KFjRqV0\ncWSL\r\n=h5co\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAcqY8rVdwXWak6UpJS9wZO1tlEdny8UmG1W5Mb9P1aEAiBh4iyquCcQAQIRuvWpUuWBppzU94n6U/bVbb/U+RPcEA=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"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"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-formfield_0.21.0-canary.70b3a072.0_1618439152357_0.8250175059981961"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.ff79b092.0":{"name":"@material/mwc-formfield","version":"0.21.0-canary.ff79b092.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=11.0.0-canary.3793a3143.0","@material/mwc-base":"0.21.0-canary.ff79b092.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-checkbox":"0.21.0-canary.ff79b092.0","@material/mwc-radio":"0.21.0-canary.ff79b092.0","@material/mwc-switch":"0.21.0-canary.ff79b092.0","@material/rtl":"=11.0.0-canary.3793a3143.0","@material/theme":"=11.0.0-canary.3793a3143.0","@material/typography":"=11.0.0-canary.3793a3143.0"},"publishConfig":{"access":"public"},"gitHead":"88513d2e247534891581014622ab048f4f2c52cf","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/88513d2e247534891581014622ab048f4f2c52cf/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/88513d2e247534891581014622ab048f4f2c52cf/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/88513d2e247534891581014622ab048f4f2c52cf/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/88513d2e247534891581014622ab048f4f2c52cf/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n|----  | -----------\n| `--mdc-typography-body2-<PROPERTY>` | Styles the typography of the formfield.\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.21.0-canary.ff79b092.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-cELU9KO83fY2MSYanN+J4j91oJDXhWXRx4HPVFVV2UVSEXcvb5W6P0+DKW1Afi/2L/S+pqPXakYqYyLDQVEGbQ==","shasum":"bf2729892cb042415bbcd55f5e116cc40f46f6c1","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.21.0-canary.ff79b092.0.tgz","fileCount":13,"unpackedSize":40638,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgeI0MCRA9TVsSAnZWagAA2dsP/RCsQUGkBcc6VqZBdc4P\nVrfzJfrSAKYW9UG7mReWrwQfX0mffFEowlQ7rKj7emOu23irDHw10UGjUPHl\nPRA0ZVZhXtPkiLbnY9JDfuMMUSiMWvyXwdiS3gDfQ7sweYdJjTvva6kQn3w1\n2i2vkDnx7zL/5yau6hKxKmU0l4t39Lf20mliL3vHsCsEQpkHH6TAbbECQxHd\nmEQizrWw8pcdv/UstOKUS8tVqyqfL9YKAe8sVG1kAijxEqOG9PV0+iSSLWw0\naMXcUtrxR66gpy5eW0HumjxcFUsUY9InELW5p1/YiwnKz9B/Vpjnlt2g8uc8\nW+xvRT5bRpILp7eNpe5BaMuWlljg14XJ4R/0xZAmkIRlrODtQF2vVogYkPMB\n7mOJOsxF96pqNQ+r+vikvv0der/c1WXPeUi3kgZ0YC8oeK4X7MmyKKCHZ94o\n+J+P4JdUYfRJv2H0D5LU1al/oY72P341IQYTibUz4BkxA0m0gNH4BhV4QzqD\n6oSz3/9tNs5XXljOkR1KQQNBPcGT1diVrlHc1Gdk8Y2E2/eQz8KM68S2buTt\nC5p/JFHTBRx/Xig90zpqJZyUrl3rY8F3JLSte9FUppNj/8OuLzn+sDR4wdv/\nPmBWpJ5d3Vpf5lTyKxkQiT9XHVqO0zuAUUjddUBcQ9lZ62Fk4E31AxYL5rpv\n3ZML\r\n=0ycA\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFk3MKMuyfGAO4rNQJ8Pnt+452oKNogYSWNRDgW1f+DTAiEAytSt1ktvPyTkEQTyTgjR1T4girRo/4hU7P+7MvovV2c="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"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"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-formfield_0.21.0-canary.ff79b092.0_1618513164210_0.5094608443883308"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.f35b2fd7.0":{"name":"@material/mwc-formfield","version":"0.21.0-canary.f35b2fd7.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=11.0.0-canary.3793a3143.0","@material/mwc-base":"0.21.0-canary.f35b2fd7.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-checkbox":"0.21.0-canary.f35b2fd7.0","@material/mwc-radio":"0.21.0-canary.f35b2fd7.0","@material/mwc-switch":"0.21.0-canary.f35b2fd7.0","@material/rtl":"=11.0.0-canary.3793a3143.0","@material/theme":"=11.0.0-canary.3793a3143.0","@material/typography":"=11.0.0-canary.3793a3143.0"},"publishConfig":{"access":"public"},"gitHead":"2b12bd76b8558ed1f827fb23b46af6854b404f91","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2b12bd76b8558ed1f827fb23b46af6854b404f91/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2b12bd76b8558ed1f827fb23b46af6854b404f91/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2b12bd76b8558ed1f827fb23b46af6854b404f91/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2b12bd76b8558ed1f827fb23b46af6854b404f91/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n|----  | -----------\n| `--mdc-typography-body2-<PROPERTY>` | Styles the typography of the formfield.\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.21.0-canary.f35b2fd7.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-XzE1eiuvlT2Ws4gK/i/3zCPDmaPuFPs/2Fhok2vE8oulaXs1hla4oeTb6v+l/6ljS8aRHY+r+L/o5qCaBcaFEA==","shasum":"cfd601cbc855471ef5ff7a2259bdcb4e69750fd9","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.21.0-canary.f35b2fd7.0.tgz","fileCount":13,"unpackedSize":40638,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgeI+FCRA9TVsSAnZWagAAvn0QAILypYjOxntBefTe+zwu\nuZLVa5KXOxoS9onpUAaD/nn5h342pwfOv2mSkf0cjxSTOF21bheX5qgWRM1y\ne9RJvstl1YktwlJqrd+ubERgzs3EgA5PV7kbpcu/FOcae5KZCodfzNAY2iO7\nlDn7rdNh+1rgdRTARC8qd+9PDengg6raDaRmnPvlJaZolsczKQ1FMMdyye9W\nXAgMfSFc5+WNtmHj/LxKkvDuENQkzuNBKqpPj3dwxdRwVM4AiAER432YJoox\noKTyG62ydyYHJyzadhrMuI8HXF+qiIz/DjpVTjtvU7JJ3z3aHmK/uksSVUcF\n0SGxG6zeL71mQtr2xmtMthrREEF9OMGKQ2Wyxsgpvq7f3bUrbQ0+jodbJDV6\nIMs3fcHVpGxQHU0LB8VLeCyzdRk9/v8qevvZoVgyqwAlsh2sXTELdwvBMcC4\n14ggslqbQlN6RVy8xjQN6/lmJ2YnMjFlDYaXK4Q0kwzi2rkBk/TbH/0O3Rsi\nqOaGpEJyJP+zjXQtZDfeFzg/r0KBsM1F2FKdHaSqesDU2zspGnpPvu28XSm+\nuNlAHqyPNusgrZqTNTMRkZ1o7fMEwgGDN7rHkZ6C8JE+ApNo4PgpqWR8gDAZ\nh4zsSao7YEMrfZcJczjARaCFISkAaQlaDB6LgRW4y63KNExfmmIegOyqveR7\n7juM\r\n=UEH1\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHks1nhMz9pQ52dBiIl+zVYi3FlujpSG5kP4D4eRIDn4AiEA1VHzAGKjffmU/H7AmTA3i1NdABb3Sa0zSSKIUJm6cN8="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"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"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-formfield_0.21.0-canary.f35b2fd7.0_1618513796686_0.8312309551032939"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.11977cac.0":{"name":"@material/mwc-formfield","version":"0.21.0-canary.11977cac.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=12.0.0-canary.3f342c3f4.0","@material/mwc-base":"0.21.0-canary.11977cac.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-checkbox":"0.21.0-canary.11977cac.0","@material/mwc-radio":"0.21.0-canary.11977cac.0","@material/mwc-switch":"0.21.0-canary.11977cac.0","@material/rtl":"=12.0.0-canary.3f342c3f4.0","@material/theme":"=12.0.0-canary.3f342c3f4.0","@material/typography":"=12.0.0-canary.3f342c3f4.0"},"publishConfig":{"access":"public"},"gitHead":"30cf21833b011fd8946bd6853a20341579b79c96","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/30cf21833b011fd8946bd6853a20341579b79c96/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/30cf21833b011fd8946bd6853a20341579b79c96/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/30cf21833b011fd8946bd6853a20341579b79c96/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/30cf21833b011fd8946bd6853a20341579b79c96/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n|----  | -----------\n| `--mdc-typography-body2-<PROPERTY>` | Styles the typography of the formfield.\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.21.0-canary.11977cac.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-svUnJ9uH36PZ7hGD24gyo1JSyvi4pheW03wBLHLKRQmdeuAkUT34swkoCVjGlTNB1QBJjFEkniHazzavzTTQ9w==","shasum":"2dc7c206fae3e58cc93a19753271e133670f1333","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.21.0-canary.11977cac.0.tgz","fileCount":13,"unpackedSize":40638,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgeOEFCRA9TVsSAnZWagAAzBAP+wX1qEMxHXGXpLjrpWFK\ncnHL/myUaW3Hg+/PSDnVUFIlcN9Sab13rEo+JjykjRSPzatkpVUuqn/gEUBz\nBMWQyCKDCIS4ilCqYx/GP7w7q0AK8UzEJlhUrDYsceABVK36jM2bDgjSUvqb\nX7nCaypYI7JnB8A0zbu4SYJIjcmC0aJQ/LOVvTHTh3IOjqRZvjDKsIFsw5Ty\nV41BDv6w366olMeOAwqC4NkbX7qM2Vhkkgw/xoRgY3w2r9UZNuaEeSA/oePg\nBhTSe7GjB3iW8TkonJ/q64OkRwF0oHJo9jFrJ8h1pQ2wtdVlSGwSNTFxpa91\nptDmxn2HKNLeWXPrRclsAcy21c07c9mZpeZxmhUc3mPJYVofxUm6ZaXMEmtB\nYcGUb+Njk/cusTxqTmS9xtF59hx0R4e9C0zeYujQA+SKVWhMqRQLSP0kTO0x\nV0kjYIoxN4AWWwxcqtOk0p/dkTCc3G5FK05xpprWfKcyZPu8tF7ps6jyb2rw\nKzA/wCi+JXi4mTRDf2bGCLl0jn7RgicX3UXuRviHIH2HbQhcAQ54rjDkD8e4\nomhqRNDuQu01SIWXLT5wzqjy4uwfnuqZlf9BVS+B02EFdNfE7m9q8Z7thgGz\nEC0juHe+Dz5LUCGuhutJUHPx80V7gkta94ct4WXpuILYPghmtC+VP/bcWZgp\nbBCH\r\n=jJt0\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIH4hfiqvd2O7t4d/0vY6s04gQnUyQmnhYu2Ng7TR+TX9AiBzlvFXasYF81AljkyrL0o4A9O5MpZotJgqR6t4I/h7bQ=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"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"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-formfield_0.21.0-canary.11977cac.0_1618534661051_0.9243787678047908"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.018ff45e.0":{"name":"@material/mwc-formfield","version":"0.21.0-canary.018ff45e.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=12.0.0-canary.cad489689.0","@material/mwc-base":"0.21.0-canary.018ff45e.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-checkbox":"0.21.0-canary.018ff45e.0","@material/mwc-radio":"0.21.0-canary.018ff45e.0","@material/mwc-switch":"0.21.0-canary.018ff45e.0","@material/rtl":"=12.0.0-canary.cad489689.0","@material/theme":"=12.0.0-canary.cad489689.0","@material/typography":"=12.0.0-canary.cad489689.0"},"publishConfig":{"access":"public"},"gitHead":"4ac1a4ee2a06e36457a8412629422eeaa91183b6","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4ac1a4ee2a06e36457a8412629422eeaa91183b6/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4ac1a4ee2a06e36457a8412629422eeaa91183b6/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4ac1a4ee2a06e36457a8412629422eeaa91183b6/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4ac1a4ee2a06e36457a8412629422eeaa91183b6/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n|----  | -----------\n| `--mdc-typography-body2-<PROPERTY>` | Styles the typography of the formfield.\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.21.0-canary.018ff45e.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-CayttPK9Zw71z2tzrcmf6gHNFHf7vM2Oor6JScje08B6uV3pHSpYJ+CooUF2JN380S3eBIx0YXkjhKM3UvMCSg==","shasum":"e71c5f8efdfcc52971f01c8971b606528bd60c77","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.21.0-canary.018ff45e.0.tgz","fileCount":13,"unpackedSize":40638,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJggf28CRA9TVsSAnZWagAAJ0cP/3Bc7GNXK9k+1JNSR68L\nQLyQTUW2dQ/lIxNc99BCmrsoh0r+QOtp7KEIWzneXfekFsHIGpPHMeGBJBIj\nIEJUyztlslE5QpQ3YZfkR0gGml2IZgJQeXdXf/tir2fQj7UqklBqCExsiDDo\ndOSP4jxEyW58N4xINTU2NAQNoNCtOEsnySqCKggRRf1u4lYuZm91a7q7WBNP\nxTK1jqVG1y0vOxZInsGmbJTtTWfT1VneINSnClE8SxtiRbME/uFbsvOi6OwU\nNiRjPaESr55Ud7DqqZg1lTat4itpTppwib6rCCb94ynhs9mUEYUx7DWj3KHO\nxRoP1uK9uLN0yo+5VcZKX8rimGEMBo5cRy+UZf6v1TVGH5jlZlIFd2MJ/CFd\n+r6up1PpOgDbSBy1zimS1d+E20osgscmeE+ZlRVjd4xnQFrtkVJXh8IjLPaQ\n1W/V5cv5qU/o56AkZ2Xz5CSZ4GkQhpCbp7vXUygP/l/QCaN5BNXoaayHruXJ\nsIOE2ciLfGpUEHrAq4fHaoFbkibZnegQ9FNuvg4w7GbQtSMSow/4P0Wrcrww\nwHn3P2D6oCKusAODeB1PkCSXPRo5Df/ACmOsI+c2z9IqceFoWNzPG2bwKPbH\n/wT4rQYETkydK8McAbk3H5FqtPhALA6fvrQAHUsOTTSUYSZ08kqq+ajy42QV\nAoCd\r\n=6V9y\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICXimS6QuD3oPEyVkNJhPI2/qBMXKewmJtqMKhYcy38WAiA8pCPoHzArLalmVNFHUziHxZpXPe3ibCY970FODUQ3hg=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"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"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-formfield_0.21.0-canary.018ff45e.0_1619131836039_0.7418510127925899"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.c99d1fa5.0":{"name":"@material/mwc-formfield","version":"0.21.0-canary.c99d1fa5.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=12.0.0-canary.197f64fa2.0","@material/mwc-base":"0.21.0-canary.c99d1fa5.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-checkbox":"0.21.0-canary.c99d1fa5.0","@material/mwc-radio":"0.21.0-canary.c99d1fa5.0","@material/mwc-switch":"0.21.0-canary.c99d1fa5.0","@material/rtl":"=12.0.0-canary.197f64fa2.0","@material/theme":"=12.0.0-canary.197f64fa2.0","@material/typography":"=12.0.0-canary.197f64fa2.0"},"publishConfig":{"access":"public"},"gitHead":"890b4e4cc8e4f275054b5ddf4b3554d0a36ad82c","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/890b4e4cc8e4f275054b5ddf4b3554d0a36ad82c/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/890b4e4cc8e4f275054b5ddf4b3554d0a36ad82c/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/890b4e4cc8e4f275054b5ddf4b3554d0a36ad82c/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/890b4e4cc8e4f275054b5ddf4b3554d0a36ad82c/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n|----  | -----------\n| `--mdc-typography-body2-<PROPERTY>` | Styles the typography of the formfield.\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.21.0-canary.c99d1fa5.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-D3SdXs/PZlt6E+xOpLdyGboYFPWunXV3J26uOXaFy/iICJ3i/MlvRA7evU8Pi/lo3sYO9KihgVNnjRQam3VEbQ==","shasum":"64cae06b16c0266c43d57d3e13e128cb242c6dc6","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.21.0-canary.c99d1fa5.0.tgz","fileCount":13,"unpackedSize":40638,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJghxiECRA9TVsSAnZWagAAR4AP/3kVyzy8hj6TA9hJvsVc\nPpsc+GYNInaYPqFUC11bA6cXYpCr4SO48Kcpxz33gNZGZxIAh4ZNiKDNVj2S\nrHE65u2TcKEMUa6nWln0mXK/4eyTpeiDDs0rBNfRYGHCs8ILbZr2fqJ8FZKj\nZHnKdn2N1GSTcKO+VvDz9L9v/8jT5t2ZMseiw2IpQibSW/2L55bTNdUvj6fr\n8kNbsvb6AZrb/RP/+7okO3q2KZXUUboBlLid9QIPsd6FzSvIuwIiVqm8B+lI\nx4umj2OwEs6HC68kKbYgbtS/QFz8PR6Au28SVoxJjokY5bELsUyC7DmDDW+d\nABKLYWhBsFClVfj4nOGuovp3S5YfiZlyUoXVoCmLYe70yf0W6hHtYObAFByH\nAEGVU8627X7R6xPWQ0C17EKELK3C8oLDAnJwESdSbg1/rKDCxLBgfb+rzsQU\nOOmb5EbDk3zwKheXStcA7rk0VkhiU9WvkAy+KWx6eRFQGELHTWXsPUkQO4nF\nlGYzPI1bl93M+Nkl587cHTvMnR/aF/nfhU4z+RoM0pQJXlRkPpFzK8Z85h3z\nJiJke7GwOZlp4XyiF0t7aSYt8yXpSvJd4CySGSTQHmPD0TLIAdtI3iaCA5He\nCHwFrzq+RYx75wjb9OY6PpzEjwCE2D81jutISdmaCco70IH5BUltZzINuVjW\nGIhM\r\n=DRCm\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDwTTnDdFvn+gUb0x5lRqwQvTi8O1DTtgLFGHE4awWtWwIhAPBZwAtFxnguvpgZtfVaW4f6IXdFwvscpRgNJv4OE8aR"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"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"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-formfield_0.21.0-canary.c99d1fa5.0_1619466371864_0.13020009424969925"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.eea9b304.0":{"name":"@material/mwc-formfield","version":"0.21.0-canary.eea9b304.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=12.0.0-canary.197f64fa2.0","@material/mwc-base":"0.21.0-canary.eea9b304.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-checkbox":"0.21.0-canary.eea9b304.0","@material/mwc-radio":"0.21.0-canary.eea9b304.0","@material/mwc-switch":"0.21.0-canary.eea9b304.0","@material/rtl":"=12.0.0-canary.197f64fa2.0","@material/theme":"=12.0.0-canary.197f64fa2.0","@material/typography":"=12.0.0-canary.197f64fa2.0"},"publishConfig":{"access":"public"},"gitHead":"5446efe110704f4464931aec816f98b15640db03","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5446efe110704f4464931aec816f98b15640db03/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5446efe110704f4464931aec816f98b15640db03/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5446efe110704f4464931aec816f98b15640db03/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5446efe110704f4464931aec816f98b15640db03/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n|----  | -----------\n| `--mdc-typography-body2-<PROPERTY>` | Styles the typography of the formfield.\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.21.0-canary.eea9b304.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-D3ih8FUjd2yRDE/O53T+1mS3eudJIaUabTCHBva5XiXLhM91B017izqCZqA2ReJMhcIXr2F9REkbtX86LbwNlw==","shasum":"5ced350e580d1848f895097879297f8931042e5b","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.21.0-canary.eea9b304.0.tgz","fileCount":13,"unpackedSize":40650,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgiJW9CRA9TVsSAnZWagAAJw4P/j1b9/VW6Cz5q+cfOTS3\nzP+nCM6xrWWN9hqp+LWuHXNayDaya9BPFiZT5R+Zv1G9EqoFb2+ih5WRDEd2\nDQLEA0GYpQ0VH4jAlzqVyjMo1DMGje9hzE73od5wTRtvz9OJqowwRG5+YMaI\noCpiYwaZ/L0HWds06a95Y1Zasql/AfS2KESOQMRDjLNZTFKMltUa1SylB37k\n0+cJNM0r2+a7OAvc6/T3R5XdWXG5C2BCmq34XCjZa7tJQBlU2BE2vHH+hDT5\nrwOMnSXayC+EgFi3bWZe+mbyXO48Gk8KpETDZIOVQgu6flioWTtBO9PJr1hR\nev+iuMj8XHcF6JOFe4CuWTro8lcsKrf2XK3fctQuMq3yrrFkyOW3/9zP83bq\nDtaYGXaRqu14EKbbwzwXfY5ErJkvqpQCorby9F/0pbQj3GbFMh4YuXbsmaaH\npXP8TsML32S3X6RGAjvdP68yUf0i+Mi2uoZL/uS866jjETXjswU51aBMxKCj\nbwLvrpnpZVcoqzNTYr1t59sbqlfs2JqCYgctIN7C26FIvZ8bkMYNEKv30GEJ\n58EEHmGtB55jZqbwrFtWh1FNg8S0rMiP/6iMNYrrSa5fJfueEc8sfVieKvY1\n6z33Ojf/Y7CSuIvrojain+5aT7WX5wqide47nPTW4lYlx50nhDq0HLbJavHS\ne9GM\r\n=0wPc\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDr3PFGDSY9CCy8hwgyWPnrsvZR4ilvmFaS4khMNN6DkAiEAnN9lIqVKZv7L7AAh7U3eInWSx+eUjxgHRlW6Iqlk9G0="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"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"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-formfield_0.21.0-canary.eea9b304.0_1619563964857_0.6467354041954827"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.5dd85d0c.0":{"name":"@material/mwc-formfield","version":"0.21.0-canary.5dd85d0c.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=12.0.0-canary.197f64fa2.0","@material/mwc-base":"0.21.0-canary.5dd85d0c.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-checkbox":"0.21.0-canary.5dd85d0c.0","@material/mwc-radio":"0.21.0-canary.5dd85d0c.0","@material/mwc-switch":"0.21.0-canary.5dd85d0c.0","@material/rtl":"=12.0.0-canary.197f64fa2.0","@material/theme":"=12.0.0-canary.197f64fa2.0","@material/typography":"=12.0.0-canary.197f64fa2.0"},"publishConfig":{"access":"public"},"gitHead":"87fa4ee3a285fecb598e3c37e03178de68d79f7d","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/87fa4ee3a285fecb598e3c37e03178de68d79f7d/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/87fa4ee3a285fecb598e3c37e03178de68d79f7d/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/87fa4ee3a285fecb598e3c37e03178de68d79f7d/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/87fa4ee3a285fecb598e3c37e03178de68d79f7d/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n|----  | -----------\n| `--mdc-typography-body2-<PROPERTY>` | Styles the typography of the formfield.\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.21.0-canary.5dd85d0c.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-/EN45U6/BDLsoiOPnNAyK/TTCVwZAYnFas+mTmA+gB5FSpir5HyDak3fQcajR2KrgMrmJO1GhuSOY7dHQCtVxQ==","shasum":"4e7bd2dfd8cf316702d60a6fced53d7eeebdac88","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.21.0-canary.5dd85d0c.0.tgz","fileCount":13,"unpackedSize":40650,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgiKebCRA9TVsSAnZWagAAMY4P/j6RU0V2dIhbtLJwiBB/\nk3sRAefV7CH4yRn/OLHHgW0L7Fus2AQ3MCXIwDUuMEnjS9Bh8jIjKCPVSGpD\n95gpkAGmQ0A92gksajSpATQN+SaelcXNkg5zg5+A90qWSL0qsuwxI96KKJee\nuu2oRsINO+stkRMLveN8pzzrpgknfwLFTMoesw8s2/JVRnZx+cugqrxfHQAI\nLBwl4T/Jy6bxF2bHc5564QpqgztOKZSwHmGqzvRWzyBjZzlhNP/iPCwWzdQe\n8e2UKGlkTunHNU1YSkzNZ5WV4E5mPcr9vBEN0LGYVTrkWofcOHy9V1SvlsYw\nIMnWv9P0jj3DullteJ44jCm7KBFeqJEhCLvCGG5bEWUCx2BUAFtnW2HdLcCu\nB+AoQhbB2YWjQmL9Lpk/tIHt0Ta7sjk1r+nuIGLnd0caXm8mIAkticuDOBZ/\ngrwq+jXDXGvVjYY5c/HDpN65s09NOe6UmuemfbvQxW5Sv76Q4h7B8CYcaC2a\nPCKJ1+E5Lotx/zl2xAlkACq7cSD6Oak5PTnkiG2ZiUcGhI9Yd7J3r8EB3pY7\njHixcw/V2nh19TagzdoxfmvnJ5D2Nm722uEFHUbe8h1pp7r4tykgpPrNor6D\ntnekxqxtaXcquo98HjiTj+a85H2Wgrr4qedq29WdZrNnPQmDY6f5SgbFurWo\nMImB\r\n=ofZk\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICj6+W7u/MKBRgR50wIXAxcaWcLQgUUaRM8CR6WdMKrYAiEAj50w7Ct4uLdiuxFqNuWtS1kF/aXmOK1DOcqCoIbpAWs="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"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"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-formfield_0.21.0-canary.5dd85d0c.0_1619568538519_0.6398551861415966"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.cc813cff.0":{"name":"@material/mwc-formfield","version":"0.21.0-canary.cc813cff.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=12.0.0-canary.197f64fa2.0","@material/mwc-base":"0.21.0-canary.cc813cff.0","lit-element":"~2.4.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-checkbox":"0.21.0-canary.cc813cff.0","@material/mwc-radio":"0.21.0-canary.cc813cff.0","@material/mwc-switch":"0.21.0-canary.cc813cff.0","@material/rtl":"=12.0.0-canary.197f64fa2.0","@material/theme":"=12.0.0-canary.197f64fa2.0","@material/typography":"=12.0.0-canary.197f64fa2.0"},"publishConfig":{"access":"public"},"gitHead":"2505c49d16e9b978469aef456cb53e6d6b265758","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2505c49d16e9b978469aef456cb53e6d6b265758/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2505c49d16e9b978469aef456cb53e6d6b265758/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2505c49d16e9b978469aef456cb53e6d6b265758/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2505c49d16e9b978469aef456cb53e6d6b265758/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n|----  | -----------\n| `--mdc-typography-body2-<PROPERTY>` | Styles the typography of the formfield.\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.21.0-canary.cc813cff.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-hJG4p+H0ftCknW+8nBxr06N22h/6qFIiupsToV3uOM3PkQU/esWFqn/oUVNy1kh9eBSH499srgZyvKQ2P4fSOw==","shasum":"858f0118662080c3bbf87887d81199f3795db8aa","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.21.0-canary.cc813cff.0.tgz","fileCount":13,"unpackedSize":40650,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgjHQ/CRA9TVsSAnZWagAA4FEQAIffZUBA+GM0D4vYKns6\n7UOoEriLuMuyH+SzQOKhErJ/WE388qJ2G8flMljyv1Fpp1MBKLahT12y7c2h\nSBxsetX1TbECrwSaRDyzshtq0be2TCHzQiqBg9EjUnVhzkOzTvplcAtiBbzm\nIUSNjyNcrqFqO+XAgt1FK7IYYzFQQAOYIAgmm7XKsHWIqbdsNMCxiSPIsCMs\nPg8EGtARDfV/jdUVfriaIKT9cEngvoqNVunC3l/8UAuRnun0GGfzmi1QuiPb\ntI1eoioZlqIhov0/chnRhQ9GY7u6PkqugQFGm0iMHVjTGJFrSx+DzxPzOKsg\nPCDKd2iuA6TX5SLZhMIusMnOP6AxuICywSuzaTMoAV14c6fyY9v8fYfg9v4P\nlXrODEfb/8tmIfn/DKAcb0vH8+E8bhmQbAGkV3sd0IUvPQ+7GSutc3H+C+pO\nJU+e7x1M0vuX/uXZRUhYKHqxoKAT6fqBtgEqCAGsgQWYLQqfueY19T1/F46e\nnOpNGB5LiAMEhamOX5oQiKeMXw96nCJI4wsgLi4bdzc1iLOMlGgkwbfRlJ0I\nqt7/6jrIjzydgJuqdA16UXetFVK1jKE30sDi0Dmhjkfrz0g+G9FFdL17oVkK\nCGd/3j9wjIPm9YcM7pg7JpTh67iS3W0/p7UxTzVICD6gQ2K2Clw1A/ipfgXM\nlFMn\r\n=j7Wz\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEEqfC7R6B7my4xPmjCoaUhVtMDQ/E9eCWeVKOYbRNj1AiEAnSgpQoSS5x9ANK8eVuwdp9jWjMfvG5rycRg/lGi0x8I="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"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"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-formfield_0.21.0-canary.cc813cff.0_1619817535183_0.7269617801888939"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.0875e898.0":{"name":"@material/mwc-formfield","version":"0.21.0-canary.0875e898.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=12.0.0-canary.197f64fa2.0","@material/mwc-base":"0.21.0-canary.0875e898.0","lit-element":"~2.4.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-checkbox":"0.21.0-canary.0875e898.0","@material/mwc-radio":"0.21.0-canary.0875e898.0","@material/mwc-switch":"0.21.0-canary.0875e898.0","@material/rtl":"=12.0.0-canary.197f64fa2.0","@material/theme":"=12.0.0-canary.197f64fa2.0","@material/typography":"=12.0.0-canary.197f64fa2.0"},"publishConfig":{"access":"public"},"gitHead":"d5ea3c745b8a267546c8a9f9ff3e491bd41a8f2e","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d5ea3c745b8a267546c8a9f9ff3e491bd41a8f2e/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d5ea3c745b8a267546c8a9f9ff3e491bd41a8f2e/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d5ea3c745b8a267546c8a9f9ff3e491bd41a8f2e/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d5ea3c745b8a267546c8a9f9ff3e491bd41a8f2e/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n|----  | -----------\n| `--mdc-typography-body2-<PROPERTY>` | Styles the typography of the formfield.\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.21.0-canary.0875e898.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-eXiokfZNYk1wqIEZh2Y5qUPnGeQieS6g7yS3wx7+z/VAB1oCxfygUqhXiWYIu2wrI0+0cyMqPA35KGCTl2muhg==","shasum":"05f1c887d56b6b24d89edfe1229a49232664a221","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.21.0-canary.0875e898.0.tgz","fileCount":13,"unpackedSize":40650,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgjHYlCRA9TVsSAnZWagAAzD0P/3dYhBcaXWPqgCwDj9m8\nNBEhGE1ZQaNukVvaXKwdg3/B3qOsIkseB0nwxtE6fcsT0dh2ryAEzmCKu8vz\nphRCO9hlkbhLnEJsl438JjIRSOOWiliLbNIpbn+nI4zdZQ3DwXqiVGtPHi+v\nnN/iOuBMYiRK7rJvtGd9bmsQlm3zr8qmdSrgnWSHWcopG1T+bk/mQYCLwFPT\nuHa5r1rwnO++/G6AVkcdGVB5N7Tei49Vnt3g7+R3ueQV+m91hki+9bcEBulC\nshb/3L2717MA9Yf5GJd4AibBVqQIM3TRujg6TspB93/CGi7e4VaBVOI/6/v/\ngxCDo7ZeE91J1M6rnx3NMlW22j5oVzeIXQ9LZCMGuYhcttwgYKZVJ9VNKqUp\npgnptyT709j7dnXHsKod2/rYO7fX+s/P0vp7EG4P04ru8X31nADlXzg7bPEb\nXD741H8gdXDxw+Qa0UA7bd+9Qib/6Smes7Yfs1TL82wBj4LW/bU96RZbAqks\noGOar8Vjdk/WiVUZ5rdn3X8VijHwbjVEErBtk0I4Eogo1d1PQrbBbErnHG0l\nR/Nl2EYYS8GjD5upO5sjLaQVwZmn0BmaRcJLGrlaCSU3OyC6aYC+47uLdNmr\n3Vp3h6WMxxmrKZ4Y6nytVos95ZU5erX5BSatSLMMkBrtvVme03P0zrOIEC+T\nOELs\r\n=rzpu\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDKLeCcUsUk5tUUd2DBkeI32ABPNl9Gf+0JLwCn2B2VSwIgTsfwIbwuvQb/PwtmUPZXLWhUn/v5l8GlfDvscInkhqU="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"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"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-formfield_0.21.0-canary.0875e898.0_1619818020778_0.9914724338287546"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0":{"name":"@material/mwc-formfield","version":"0.21.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=12.0.0-canary.197f64fa2.0","@material/mwc-base":"^0.21.0","lit-element":"~2.4.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-checkbox":"^0.21.0","@material/mwc-radio":"^0.21.0","@material/mwc-switch":"^0.21.0","@material/rtl":"=12.0.0-canary.197f64fa2.0","@material/theme":"=12.0.0-canary.197f64fa2.0","@material/typography":"=12.0.0-canary.197f64fa2.0"},"publishConfig":{"access":"public"},"gitHead":"8f1e7e1b886b6c6820c18c8cc26cce7b15fd2c98","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.21.0","_nodeVersion":"12.21.0","_npmVersion":"lerna/3.22.1/node@v12.21.0+x64 (linux)","dist":{"integrity":"sha512-pGqa7/uyIdp3zsI36ZJ7iG2UKkjHQiw+jKYtiDeHU6opQgs98vkeTGq17sSD+3wSEQt7tGBP0NKiLO5YNNzJQA==","shasum":"d5441d61de567fabb844ca639426d11b2b77cd2b","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.21.0.tgz","fileCount":13,"unpackedSize":40564,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgjJmKCRA9TVsSAnZWagAAc0kP/RU3M/40kxSyJzto7IRu\nikgnRyLy42S548uCA67Gj+d8N2jMEHrPN216AFd8LUTiog7yWfG6ZmuIUyNX\nIrQFA4myOi/0EVRTwMPGf5L3vs0Ts5FR34zAHT3gGSoo3+KxN0Ccyj2FMDLc\nqiPos/80RoIQjhy7cb9V0BEA1a46T+fRn5UIONZT/xwAWMCg+qFaC42WtyUc\n7GpdymXFc8EPzKx2JhvB5LJYQ1K7njioWbrx9e/BpMF3GMkpp0QpxAFkoFXw\nFgSzorcS2U45YcCOEX/2QCC94ux8E73xuKse25LXpIdqZZCyNOHLF1RwHp0+\nOa6E5IDDn9UCnFHFKIA1xwA2OvHwbfdhys2Sn/HX+ojZXkZo3I92K8uq21Ou\nMxxv6aCZpPOv5ih3oXN7bJih09pi+7dylFDL9Dv1V4MKVmYdZlrfuMKS4cLz\n2JPdJK8mphOl9eL4QtlKDMpf3i3DEXpPBaMs0JzqWg4oQ7huYoI++VzZgUt1\nXJMFw89/3DPjleLD/Ft5VdMqwncYw2zvRqNpHGSDzovI2ooCUmUwmZorJv/m\nuQlcfah9y7YsZQTLR8bWPH1xF4IdKoeDmK6XSsBhjS4sKMBTpl6Ip9M4W/B6\n0Jw1IluIxpoD1NMfoypQsgqyWHBPqvuF9Y3vaEjiss+DZ8Lzj1oB9EPT4sNH\nLGIf\r\n=hUln\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDYFr6HzE9A9jx2NFMaXM0sgBn33K7GymgvaeKQlFhN5wIgbJu0sRIvXAk2pYz0M2B1WOsll8Y+pxYvgtjteN2V10k="}]},"_npmUser":{"name":"taylorv","email":"brian.t.vann@gmail.com"},"directories":{},"maintainers":[{"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"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-formfield_0.21.0_1619827082471_0.45369882805947603"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.8f1e7e1b.0":{"name":"@material/mwc-formfield","version":"0.22.0-canary.8f1e7e1b.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=12.0.0-canary.197f64fa2.0","@material/mwc-base":"0.22.0-canary.8f1e7e1b.0","lit-element":"~2.4.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-checkbox":"0.22.0-canary.8f1e7e1b.0","@material/mwc-radio":"0.22.0-canary.8f1e7e1b.0","@material/mwc-switch":"0.22.0-canary.8f1e7e1b.0","@material/rtl":"=12.0.0-canary.197f64fa2.0","@material/theme":"=12.0.0-canary.197f64fa2.0","@material/typography":"=12.0.0-canary.197f64fa2.0"},"publishConfig":{"access":"public"},"gitHead":"346f8ec243ae13b28796324e6408721377829b39","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/346f8ec243ae13b28796324e6408721377829b39/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/346f8ec243ae13b28796324e6408721377829b39/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/346f8ec243ae13b28796324e6408721377829b39/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/346f8ec243ae13b28796324e6408721377829b39/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n|----  | -----------\n| `--mdc-typography-body2-<PROPERTY>` | Styles the typography of the formfield.\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.22.0-canary.8f1e7e1b.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-QDWEeGb8iCo6Xu6ky8l6ra/kzrx5frLwZmKZGBSJo5p44YeMvddu8Jm2LYxFNO5vWNkf4G/2i1pkVAIslFOwUg==","shasum":"5c1eb9eb3d7f001f7f29bb71c1f035c6724ddc0e","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.22.0-canary.8f1e7e1b.0.tgz","fileCount":13,"unpackedSize":40650,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgjJskCRA9TVsSAnZWagAAI4cP/iACnh3nhaNMHXQjedtp\nNViOTdw0nxMHLKSYWqm8QQ3Yp00tEOCSnaukGHruROzXKKKcCTJwBdEKMGff\nyLZIv9fwxm+FiFlZV1NSH41jzuuG3ezHSarPNUzOdhP4TYO1MYkQSYZOeesg\nA6gI+FohIyhXT0UQptoUYFo6M3FmLVICelbzxuTXnj3Ccml7E+lWSjx8w/y0\nZun0d5Sx6EyGMbNg0K4AC0rakZcA1TJY+F4LNoPoeN6xp1dmgw3NDE65AJY/\nj1Z0c9VIZWyblYsXzfLqX1rO+K2F8DzUVN7S/J6XROUFq2hUygAqgYZAT4qH\nultycTovBpFGAa2lQ1V9HCpb4vBxCVzUQIP4BSvxtV/oUra+vRlzaog+QpOk\nfOPPO8H8Cktxi7VCy1kj0WIM3SxPRjV4Z9qmaIPuNTn3WF+ort3QEf0dqzR2\nsYNlYF/8sbHqv2uTqYT8qWx0odLwMj0bOz1x4NDp0YpFGU+uDXyJg4AyBRyR\nVmBew3jGkpLMcX3CToitkW3kyJJVsI4wDxAj/+wTVMJ+J9/HDs/4X9OudIRQ\nVo063ulxfxysp5q7xKMZUd+73oPwYow3bFvxl5yo7t9dlW9LoRwR4NY45UgT\nNyPyK5aK5km7t0ZAnV4bQY6D+kMBgjFUhP4c7RewzIDUlhn5PDqBFnKuQTCL\nWB20\r\n=yIcg\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGBkHSOBRuMNHi7G0s4rx9BupiWksXlSAuheiLIWgi+9AiAEafea9EnJDIvUyBBUztFd/kk2Rat5+vxT48AZ66Mryw=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"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"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-formfield_0.22.0-canary.8f1e7e1b.0_1619827492531_0.2508855051783714"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.deb0e792.0":{"name":"@material/mwc-formfield","version":"0.22.0-canary.deb0e792.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=12.0.0-canary.197f64fa2.0","@material/mwc-base":"0.22.0-canary.deb0e792.0","lit-element":"~2.4.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-checkbox":"0.22.0-canary.deb0e792.0","@material/mwc-radio":"0.22.0-canary.deb0e792.0","@material/mwc-switch":"0.22.0-canary.deb0e792.0","@material/rtl":"=12.0.0-canary.197f64fa2.0","@material/theme":"=12.0.0-canary.197f64fa2.0","@material/typography":"=12.0.0-canary.197f64fa2.0"},"publishConfig":{"access":"public"},"gitHead":"7b8ce494b86ceb69e799a5ec1a9f0148075d04be","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7b8ce494b86ceb69e799a5ec1a9f0148075d04be/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7b8ce494b86ceb69e799a5ec1a9f0148075d04be/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7b8ce494b86ceb69e799a5ec1a9f0148075d04be/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7b8ce494b86ceb69e799a5ec1a9f0148075d04be/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n|----  | -----------\n| `--mdc-typography-body2-<PROPERTY>` | Styles the typography of the formfield.\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.22.0-canary.deb0e792.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-edm49AAELqpfQEAHUTAIoAH+8cceLRbqEz7Qs2Q0ATHGfLlOEXtXULiXMKR1CNZU8daqVbjATtTxbGK33WF1sg==","shasum":"bbfffffa212288de2b40253dd1b049f07f09fd44","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.22.0-canary.deb0e792.0.tgz","fileCount":13,"unpackedSize":40650,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkGw5CRA9TVsSAnZWagAATtsP/RJ8JMC7j363SEe0lzJG\n/MTgvg/1CQ/wEO/OQGtZ4f8fUV77WYU6RtKbN03ksrACYVxDCpl5ZELBNc/Q\n1tUASejhpXlwK8ctLBleC4kGnA7+qx7fkmUnTbM0fthkb95INRgaawCHX5EJ\nC+L5717pWsexM5qA+jMJ53Z+j1tmPnTMHzV2Wd9PAXugklojbE9dHR8JvJaY\nVqF3Jh877iLwPIG3d1j+ihlY7A4+HvqRbwq77yoX5D/mAuufZ1q644XjPOhI\n8stQ5lqj1ROuL6ZqLbnFXOKb4OPZsPgm3T6hjPHkVmWnZWyYqGLVnk1+6n8X\n1lZrUynxhaggmuSDzwDcF4NokW/IWgelNhEeIVyzVjdkwk2xyiz+JTmicDcg\n4ZZ96kfoxJ8+8bD0WPYKfZluy5OuZ+Lg9F/rnday1ODT778R2TuIsOA550Zp\n3KrJnR3ZPiSJp4VelT+vJt3eXAHSwxI+Q/J/vpp+7t43yI6nRtnZZWFUh1c5\nVSlsu6vgRNeNDFHnqJTqRVswXhgPwqNM4J5yfyIuqBQSZ22Pprz/8vlR8Du9\nv5g8TZecZZSjeoGRpfYX6M2ixho9bcZJGvqZ3UhOZVhHsDo9o9IiyhL2BjcC\n/ex0Xry9cCrIMDMc0aarsRe4NyWSmBWaonH78BOAwS0CfJRaHTxslmeQ6v7Q\nIkqs\r\n=f/ut\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCq53pVdo9aO+ji5CpfbGyiVGho1fCPo9/ad+dLJtqpXQIhALtvoj2PpQWLbYb15zFPTjabARG2J+nWQiERKx7lwTWy"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"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"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-formfield_0.22.0-canary.deb0e792.0_1620077624857_0.3505668706000784"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.a3ff615f.0":{"name":"@material/mwc-formfield","version":"0.22.0-canary.a3ff615f.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=12.0.0-canary.474836ad0.0","@material/mwc-base":"0.22.0-canary.a3ff615f.0","lit-element":"~2.4.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-checkbox":"0.22.0-canary.a3ff615f.0","@material/mwc-radio":"0.22.0-canary.a3ff615f.0","@material/mwc-switch":"0.22.0-canary.a3ff615f.0","@material/rtl":"=12.0.0-canary.474836ad0.0","@material/theme":"=12.0.0-canary.474836ad0.0","@material/typography":"=12.0.0-canary.474836ad0.0"},"publishConfig":{"access":"public"},"gitHead":"1e819eb3a7930649e9ccc58d69e42d7d17e022ea","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1e819eb3a7930649e9ccc58d69e42d7d17e022ea/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1e819eb3a7930649e9ccc58d69e42d7d17e022ea/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1e819eb3a7930649e9ccc58d69e42d7d17e022ea/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1e819eb3a7930649e9ccc58d69e42d7d17e022ea/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n|----  | -----------\n| `--mdc-typography-body2-<PROPERTY>` | Styles the typography of the formfield.\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.22.0-canary.a3ff615f.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-QtgA/tOWaTtREjCubCcS2ywGSkG57koWiWI+OtzVwbWvVi+AXms5spSooiSU5TyT5vOfy/uL6kt4x0Bu/hXs1w==","shasum":"6232a5be333c2c2fd561c3ee482c6e1d1a183646","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.22.0-canary.a3ff615f.0.tgz","fileCount":13,"unpackedSize":40650,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkHooCRA9TVsSAnZWagAA6E8P/12833tXA0AWjRSGYuFN\nZw72lInfTbBJnLxVlYGqrS6Vrdezf95RpiY2ZRVLmA3Pd8lXW//CV18SVD3M\n2Yk4yygGCsMWu+XEfv3pHjvGa70/hB4SyGbxEhpxFl297qPr5b3q5qY1aW42\n2WcMgiTtu2nCoekA2Eoc8QozFQ5gPa6VSamho5fBEaevrelc2L2jrmrCxXF8\neE3lYBr/Q/n3E3uFUhQ0/tXy9fms+Fzt+OlCSDu8EY3AlISr8YHi5cmklUx3\nNOkol5Pt28grXmL95ppqEz7EbNhM7+VV0UmLmJ8CaQV15OrnSIWDm6BxBppI\njWHcKjXvOe5vAam7pHzzQjSKAD3yHMy9w2pChr7GrYdqUh5ea8WKX+LeuGW5\nxwMyDSaEXD9BiLR4J08w74iuse60u/DGG7tF8FFyCeKm39CM0BGXUtmp4p+Z\nLispJJGmM4KEWn56WkojpQ3Csv8mPUQt32b6e0mPdsLlSyMKt9t5k3muD7cu\nXVS5Dcm1Pc5OodZomwss23Csw7yKelc7O+2LtaBKNR9cSPFzagtMJSSK+gFS\nEO5wJtV4Au9XX7gY6SutJytguWsjnN5UpeV3gm0kkA3jNuUUmg138apUlxEA\nJgKC6bfr545tIurZoZJw+VBsxmyoKwm9aAx/R/uXXxZMcebG0/WUoPsIfypw\nojLy\r\n=tS6w\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDR4sp1MN1WN2ZzmjDUfub6AvotikvhsDQ2Nf5tQ8Z0HQIhAMtoX6V+sykGF75RgWxjtyCLDiEFrZKrbG5RZBozkwpD"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"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"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-formfield_0.22.0-canary.a3ff615f.0_1620081191795_0.9825610226217165"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.948ccfb5.0":{"name":"@material/mwc-formfield","version":"0.22.0-canary.948ccfb5.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=12.0.0-canary.474836ad0.0","@material/mwc-base":"0.22.0-canary.948ccfb5.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-checkbox":"0.22.0-canary.948ccfb5.0","@material/mwc-radio":"0.22.0-canary.948ccfb5.0","@material/mwc-switch":"0.22.0-canary.948ccfb5.0","@material/rtl":"=12.0.0-canary.474836ad0.0","@material/theme":"=12.0.0-canary.474836ad0.0","@material/typography":"=12.0.0-canary.474836ad0.0"},"publishConfig":{"access":"public"},"gitHead":"1dd7576742ede6b9f763d391eaebd31ce501ea16","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1dd7576742ede6b9f763d391eaebd31ce501ea16/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1dd7576742ede6b9f763d391eaebd31ce501ea16/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1dd7576742ede6b9f763d391eaebd31ce501ea16/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1dd7576742ede6b9f763d391eaebd31ce501ea16/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n|----  | -----------\n| `--mdc-typography-body2-<PROPERTY>` | Styles the typography of the formfield.\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.22.0-canary.948ccfb5.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-W2w3VY4il1zytx79krJq7XVSD1W4wzkhYZnM3r7Qn4WcBteEEWLNLd6qFS4xP1LocSj7PDn0V7kb11jvMfGspw==","shasum":"39f9eb1d2f4e677a82f2c0209dca9025d0184474","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.22.0-canary.948ccfb5.0.tgz","fileCount":13,"unpackedSize":40650,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkJDlCRA9TVsSAnZWagAALrsP/3ZGK/kiyIUskbvq8USg\nJifGxmn/dRHc0oaho8YyjtUYfKdwwFREhyaXLSda+53dA6bSx8/7TQqs8kL+\nUzZwE7/Z7WQETNUSX0enU2OcCfym571poaXiln6n6HEfJEtEJcFmc+tqXy1o\nKvYln5BTwltkN11VQfGCv1N9JL+bEYsCDjAS585+yWFuk0kOvAF9R5P/9xqJ\n2Y1/zwoZxnnX4brTeQvr0OF/NyU9IK1iSWj2WmAqsyEy1bUElPXTMnItNXMb\n2aJ/0eaZGrCwJcGJg3hteTjEXfhDqthe3wQVMoM4lCkE3EgiA+kBsgM3TVqQ\nz1Rld+Vcn5Ub2PHZgsBl4qRc+2a2DH7pEEwoW/He4nLB8IMcx7dfQXJK0JKN\nEOha2bhMEETwN2U8lVMANL7LtMrUiYLfgujN3+27x8KFnQ4BU4jltT4zePFu\n0rZEsautLd84EHuQErVTcLrDrcknvYtAg4gXHukzHmKSnQYi61A0qSOOzptp\nFsvp9LcjhpIAyP0QimDXGScHua8nJP6J7dfw15yErzMNY78zIJnglIURFL61\nm7+bsl9dshVZ5fWWL8lggfKN835gRfL5/NOO25gunizAqHZ2wHO3N8cKky4L\n4HEaKSZL+2skFl+2YZIM3D8M3YXTWNIcGBTaLaT4mL2mY+2wiJHkqBTLphzz\n/ReK\r\n=SP7K\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCZtoVjdxgvSexcV1X5wO/E8qRZ+zieSAtkKOBiHd02ugIhAOVdaVXKqWBN67qWg3OHLWJcVp3sDjyylsTq1bPcK8gr"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"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"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-formfield_0.22.0-canary.948ccfb5.0_1620087012912_0.7742499462566503"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.9f8337d7.0":{"name":"@material/mwc-formfield","version":"0.22.0-canary.9f8337d7.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=12.0.0-canary.be999eb08.0","@material/mwc-base":"0.22.0-canary.9f8337d7.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-checkbox":"0.22.0-canary.9f8337d7.0","@material/mwc-radio":"0.22.0-canary.9f8337d7.0","@material/mwc-switch":"0.22.0-canary.9f8337d7.0","@material/rtl":"=12.0.0-canary.be999eb08.0","@material/theme":"=12.0.0-canary.be999eb08.0","@material/typography":"=12.0.0-canary.be999eb08.0"},"publishConfig":{"access":"public"},"gitHead":"c25dd9ae2c04ae380f41705f23786ddbcbe29456","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c25dd9ae2c04ae380f41705f23786ddbcbe29456/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c25dd9ae2c04ae380f41705f23786ddbcbe29456/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c25dd9ae2c04ae380f41705f23786ddbcbe29456/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c25dd9ae2c04ae380f41705f23786ddbcbe29456/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n|----  | -----------\n| `--mdc-typography-body2-<PROPERTY>` | Styles the typography of the formfield.\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.22.0-canary.9f8337d7.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-C2RkgwqTiHigz3jVqHpepAiQydcfCJefF2/2pDWGBHbONZ8a6VY3Amay0ffg+hrzYy+ZwQm27X9w8XTFAYokVQ==","shasum":"cf8e588f2bb36ac0ecb25d71495379b347cc1ab5","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.22.0-canary.9f8337d7.0.tgz","fileCount":13,"unpackedSize":40650,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkZQuCRA9TVsSAnZWagAAfsEQAJ4ZexpG9mBQSisrogJ7\nV7m3DhiOEQGZQGvsquW54AKD1XpdzvhFh7c+FsuUboM8l6yenbbO8HHBvDJw\n9FCudsrjy6fr9dils/C500k484UgEq7tHeCWDgHqaRy3kLKbXZur4BvfLO+a\n2BJ7oTdCk9fKbkca7IKYVjgmvL0KecgmhL+dbqmJTnOdsKN12ZInaW8p5rau\no78gVXj2ih9QE/23LoetWM8appOA5o3G7UqC6YVv8NG2XuptbiwNgudEYS1T\nAoWsfxmpxRRsG0qWIYR4WJRyx4lVQ6xH6PDUL4naL9uuw50qmGmRoAowW2L6\naRhCAA+AagkyiDFKClC+JBt1htgBfSgAGFNhRKzh3yHp363qmoZ7j4YoJRcB\nD3Q7n0CwGlHrtcYImVzH9uggIGdZ2LRQxgvSGNutNVGKHRazF8+uVRKWy1Pv\ncb3b9gTCaywBmGzmvfh0mz6+tXGW1L4IANx+pwVLp+DOJkaOqmazN2Vo7Gfi\nNr0dH1epC0pIvhnWyJLjcyVeg86MHGUOdJ1c4duRHI4upPB7QB4qJ3f/q1wo\n7NgPT+HrhekHN791oq4hzgXXYSSGVjBtooCi/yNpBvI3vX+0WaHwUv/M1mW1\n9v4uAPKbKlFnk/C5DyOa4qOBJ/+hNxxc7JNgtaHCjG5KneLOh9F5bWzTw+I/\nuXRw\r\n=XXsD\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIECdFPsMAbSSHEQB7T7wwweC6iVEF2hZ4mkLsyH0uxbtAiEAgphQ0q2PbDB8EqSBBNhIydnkgD1/uR6+iOyzwlt7Z1Q="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"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"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-formfield_0.22.0-canary.9f8337d7.0_1620153390280_0.91857789695305"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.5813480a.0":{"name":"@material/mwc-formfield","version":"0.22.0-canary.5813480a.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=12.0.0-canary.055d4f10a.0","@material/mwc-base":"0.22.0-canary.5813480a.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-checkbox":"0.22.0-canary.5813480a.0","@material/mwc-radio":"0.22.0-canary.5813480a.0","@material/mwc-switch":"0.22.0-canary.5813480a.0","@material/rtl":"=12.0.0-canary.055d4f10a.0","@material/theme":"=12.0.0-canary.055d4f10a.0","@material/typography":"=12.0.0-canary.055d4f10a.0"},"publishConfig":{"access":"public"},"gitHead":"293298dc0704d114f85fd245f98ee8f21a3ea348","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/293298dc0704d114f85fd245f98ee8f21a3ea348/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/293298dc0704d114f85fd245f98ee8f21a3ea348/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/293298dc0704d114f85fd245f98ee8f21a3ea348/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/293298dc0704d114f85fd245f98ee8f21a3ea348/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n|----  | -----------\n| `--mdc-typography-body2-<PROPERTY>` | Styles the typography of the formfield.\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.22.0-canary.5813480a.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-uzSXM9qnEHewlALxYJ3Tk7ReyWGXtjhJu+diIUP4bwu+hKxStatSEojc6313HwfvvnJ7s3fIkJD4aiJawfc+iQ==","shasum":"8602e800d35f9c04ade67f7e636857a40581153b","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.22.0-canary.5813480a.0.tgz","fileCount":13,"unpackedSize":40650,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkuL3CRA9TVsSAnZWagAAXNoP/A1RghzZziKFuCuQUMlN\nvDsiRbn1el5sQMesJ5iHBiU642nXKhrw9Gq7EY3a0eqhgEpbiMpPz3FXkemb\nI7vlyQ7QeR2Yw1FzXDIAwJwOVbab0ANshEDvhHe/DhH5x0bdYpKbKluj2saS\nyCURoAiCWftDSqU4TGU/1L+s0ki8N0YU6Yx5uxvsom7YDg8pMPtbJA+KKbGr\nZChE75xL+/whkrj5xOw6weXMDgF8Rvnw5PSGoC29JDPz0Owijid1F5/uMWvV\n5gaKmAzdxqmyin0B6A21wHHQsYD1U8AN1h+h2Sp1BdBhRzW4hxJ3aVJm+96t\nbFo2/qBzREHFUoRXnoFrLgPp5vAUA5raIqlbm8hLJMzj5dWAgmvSIpF33Qwl\n5TX96MSOs2Dfz/WqAUxBzIpCa0a/SZk2TzLdFgEF7U2QZGZbFjz8NYgnIJSv\niKJyy6KpyF8UOykaRs89iMMIju9VZvmbWx2Aubd3WmLYtStJs9wBtSMZPEjf\nXzmJGeXfejRko0xUNbfWhqkl7xVT/K8OS5U1IPl22/awNVMl4+6G0PLMgsfZ\nndKXHSUAjeeNEiu8kbnOb3vYKwbnu/PkdCg8Adx+tbE4ng3s0pTPbZg0hAlb\nphd31Zn4XpYMYP/qAfMYWSCfESnaTZUGgNeF0F0maBDnkxinpIiQMa4uo3Iy\nQrFf\r\n=s9C0\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDcBsuleoD3meVXZBYwOpdrcvrEnUlgqkrXER+hxLG9IwIgGwWZhCDPUovvVAywAPkc9z6wMybHDWuwAo/RgJ6c9Fk="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"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"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-formfield_0.22.0-canary.5813480a.0_1620239094704_0.26097500278614727"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.ab7fc1bf.0":{"name":"@material/mwc-formfield","version":"0.22.0-canary.ab7fc1bf.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=12.0.0-canary.03f525f9f.0","@material/mwc-base":"0.22.0-canary.ab7fc1bf.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-checkbox":"0.22.0-canary.ab7fc1bf.0","@material/mwc-radio":"0.22.0-canary.ab7fc1bf.0","@material/mwc-switch":"0.22.0-canary.ab7fc1bf.0","@material/rtl":"=12.0.0-canary.03f525f9f.0","@material/theme":"=12.0.0-canary.03f525f9f.0","@material/typography":"=12.0.0-canary.03f525f9f.0"},"publishConfig":{"access":"public"},"gitHead":"9aaddda989be6b623f728abc86d48adf169d6f69","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9aaddda989be6b623f728abc86d48adf169d6f69/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9aaddda989be6b623f728abc86d48adf169d6f69/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9aaddda989be6b623f728abc86d48adf169d6f69/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9aaddda989be6b623f728abc86d48adf169d6f69/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n|----  | -----------\n| `--mdc-typography-body2-<PROPERTY>` | Styles the typography of the formfield.\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.22.0-canary.ab7fc1bf.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-W0UBeb1hjbW1/c0MXJuYHt4qjSEBBYSG/A9mHpIdxYmL9Mtq9rXvsv9/dKmmDZnJvOjuGdVLu35+n4iywhvmcA==","shasum":"284caf7ed324bb098d8136180a2df976b761fcc0","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.22.0-canary.ab7fc1bf.0.tgz","fileCount":13,"unpackedSize":40650,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJglC5RCRA9TVsSAnZWagAA6HcP+QDhV+5kvijifVl2etfQ\nhVzCBOIc3IBtwo0+dsQ6+qNiWG8Rj0ThVPxc3Qiv/9BvJxzp9xJAgnptPKMI\nUvuoeMKR0hb1cx/CEwnBuqNc+baxavm2T2hfgBBehEJng1d3APHUwApBtwbh\nU2Q7gvq3iaaFxAw2CWrBN5TGPQmnaOgmuF6J6jldUgd646LvS94ifY6ciof2\no8Rv4g7Jn1kKLzzPr6Y3bOflg0e8EXdgMTja5xnS/FDQujX3y4rcvEU3Sr6c\niGTocH54IidVyOJfI8gBZH4fYDMb933tUSyLawEK/OvrRoR9CctmSqeuWKe2\niaCMVEB4gqURlR36T32MI3GT4QfqouUjnASE1b/38+Mw7VgzmQs5ng99xFUL\nCQxv6aQ5KAmZEiBJVrAlBpzK6gzliw58z0woGgWohuSFKD3HZ4EQfKHefm+S\n3jKsk6BNY/PCMxoXD+v8Au7m6SvKJdbrzydcIJKlghg9jcMOZUa7nKFrohB3\nd47QuL4gruHFtHMYqm4uGCcR4bTz6WDPmFRl3KKEjb1t4xuFi4BTyKcPoI1K\nrWFur2oapUKH15Ig70bpZYC4bX49VwGGbloZxxNKhUbLQH0UH49zfxbBISt1\nUCqoXypSMImOAY6SiqdZ9DMNt09QseafGM+BMJVvM7aufGMZBlIctye2F/T2\nHQQz\r\n=+N0u\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDVgw6zQ308w85IbOuEA0gzYdpNXozw8YCStVNbtdJHSAiB9+oXmSi2JbS7IFgKXPa2JGG8vmUVcxsNR6KbNRRzAFw=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"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"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-formfield_0.22.0-canary.ab7fc1bf.0_1620323920992_0.8624943716638747"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.25693d60.0":{"name":"@material/mwc-formfield","version":"0.22.0-canary.25693d60.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=12.0.0-canary.869d890d4.0","@material/mwc-base":"0.22.0-canary.25693d60.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-checkbox":"0.22.0-canary.25693d60.0","@material/mwc-radio":"0.22.0-canary.25693d60.0","@material/mwc-switch":"0.22.0-canary.25693d60.0","@material/rtl":"=12.0.0-canary.869d890d4.0","@material/theme":"=12.0.0-canary.869d890d4.0","@material/typography":"=12.0.0-canary.869d890d4.0"},"publishConfig":{"access":"public"},"gitHead":"89015755bc4d93aab59cd46274331e3a6c467896","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/89015755bc4d93aab59cd46274331e3a6c467896/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/89015755bc4d93aab59cd46274331e3a6c467896/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/89015755bc4d93aab59cd46274331e3a6c467896/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/89015755bc4d93aab59cd46274331e3a6c467896/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n|----  | -----------\n| `--mdc-typography-body2-<PROPERTY>` | Styles the typography of the formfield.\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.22.0-canary.25693d60.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-jMXGSDAB9pMJ8qCUZ89y0hxa63wO/qajfQZgxqUQ7objdG2QzVboD9ua10PPGN9ZxlA8qqtWcTJuWEBLUhDCew==","shasum":"dd98d86f29878e7913d874d52586376ee73f5c28","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.22.0-canary.25693d60.0.tgz","fileCount":13,"unpackedSize":40650,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJglbdRCRA9TVsSAnZWagAAmZ8QAI2XifkaawEpx/ZQn1fG\nCtpE5w3jY9u+pZ9qIxURrdvijOaN3U0thH58OxhzukHrlS/rxBd5xLB/57Rw\nQnp5CGMfocq3cYxtpXrGPWeNgdfuPNebUw4xBy6YiPuVBH4B8VAc945WjG6G\nv+HHfo2gJp33saZkpnAMyjOTyN1XCKGsn7luvWdlfLxxXhHgSA2/hRXTwwEU\nwv00kRsownxGaIK8yVO2U93kIPXG0QLK7Z/2+HtqAZrQfStGFvFSAcBLuvfs\nxzlmhJU2O90BwjGIt8TZFuIX/QHM4orn4o3qb4WFupTHJ8dMb83+pbA1nsxH\nN7iGbXUOYSIle+r20+VhQrd2UWsaGuDTTHJMIkTdixWzPXadVKJ7bNmp5XYY\nygJLNZsptTR/ADzBMUJT8ISXARd4zZTEe/m1UUYcG6RHmCtOS1KKYqN4dEnI\nbx61jZ/C58lNQ8nYig7bVz3nMcp00eiTHRDDTfp2oA3Esms4U2+Yer/2DIQe\nD6Bf1KkrDnLcS7NmTYO+xnlAjNx9mZkMRVPqrKewDzqhT0vVUSUrEPSqns9S\nN1oL9zRotPBw/3xFA6O0N6SGCn1VlM/kJ/c8KKZj1Jo3bLuo3BIf2XU4DNym\nKKYUK2dif8lZZfXqvd3Geh9AVobmxCs1RhQDUunyCrQv4eREgqe6VeAYpo3L\ns4hS\r\n=h3Ps\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDcHytS3PD1XEGOvq99G0Qt3Rb7sV9T/HJBFYGxFg/lpQIhANa5JDN5wYfVgk4ir2+sNV00ky1OZr1uFGcDArubKlh1"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"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"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-formfield_0.22.0-canary.25693d60.0_1620424529327_0.3619334855440093"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.c497962b.0":{"name":"@material/mwc-formfield","version":"0.22.0-canary.c497962b.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=12.0.0-canary.869d890d4.0","@material/mwc-base":"0.22.0-canary.c497962b.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-checkbox":"0.22.0-canary.c497962b.0","@material/mwc-radio":"0.22.0-canary.c497962b.0","@material/mwc-switch":"0.22.0-canary.c497962b.0","@material/rtl":"=12.0.0-canary.869d890d4.0","@material/theme":"=12.0.0-canary.869d890d4.0","@material/typography":"=12.0.0-canary.869d890d4.0"},"publishConfig":{"access":"public"},"gitHead":"be15d892a32bdf28e42617b44e38b301b0ea590c","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/be15d892a32bdf28e42617b44e38b301b0ea590c/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/be15d892a32bdf28e42617b44e38b301b0ea590c/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/be15d892a32bdf28e42617b44e38b301b0ea590c/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/be15d892a32bdf28e42617b44e38b301b0ea590c/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n|----  | -----------\n| `--mdc-typography-body2-<PROPERTY>` | Styles the typography of the formfield.\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.22.0-canary.c497962b.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-NOl3SU4WwmfUYKsRYFKL1T2a+r+ypJ7Lq1fXZBALGW5r32vRffO8/pmyJXBT4GULWAKnyuB98jsgh0KdV1dazg==","shasum":"d43bf283ed95f8f8e3ba66d32562ca9e8b6c0d25","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.22.0-canary.c497962b.0.tgz","fileCount":13,"unpackedSize":40650,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJglbztCRA9TVsSAnZWagAApK4P/1nZkU9mxRuGgzIU1Hpv\nl9bPXIaD1EJjfLeSd9dO6WMDdfZWQD+XTK6F17DdD9X9eJY5g+C5oA5z+KVG\nzHuriye+tmWm0vL+73NX7bt5059PtBK3lJRnUy1gXBmoT+XSE7vbcTY3WfRf\nO8CN4YhQ1qXR9VMk6Nxn6vMBAJSWfzv+oTJJ9OLDVDivvHAWaK7QC9TiQFQA\n+DVp5VGbO7Fn87JYornM2d+dSI7cSbH0ymdwN2RsQN+OdRnDJSlUzgWebJL1\nqWkX0plcdxWVbHJDk1AkjQyCm3t5HkQBCaEoNlioHeSZVRC/gcKuq9gXzpIf\nujGRCx9dNZp9IsKRagvnnVkk5Hf62oNK01aAVUzNe81Cu/NRWAIALMNMHdKp\nFsTUfa8gxoD2naZLwidNLFycxI/MwqF5g1D1c8eCsYtzFYVkp2aFrz4eOJip\nYjvzFryTBKu2E1xY5v5UUpZrYP5cSiFxeN4z9P6/EamFaktS2Yg9bgvksvi4\netwE1o6pgTI8gjf72nsVMRLiUHKlNwRqFpwXHjzENSfWv/oaPwqMY/OI7+aN\nqlAMTC3ySH+5YfoHV+Ln3FwBKWjWGzG/HyH5G93cq6JqefTE3VkZODMuTkJa\nNIlh8YC0T1gHUZk2Ow+gyihSTJHqWah0NIe0+2YN5jKFMNyxtk8xnZAAWx7k\nPVSo\r\n=aSM4\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDGyBli4ETCj0EhT/lS5RHwKf/dKw8XhsOoCkF7EDRAuAiEAkJi95gY22qKQB/R1XQNwNN0krAottuUwe7N7IcZKJFc="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"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"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-formfield_0.22.0-canary.c497962b.0_1620425965036_0.3178611864837775"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.e300688e.0":{"name":"@material/mwc-formfield","version":"0.22.0-canary.e300688e.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=12.0.0-canary.869d890d4.0","@material/mwc-base":"0.22.0-canary.e300688e.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-checkbox":"0.22.0-canary.e300688e.0","@material/mwc-radio":"0.22.0-canary.e300688e.0","@material/mwc-switch":"0.22.0-canary.e300688e.0","@material/rtl":"=12.0.0-canary.869d890d4.0","@material/theme":"=12.0.0-canary.869d890d4.0","@material/typography":"=12.0.0-canary.869d890d4.0"},"publishConfig":{"access":"public"},"gitHead":"94ee5e4aa5987e14fc749785fef3b65b73185c74","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/94ee5e4aa5987e14fc749785fef3b65b73185c74/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/94ee5e4aa5987e14fc749785fef3b65b73185c74/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/94ee5e4aa5987e14fc749785fef3b65b73185c74/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/94ee5e4aa5987e14fc749785fef3b65b73185c74/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n|----  | -----------\n| `--mdc-typography-body2-<PROPERTY>` | Styles the typography of the formfield.\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.22.0-canary.e300688e.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-fg+Abh69r9EMdpBPPiM3YbgPkSJ+XSvLsRCz2CU+NtYZvime5eIzw4gFRUSy2VjXWziyNrA9s0jCfbP74GvDXA==","shasum":"993a73f079c4f7f427538ca8457ee4a7412f441e","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.22.0-canary.e300688e.0.tgz","fileCount":13,"unpackedSize":40650,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJglb35CRA9TVsSAnZWagAArRcP/1vbhm4Qxm9vtebi4B9+\n6sNuh4QOouAklhwznjczPHboYYiCXz2/kP3Mw0PIB9loWZWhbZD5q/nOU26R\noIGg2SzDzndspsqUCVhh3YEs37Tulenxso31J+tNtr3HeQb2AW4QscnEwULr\n2l3KCz9RQ1dtPcySCwTdNdZHoV72uFHz9p9odtT3Qf+Kak/Qa+l3KXNt3dCF\nkECLZ7HxnEcQcBed0/YTwwayDcUtUadn5pcQowGhAOmYIsDTzixNacZce9fx\nJj2Gm9wNRBWak4UXtUZzikV4cEG5TT7dGPJDdSyuOFuKJO9opizVUkk3Ha0Y\npIiI6YO/px/jGFLjhgnaIAGa/Z9VF73LMlcU8BVyficqdpfS57HSixmlL9eF\njW9eZhlel+5PJih5Ah9COisxWxMsg9q04QLgykn3NMQ2PQEhy0sKo6IBjAt8\naui9sl4DuvLznAHDBOV9saqqOrlswWE+M6M/dPiv3IVJbcZ45R3ouYB5EQyo\n1GEC4sTRPXeovDlQiAW/CyuqwQxEZmOngjbdg/26Ku8XDqbarHkIp5N+A2H5\nYmmdVfG7Ssjmw5GCEuqw4LTlf4E76ZCfJLZ8mbk7Jh6C4ce06GN+XzdRHyoI\nUJSWo87kBfjBZcVV6Smg8bdUVt7sojycCrxsRrUt0MMGoqpTFsH8443V22BR\nTPRN\r\n=XQju\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHAMFYa1qscxRRxFumqhneK+JjfyFTBHFp4HCyAhhw6LAiEAv8fZPQxDBfmLDLupI0HGnay88DYfFrw22RLge29DDYg="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"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"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-formfield_0.22.0-canary.e300688e.0_1620426233478_0.7422091976916267"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.d70287f2.0":{"name":"@material/mwc-formfield","version":"0.22.0-canary.d70287f2.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=12.0.0-canary.869d890d4.0","@material/mwc-base":"0.22.0-canary.d70287f2.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-checkbox":"0.22.0-canary.d70287f2.0","@material/mwc-radio":"0.22.0-canary.d70287f2.0","@material/mwc-switch":"0.22.0-canary.d70287f2.0","@material/rtl":"=12.0.0-canary.869d890d4.0","@material/theme":"=12.0.0-canary.869d890d4.0","@material/typography":"=12.0.0-canary.869d890d4.0"},"publishConfig":{"access":"public"},"gitHead":"17a229885fc92f311534b89a9df6549e9b78c204","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/17a229885fc92f311534b89a9df6549e9b78c204/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/17a229885fc92f311534b89a9df6549e9b78c204/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/17a229885fc92f311534b89a9df6549e9b78c204/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/17a229885fc92f311534b89a9df6549e9b78c204/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n|----  | -----------\n| `--mdc-typography-body2-<PROPERTY>` | Styles the typography of the formfield.\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.22.0-canary.d70287f2.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-WmP3lCz+E4xmuMdX1RXoCnb2YpdLMTXc1VadRyitjKUGLWcHdVQEY5wnDP1WGXfYqLBa156676bwSV1wdgv0TA==","shasum":"a55404e03a429e9c3900a0464db4bf3fcf9f6959","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.22.0-canary.d70287f2.0.tgz","fileCount":13,"unpackedSize":40650,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgmYluCRA9TVsSAnZWagAActUQAI0qbmv0/SgS+JhNy0AB\n+N/MuGPmDpvp7OM8dXCg2Gp92FqeYfQhB1Cfj67fG0rnQ2ECWe7gjasZeVVZ\nBKFlpngO9UZ/8opGx4VqMbqccVpMPkICHl1Tw4RzgDD0SsV/+Bal2aXAuRps\n3rcIDIDvumx8vipTvtT/LrmLq9CysvP1DxqYRnGDTEPbPLQbh+CDQTkQM/Cu\ndtpjlMbowAQkTG+4d649i4ik1IgbouSvNL0FAY397GwaSqEg/8vaQVhIvLmh\nD7DyjJ9J+ptNlU1r04HYJr9jhaNlL+yqJiPOl3T8wddh6COKXZEqZRXxsoug\n1+cccsBzqOaAbqSoLjhN5i5D87cOsF5QCppvJvuqbSAAIfuzL/Yb26uP/nvS\niKStnmLZMKJ9I1+gaDmC143qNEb6CXLX8M/m8907TZwVmb66kDoXMYEkdT4a\nxNof7BX/PrxNGiW32yk3llF7DQsj3cLDy02gIcVE6XRxKF8kIyE1RL+8s0/g\ni7vgCstfmncPqWQUTiTkZ2xgLnzXEByWNLQ0kTwyoxo0ciZ82dXKsXkKpqNp\n311T1a8BEjC1PMwuHAvzQm53/oJ1DnffD37234OX+a5X6GwOu6XJTHHT8hOr\nY9dNF7gTS2VzWqaDqeaS43q+blcj2SJe1MzK4U45u1OznejEWGc1Hx785yLN\nbfbN\r\n=zkYP\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIE9WyeEfPS6JVOVvGKDjoEDHSc47NURSNut7zKN3cURoAiBvhzAa6sLHWoO7QYFhDQX2MDqY2fBmYYDATppq8stpKw=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"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"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-formfield_0.22.0-canary.d70287f2.0_1620674925762_0.4560912297824198"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.02e841b2.0":{"name":"@material/mwc-formfield","version":"0.22.0-canary.02e841b2.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=12.0.0-canary.869d890d4.0","@material/mwc-base":"0.22.0-canary.02e841b2.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-checkbox":"0.22.0-canary.02e841b2.0","@material/mwc-radio":"0.22.0-canary.02e841b2.0","@material/mwc-switch":"0.22.0-canary.02e841b2.0","@material/rtl":"=12.0.0-canary.869d890d4.0","@material/theme":"=12.0.0-canary.869d890d4.0","@material/typography":"=12.0.0-canary.869d890d4.0"},"publishConfig":{"access":"public"},"gitHead":"10f49288fa74318f178daebc0299b7da22137eae","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/10f49288fa74318f178daebc0299b7da22137eae/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/10f49288fa74318f178daebc0299b7da22137eae/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/10f49288fa74318f178daebc0299b7da22137eae/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/10f49288fa74318f178daebc0299b7da22137eae/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n|----  | -----------\n| `--mdc-typography-body2-<PROPERTY>` | Styles the typography of the formfield.\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.22.0-canary.02e841b2.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-9SU5KnIJ6GnevY7jYLpSFe+/UYSZUFnLprgTB22MeF4MbLq5ycmRvzde71xEn36MQQWkuhO1bAgCALxOJ8IfKQ==","shasum":"e0f6cf4d25993da6b8e951428c98a85e85f0588f","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.22.0-canary.02e841b2.0.tgz","fileCount":13,"unpackedSize":40650,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgmZi7CRA9TVsSAnZWagAAnwMQAJlNWpbn18YVZw/ggU+T\nNvHkZIYSeBeHzspIYbMCX0LtSixYQeedZ9rvwL4g9cKkbdd6vv4xvRVJaCRM\nN/ht86jIueRB+f4cm/ysXKeJtXSYGtm+M4zLSgwO0czj298rb90iNGSpptRK\nXhKe0DmoRJC2N1x1E+bSEQfMMu3w51rcOp+xVkJil326aJVHRT+5wwwVqcud\nXk/XQnlPHiHo77Tk1oSal7LWY0d4JrDLEc+oOtaeHk95RBKQbLMqgUcXqcLM\nYZ4Csi7yPmOG/MDwnYWBjLflsyozTkJmq0/irawzzDsZoQ3MYSlyoSfhcwwn\nmGoFQlzwquOWodxbt8WON2ijVbyag6EevH2lxmOZxBH3feJe8qR2eAS19eSC\nHpzSkAihuCg0VKFk44HIw5AHgq1roXcx9ltvb1HQGVcmL4pKAkWG+qscSc0o\ntztMmIoLqVRZjeOfbQRcPjbhi1b1CGRLVAyelhWSPyGyz75gOMF5w9i6W8o5\nGbuOZXw5ltWP0mv317l4MWT0s87wcPkbB6h07Cgvf9vejnUa8QHGlAfwLifW\n1TPWwgusdHMvznQ2L1pAz20xt4xXfrNtWtv8c/YBGdatOePssVAvqA6jLRPe\n7THEJ/kYAa4WjGNYbWvYytMI39hiTSf5edfl997sTyE+06cWaU8gARzVNxRb\nt576\r\n=Y6RO\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAdDwFPogzv55cl8nJNNZi2Rcnl+7wGegNlLeLMyVnkeAiBuKDY61tGlGgEDta1C4n1PiYItHXarqvaYmJ/eAubEZQ=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"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"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-formfield_0.22.0-canary.02e841b2.0_1620678842663_0.17626875004694553"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.badda2f0.0":{"name":"@material/mwc-formfield","version":"0.22.0-canary.badda2f0.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=12.0.0-canary.ec22e1da9.0","@material/mwc-base":"0.22.0-canary.badda2f0.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-checkbox":"0.22.0-canary.badda2f0.0","@material/mwc-radio":"0.22.0-canary.badda2f0.0","@material/mwc-switch":"0.22.0-canary.badda2f0.0","@material/rtl":"=12.0.0-canary.ec22e1da9.0","@material/theme":"=12.0.0-canary.ec22e1da9.0","@material/typography":"=12.0.0-canary.ec22e1da9.0"},"publishConfig":{"access":"public"},"gitHead":"961b6b76093a7229e8b8672e9dba3c2f9af0e61b","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/961b6b76093a7229e8b8672e9dba3c2f9af0e61b/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/961b6b76093a7229e8b8672e9dba3c2f9af0e61b/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/961b6b76093a7229e8b8672e9dba3c2f9af0e61b/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/961b6b76093a7229e8b8672e9dba3c2f9af0e61b/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n|----  | -----------\n| `--mdc-typography-body2-<PROPERTY>` | Styles the typography of the formfield.\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.22.0-canary.badda2f0.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-l3nuIPCBtzqX0tua3s+mHOa1MqM3J8vgHcSghgvNrxEQE6NMgiiHaTGrwTdvdTxZ4hNjYPeqR4go2DaikO+VdA==","shasum":"b83cf4bf263b72c3650a518dcc01e783a0e36f1e","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.22.0-canary.badda2f0.0.tgz","fileCount":13,"unpackedSize":40650,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgmdEBCRA9TVsSAnZWagAA0+8QAIgSPd1AcojrGRdbyVBv\n5B2nFw3m6oHY+ZOvmYd2NyDUSt23C9Nxp9KBxcNmKShH0jxOuzyl2gzXE1MB\nZTW+ncz+EN0eqsW/6c+6YOIYYvAS5ZbYftbaPzfzE7sWch3caR278kA8uFmX\nKxnFj/VZUStYqiIiDyBbCc0KMUm26J/1Jp+vBfuXRm67DwWjBICHlNm1bv61\n0LLNzd/aObL1cKyhDJVcHnlD7KHpxqKwcL2WVdLWcV4Am2eQ7UlqlsJyeQ7p\niWz99hbZbNyzNaqkzaJksNEplNhUrQiJdb+lywK44Dgs5pfxkQoCW3l0ZspT\nihAp57RuoAdW5SzwWupQ/DieXAhjMQZVvxiuYhHqBWZYDb+Z4xl9Lj444MBP\n+Lgppx9F2Rf7Ytsh+PNsSfFr75Ec9r8nn3voCbRDelYujHc5Pb9ztahxg+5H\n1KIS/Sg8IM510fuopX9j+fCfQJpCAlzo1yGADvl6wYg0u54Fjo8DI+Ml2djy\ne/hVvsqABBvXwKF3pcZ6VFuYIzgAKajK+p/oFl6LFoDBUfNzbyn1PQssp1VT\nYt/kQuNxKszyCAJl21n+feq8mMgxL/a3Wxi/KVsJSARoOSyTXvcEXKIfPBh+\n0DZDdeOPF8TLBeR9ojjHsPpab6dS7fq0mPiZB3WplCGDtleFIZ3ZYIpPpyZn\nSkPG\r\n=UZBk\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDXzAGsFzlyGnOMl54PQNI2g9zFGcqru55Mr6VuO0LNNwIgeXjl77eo/JXLhtpB1JAgIk30X7d8ankGT/7tRAQR5F0="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"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"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-formfield_0.22.0-canary.badda2f0.0_1620693249243_0.4789087265364924"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.004aca62.0":{"name":"@material/mwc-formfield","version":"0.22.0-canary.004aca62.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=12.0.0-canary.ec22e1da9.0","@material/mwc-base":"0.22.0-canary.004aca62.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-checkbox":"0.22.0-canary.004aca62.0","@material/mwc-radio":"0.22.0-canary.004aca62.0","@material/mwc-switch":"0.22.0-canary.004aca62.0","@material/rtl":"=12.0.0-canary.ec22e1da9.0","@material/theme":"=12.0.0-canary.ec22e1da9.0","@material/typography":"=12.0.0-canary.ec22e1da9.0"},"publishConfig":{"access":"public"},"gitHead":"3c20c30c670567ff3483811cc2d47a795de96151","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3c20c30c670567ff3483811cc2d47a795de96151/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3c20c30c670567ff3483811cc2d47a795de96151/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3c20c30c670567ff3483811cc2d47a795de96151/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3c20c30c670567ff3483811cc2d47a795de96151/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n|----  | -----------\n| `--mdc-typography-body2-<PROPERTY>` | Styles the typography of the formfield.\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.22.0-canary.004aca62.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-bXpqs8WDUPBYRsoEPt1gyOf8oNbFGjNawZknoU4xmSe24ZQMRuD550gkPNYoanZUxnCm5BDhTmYW/4J+st8KXg==","shasum":"0e19cce32950541c4725d281b2abc50c6b8c33e6","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.22.0-canary.004aca62.0.tgz","fileCount":13,"unpackedSize":40650,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgmsd+CRA9TVsSAnZWagAAz2YP+QAU+HVQzjvBFjR22Yer\n5OU7vQw10dN8v0WiZpOlcURaMm8e10XzDqRYu87YP8WCME4hx8tzP7YGZTCI\nZuYLDp1/xq75nzolytnfVHWbY6m60DOma8OYqzqOWXD++W6kZBAfXRhTIGPp\nptBiV6t4ocIpP6qVCViRxJJ9US/aIfHae76VsKi20ccsRwdyZ5ynJGOnrKGA\ngoUt/J7Ugs75sTVB9Cq16Y1q26sITz1u8jIGkIHgeF3dba+bvepckySdUxHj\nujjyRRBDLXRXlm4axfLg+U2QUmEv6R03MTqHjRvm/rKzrsUrhiBuWw/RSn2g\npmULfiY3Kbl+LVItsIrkngXHQSpeOgdR4BhtTFnwmMnHCOhF6KqIWnRMARFB\nNqF/CJLN3SdmeSEk7opzIYIp9YN4Fe+W8aeg7J9Z0w6XMyD9iwca+wKS5t5u\nkZrgu//PEgwcHq7zgll4NPF7YS5boMYk7M20bPicLZ0MWb+W2Yg4sgS9pT1/\n3QpeZpkJINbx6mCuQLaf5Qj/ss6XVjmGTftJHEYjaQhs9lu2b4J61rbsad2n\nm5u//s99WNFmIFVKUoCXV92g6yWDieXGrDdg2Q2tzDhTOjfz7UuDtlfry693\nMsePLisS2yHk7aQ+yefB54WrZZpgXwECeQRAMm7U45ys0FvjTZeoeoblp197\nWQOa\r\n=PXQm\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC09rfpdCrDhS6B7tD0rThNGx9F1j9gZwpSfNuw59yyrQIgA9/ujoh9IKIMsTs9/HGektJfcSrbjNppKo67W3jhbd4="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"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"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-formfield_0.22.0-canary.004aca62.0_1620756349963_0.5240750038422608"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.4af17446.0":{"name":"@material/mwc-formfield","version":"0.22.0-canary.4af17446.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=12.0.0-canary.ec22e1da9.0","@material/mwc-base":"0.22.0-canary.4af17446.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-checkbox":"0.22.0-canary.4af17446.0","@material/mwc-radio":"0.22.0-canary.4af17446.0","@material/mwc-switch":"0.22.0-canary.4af17446.0","@material/rtl":"=12.0.0-canary.ec22e1da9.0","@material/theme":"=12.0.0-canary.ec22e1da9.0","@material/typography":"=12.0.0-canary.ec22e1da9.0"},"publishConfig":{"access":"public"},"gitHead":"8065f1d05fae5a2ca4f95b50302cd5d56d43ea4b","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8065f1d05fae5a2ca4f95b50302cd5d56d43ea4b/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8065f1d05fae5a2ca4f95b50302cd5d56d43ea4b/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8065f1d05fae5a2ca4f95b50302cd5d56d43ea4b/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8065f1d05fae5a2ca4f95b50302cd5d56d43ea4b/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n|----  | -----------\n| `--mdc-typography-body2-<PROPERTY>` | Styles the typography of the formfield.\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.22.0-canary.4af17446.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-fXkocVDF6vZIHl/ss3oSeCAHZkZCEvMTg9XCezH0LZLb6r8SuqpAEdzqW8ecu12LTk44ztjnixVgqN8nWgVt7Q==","shasum":"0a65453b168104b37209775a241438e76471fd03","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.22.0-canary.4af17446.0.tgz","fileCount":13,"unpackedSize":40650,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgmtDRCRA9TVsSAnZWagAAbIIP/AoeSy+jxjN4PphvrGda\nPL/vmPN1Hyp5HWX/gDJpffVQsy+T0aPnVDbSqPu3s7sio5Un1IlT+gGsKQhM\nNSTCBvHwkuZm6FcjEHkEF6kjPnPNr4hp9HHepbhKWg0rZv/PnuTHs/INvM8m\niq+qoubgkIk/qX65ipMkHNNpQtcZZ2k7hMGZ7gE9lwherL2U3v9zzBQptjCW\nRy8HyFU0YQFvntu+aNPyUH5dqmX8t1JnA7wUZsrhIVJuLGL5UkKgLpnmIP8X\nYWMr5+Euvmlg9rGVyQpi2clHcl3odJCOOwNr0C7x2z5xc6RE3/0o7F+NaCli\nvpVX/S+DZfD7oWdghf8E+WWnBKP+bPO4YmFcDytyxloIGiWL+C3o8BWK6adW\n8Dpaye0EWGZE3/7wIGUH1MpAYewcmE7SxzCeBRV9IVIwch7LwBIbRdK4N3o7\n81z0MfFveQbwJ3xkjXZM9PB4ayDXcXnwFyGJJUj3w2NciTWnznxrNqwKIh9+\nVj8cvHwkqbIQu0Wec6h2xr45yrtD6c5TunMQpbleOluuZzg/yKxNp4uN13Mh\nD4LjXE0DcrKL5YWMSXfWqwLOMSDkFaBja/bR0rOYBO9Jh2NAHN+vFcUkurI7\nvcPs8VnV44ZKnGU+LFIbvuHDbPWG2lLFTwHIln4w3lesJ/DbjyNNpXRHa41W\nLoQg\r\n=ugev\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFWB3F3dPUlmXn5zgXftHWW0ZLzGLufFh1wtvbxAgevUAiB99e+VLDlWsHT3ejrDlgtXqocKFtXq2B/sIOIuOpNOpQ=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"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"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-formfield_0.22.0-canary.4af17446.0_1620758737220_0.00798950061032122"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.b94d7187.0":{"name":"@material/mwc-formfield","version":"0.22.0-canary.b94d7187.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=12.0.0-canary.ec22e1da9.0","@material/mwc-base":"0.22.0-canary.b94d7187.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-checkbox":"0.22.0-canary.b94d7187.0","@material/mwc-radio":"0.22.0-canary.b94d7187.0","@material/mwc-switch":"0.22.0-canary.b94d7187.0","@material/rtl":"=12.0.0-canary.ec22e1da9.0","@material/theme":"=12.0.0-canary.ec22e1da9.0","@material/typography":"=12.0.0-canary.ec22e1da9.0"},"publishConfig":{"access":"public"},"gitHead":"0b32af6d751df8cf58980e7badd64494f9396b00","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0b32af6d751df8cf58980e7badd64494f9396b00/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0b32af6d751df8cf58980e7badd64494f9396b00/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0b32af6d751df8cf58980e7badd64494f9396b00/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0b32af6d751df8cf58980e7badd64494f9396b00/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n|----  | -----------\n| `--mdc-typography-body2-<PROPERTY>` | Styles the typography of the formfield.\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.22.0-canary.b94d7187.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-vZ3A/V5E3UZHkEVeeRoy5cd6GMD/VtElI0G43hMnoL5KkhKXa8AU1ZtRmccKOU3NAtMT/0vp4f+PrRswTcFjOw==","shasum":"1f6029be3b553a13bc97bdd6635272b02a06a5b5","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.22.0-canary.b94d7187.0.tgz","fileCount":13,"unpackedSize":40650,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgmtIgCRA9TVsSAnZWagAAIbsP+wRKdwIxzYa4gq4+kpgA\nef6gNry48I9YtIC4Mz4vUjhOD6UJBVzsjTs97c6Y1WgKCcI1iFDCOnrBMolp\ndPoqOzrX/NcCAD2F0HvuJPWwO0NTE4PdP6itmTUjeJcHstsWp6CEo1qtz6fv\nNko9er7ILQMWKVrO79G9SA0BR2cKr1StTQRYwt/mtzRzCMYLFyZ/mySTF514\nSEX/tg0cTSaWRygcdcNQqQe7HmGpCHirKLzhJN5OXYZRslFCC3RuYq47jyCU\n3l7LFuN/6JsUcS5zSm1HGD6fxcu8ZYt++P9BcZn3vYqdXGUt++D3Ryagyh0E\ncUnVoKLbBckX+mdt0/BjdqboS7xB4/66yKyBnDZX85wc30jhEuJQ5XBj6bJz\nbdO+VS+lEXrM+H6L8N4uGszDOm0EdlfAFk+64ocLeShxG7CnrUT8Vac9SfiI\nt8drW/4OL0qiPVmoKHXA9MeSQDY6ogep+E1IOt2H1hyJGjhev3Vmmdfc41XG\nvLBwpIo42zHGfTcglqhIaSYoBvJWKLkAQ54bkI8gcnneUOT5DB7rghOJyAJC\nGW34UIS2TGXPYuZlphg1cqKF0uCQdHkoW4URTcZtmF9l7h7+1ZYqnS+uPXkt\nl7bVCZM47HZxW+xS4RWVYU/mJi/P/zk2s9KgStCFiESDWMZdqlE/ckWc9KJ/\nFpYb\r\n=BfKG\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDFFmj7soeHX+SWcI670gBAohi3cD4eweLbP/DL1jOOBAIgYLBlS/ZrVWP0nTs4U0Ug0nAKfULXRiXAvFf0B+4EeJI="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"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"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-formfield_0.22.0-canary.b94d7187.0_1620759072270_0.623756192019316"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.4021b2f9.0":{"name":"@material/mwc-formfield","version":"0.22.0-canary.4021b2f9.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=12.0.0-canary.a23ecb682.0","@material/mwc-base":"0.22.0-canary.4021b2f9.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-checkbox":"0.22.0-canary.4021b2f9.0","@material/mwc-radio":"0.22.0-canary.4021b2f9.0","@material/mwc-switch":"0.22.0-canary.4021b2f9.0","@material/rtl":"=12.0.0-canary.a23ecb682.0","@material/theme":"=12.0.0-canary.a23ecb682.0","@material/typography":"=12.0.0-canary.a23ecb682.0"},"publishConfig":{"access":"public"},"gitHead":"535a4442352f807e1f7e655d0a135c6d12906ed7","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/535a4442352f807e1f7e655d0a135c6d12906ed7/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/535a4442352f807e1f7e655d0a135c6d12906ed7/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/535a4442352f807e1f7e655d0a135c6d12906ed7/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/535a4442352f807e1f7e655d0a135c6d12906ed7/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n|----  | -----------\n| `--mdc-typography-body2-<PROPERTY>` | Styles the typography of the formfield.\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.22.0-canary.4021b2f9.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-EfPYybm41xR6hFsVKURZXie30eEI1Q2UmlsLh1FED7Cn93sCbrqvxPwOkFStbugSS714s7rnY0h03ZaG0jp7BA==","shasum":"2dc8a40b28d99d1f52da4a6f66f01c2cdbefceae","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.22.0-canary.4021b2f9.0.tgz","fileCount":13,"unpackedSize":40650,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgnE/kCRA9TVsSAnZWagAA7yEP/jd8iCFKdud16bn6LMRU\nJzNSoHPQdBToxIXsnUUnFmK0as6db/fBelzKw1P+eEe+zFANDsQ6/1pPV04i\nXk3k1oIlBDAu7ClYhWzzg0AuOrnx9pB2wr7/JCzbtGXiY2Cp0WneFLrK+Ii0\njMydV0y5rdHThph4TWgFw8X6Xq30Fany7hTH5oFCaZPn8lHEt41EaWNHdvaF\nk0+IYQK5WqpcRlqTT9XBVplWSnxK5AIcZMbvRW1Ilc0DnpXyJ1ORKvOrXwLD\nCHsc0d7fHMCF00wrv7VFPrRXXLmoq2kl7doLKrWmtLut8v54JnUX5+NqQyn4\nrVNEq2nxJxCWv0YSrHqkpsXMqj2EHTSBRfUwYGEYyWQmzhUqWkMUvBLwIOP/\n2x7c2SFi8UDwky9HNm6sXGyUkL9g5SQgNvm9Aolk7AudFKfvWQdbnaci5fUj\niyCQRW2NlrjUEBhdJF+KHiZvge373M/Wuke8CKNfK7ebBAIe/AcfEAVmHD1s\nc7jDX93ga0CQv6iwK+1Q4Q6JPIBJKqhYjBy92KkBc1SQyb6oRQeXuS/eX8pO\nGNK4SMhfaLOuB3j+HQZQsEfRmkSRTnhcb1Tgi5b8v56AgN95ayBThn18T+5z\nPqIRXMzQfPIw1QlRSBPTcp2L5haSxidfWdaglYhPCTMxm3LYGEtMPJpKesvv\naofY\r\n=y0ED\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIArtVAHcbzCacnBwwpAj+ulYnp2f1HKqn1+3sdnCobZHAiBVXQWc2lI1nMjazOMT8hvLQWKXH8O5M3BAwg5MoRZhwg=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"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"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-formfield_0.22.0-canary.4021b2f9.0_1620856803993_0.9135167155402457"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.6a5956a3.0":{"name":"@material/mwc-formfield","version":"0.22.0-canary.6a5956a3.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=12.0.0-canary.a23ecb682.0","@material/mwc-base":"0.22.0-canary.6a5956a3.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-checkbox":"0.22.0-canary.6a5956a3.0","@material/mwc-radio":"0.22.0-canary.6a5956a3.0","@material/mwc-switch":"0.22.0-canary.6a5956a3.0","@material/rtl":"=12.0.0-canary.a23ecb682.0","@material/theme":"=12.0.0-canary.a23ecb682.0","@material/typography":"=12.0.0-canary.a23ecb682.0"},"publishConfig":{"access":"public"},"gitHead":"1164d783391049aa2ff9412e519af87df40b5406","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1164d783391049aa2ff9412e519af87df40b5406/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1164d783391049aa2ff9412e519af87df40b5406/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1164d783391049aa2ff9412e519af87df40b5406/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1164d783391049aa2ff9412e519af87df40b5406/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n|----  | -----------\n| `--mdc-typography-body2-<PROPERTY>` | Styles the typography of the formfield.\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.22.0-canary.6a5956a3.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-J+enmdFHJADdIxXp3o6s56jqKxdu4mYD+Qu9HWgI7CElNPmzQbXGjQne0rRAulb09DqJgmDmmxUf+mLy3hwxqA==","shasum":"40fcddfc94c800ab2774006ba10259137c326ad6","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.22.0-canary.6a5956a3.0.tgz","fileCount":13,"unpackedSize":40650,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgnFPZCRA9TVsSAnZWagAAPooP/2Dzf0L7bqr4reqSjZXo\norltHgtO7Wgf+HGFg769RyvIvdedzYvYO4YYO+AenxAOR1FqI6465bKiO1O4\nqMrmLDii4FX1HR4VQm4LbsXZxef/q1icI8wIUFs8MEBvkU7cQCZ6dvkp8tRl\nitBI9kyA8YAd1kLr0m9WtHXzcuBtiLqb2RC/S+yTbttTTHBrmdWkUvVXAuLS\n5wdry1L9rhVCb1ZUr0Gz3fwSLV8p0ANwaD3HUS7qPXxF9PP1+2WttmjsYIk3\ne9N6a8fnfXt/N8XlE81uCsXhT8qZN/kF+JftXPLArzfDhQQrm2vPeWCOWkBK\nunqYwldr9zyZUEWZvAWKKTfVmo0SlwBLSXwMffsPTIhn2tItqOqN7sNthsCs\nHuwHKYpuQs54ZvU+T6YlA3DEN58Yj5prvpFjII2UGaUVpzqS36i0tGw275aP\ne/uhpGLOEs1+WhCByUr2vpzaQa8BzWT9jFlVboKxCxb8IZjw1LDS7i/QZkLC\nI70rmI/G3pGD7Y6vShTeo+h5hYwpsYQZ2f1G3ubkYDs6zxkiITgzZMCytK+2\nYT45aJUXlU7P4xm0khFVFFfRG/HtEcAU+h5wRYzeVbHhGZSvlnVNr1zWod5F\nvdC1ncYG0vzIOzA0vyW9tKMloa7PMGKHTsv7swm7MdHCJxncIxO/HKGAx+MD\nfF3m\r\n=lriN\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCID4TRRWQLHSEW3Y1tHckVgohx4dCyg82r0zoLvvyOPLMAiEAn1otJaIuZKOJ9OehpyShr/tAb2RYnLWb/ykbHzCmWKc="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"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"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-formfield_0.22.0-canary.6a5956a3.0_1620857817507_0.7780401036948668"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.b6e8a74b.0":{"name":"@material/mwc-formfield","version":"0.22.0-canary.b6e8a74b.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=12.0.0-canary.a23ecb682.0","@material/mwc-base":"0.22.0-canary.b6e8a74b.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-checkbox":"0.22.0-canary.b6e8a74b.0","@material/mwc-radio":"0.22.0-canary.b6e8a74b.0","@material/mwc-switch":"0.22.0-canary.b6e8a74b.0","@material/rtl":"=12.0.0-canary.a23ecb682.0","@material/theme":"=12.0.0-canary.a23ecb682.0","@material/typography":"=12.0.0-canary.a23ecb682.0"},"publishConfig":{"access":"public"},"gitHead":"09c41b7e9637c49faa75e5ac84cc73c8bb5f80df","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/09c41b7e9637c49faa75e5ac84cc73c8bb5f80df/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/09c41b7e9637c49faa75e5ac84cc73c8bb5f80df/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/09c41b7e9637c49faa75e5ac84cc73c8bb5f80df/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/09c41b7e9637c49faa75e5ac84cc73c8bb5f80df/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n|----  | -----------\n| `--mdc-typography-body2-<PROPERTY>` | Styles the typography of the formfield.\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.22.0-canary.b6e8a74b.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-lhSEJXtC4PhNh9ZGm133l3geAbiuD6bbXD6XfUiqjEHYxpEQK+15irgNlawphY7hAzyJ/jo1aqumdQe+Wx9s1g==","shasum":"4475ec1f6635d812a8f49304fcbdf3ce94feebc3","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.22.0-canary.b6e8a74b.0.tgz","fileCount":13,"unpackedSize":40650,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgnF6iCRA9TVsSAnZWagAA81wP/2p/JD7lt2Kqiw2K9p9V\n0nFz7qNQsZOFSqn9OUNWIpGp6A4No8Rn/V4Ba1wRTCFYWwIEPcb2w+JXpiJO\nZS5xT/x2d8Mcc2JTnVGo6tm9/t8R3vDsAF6Faiw/DDW4UkMv7JEdEmJEu8Lv\nqicoMntLYXNvJBIdq+VN71N4JD+GqzEGn+bGgexesTULsQEtxOh5wRHY4mhj\n+j+Y8fVXAFUfjBqHpsgGKhklvmmBuTwBpD91jiJM7XHdKaPdGoOV9460mfaB\npRgfdodT0FmJOBTpndrOkBjHcwyOnzrdPtsiradvcxo8Ead7HQNceSDhD8iV\n61bNIeAzroDFM7nnLLD+vUA/YzUtygu+ukCfW8eJnpcl7S5XmBC7sj/Rs240\nG98edYhiZge54a3Hx8UgfhiGPIDDmxSojomzMZrm7UjmTF+H9NkL9DV9wHdE\nlJPrWEhdDmivQw8xOj++e7KXuFZoW+gcMAr5SSOCTMKYCZWP4zt03CD6KfZQ\nKYOIb2fY2W5SwtTV8UurQuHGnkQTYQ0DzCMzSbjU/ng7sUAKkTcRft+CC7Gt\n4O6/u5f4Rj6jkA2+QnfL+eZ7EFMbEWb+JELbK2wd7IKbyshfGVkTCIl1SNjQ\nyfzK08odYMz9n/GVA273AExNdkwd6xACIGc0KWxITy6XlDy7viLr4frFj5Uy\n5Bam\r\n=5RIQ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCsaxq8C4bYZ9IKUZQ4D8NB1t3LHUWxdD2N/53pexYzqAIgGZfRwvj5PJJIdt5IxoU4RtQIBQReN+lDTvbBQu2mGm0="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"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"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-formfield_0.22.0-canary.b6e8a74b.0_1620860577475_0.15304391790421423"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.c94e1030.0":{"name":"@material/mwc-formfield","version":"0.22.0-canary.c94e1030.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=12.0.0-canary.a23ecb682.0","@material/mwc-base":"0.22.0-canary.c94e1030.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-checkbox":"0.22.0-canary.c94e1030.0","@material/mwc-radio":"0.22.0-canary.c94e1030.0","@material/mwc-switch":"0.22.0-canary.c94e1030.0","@material/rtl":"=12.0.0-canary.a23ecb682.0","@material/theme":"=12.0.0-canary.a23ecb682.0","@material/typography":"=12.0.0-canary.a23ecb682.0"},"publishConfig":{"access":"public"},"gitHead":"01e4fa09129b5963d59405355762cbd1962f1198","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/01e4fa09129b5963d59405355762cbd1962f1198/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/01e4fa09129b5963d59405355762cbd1962f1198/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/01e4fa09129b5963d59405355762cbd1962f1198/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/01e4fa09129b5963d59405355762cbd1962f1198/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n|----  | -----------\n| `--mdc-typography-body2-<PROPERTY>` | Styles the typography of the formfield.\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.22.0-canary.c94e1030.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-9dsfj9pHUaAzCvi5bmJnaf4amFwNm0ZwuShuCUcxDXldyBbT9XMA3b8CFLASqZoyBVeekN61q9JYNTT4F6Ge9g==","shasum":"a2d8d9c1b7afb5ab277641a6ba503201d65356d8","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.22.0-canary.c94e1030.0.tgz","fileCount":13,"unpackedSize":40650,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgnGAACRA9TVsSAnZWagAA7moP/iyklU49e/TURJFtAhEF\nBJ9xR2PJapIFB+ewBDFuSxNJpxRsFqSkCYBLOlLadz7pPnQFGrQkxclNzQ6e\nAyOKBOqpZIrcuAR46PHDo0xrwc/y9uXdIB44XnZuEl/imd9HG2SKnKg3hi62\nzd6Kgs0eFloXlwwCo2K7+RNeeNnkWLDYwLvMldRU08UR4QeIXcpCei5gSL9L\nmQLnFxR8EouHzHemJmvztpLUi/daHNhSnaDlpm/8ZhzKrKjUTyhUMOrSGvOA\nSvo6ghgE7Oj8M9HiQLHTTSrTo9mPuN+BlvRLs5bv/tW8Xx+REFTc5Vx8YlsQ\nwA0/9FQBsSkYM+qHSq+lTBzSW7IeQ3GVvuKokiOdd/YoW2yZN1w1hRSADpPy\n2w2LdqS8RbJ7kevZZwDvsO/cGnGV9gzooyI/qfK3NeFXzx1VBdqlrri7Cuxr\nD27aZHGDdMioTyMHgBRIWOM8bdUqHsHTgHaFMvMmJBY4qod6khhaMpI72XUP\nsQqPG2l16OiNN/LY/hX69AcWMAe29xu8Rmu17eMo7I6Ne+N/ErrsvkhhU+nA\n6NLemt4qmGhED2J/hpx/uUBT/C/fLW8V7THpjU0nvkZ9ngcepPfZ+8/9iLlK\nHUJCLD5aFwpTrjGg8rteWLUGqVutPqhMza9vUTdzj/BkEDBcCPZklj7uAGwo\nJAyy\r\n=C7XJ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHm9ZY1uVEovRborgXSLsICltDI8Q2RGrkC5TuK8GaxcAiEAvAi7hG6DrlRiWZsZGhHHSUqcw6xxZ/Zbe/jdGNpu/OI="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"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"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-formfield_0.22.0-canary.c94e1030.0_1620860928028_0.9889336819379135"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.40a34e35.0":{"name":"@material/mwc-formfield","version":"0.22.0-canary.40a34e35.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=12.0.0-canary.a23ecb682.0","@material/mwc-base":"0.22.0-canary.40a34e35.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-checkbox":"0.22.0-canary.40a34e35.0","@material/mwc-radio":"0.22.0-canary.40a34e35.0","@material/mwc-switch":"0.22.0-canary.40a34e35.0","@material/rtl":"=12.0.0-canary.a23ecb682.0","@material/theme":"=12.0.0-canary.a23ecb682.0","@material/typography":"=12.0.0-canary.a23ecb682.0"},"publishConfig":{"access":"public"},"gitHead":"6cf3913b43a92723ad4d1144b964df3a8667ed7e","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6cf3913b43a92723ad4d1144b964df3a8667ed7e/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6cf3913b43a92723ad4d1144b964df3a8667ed7e/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6cf3913b43a92723ad4d1144b964df3a8667ed7e/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6cf3913b43a92723ad4d1144b964df3a8667ed7e/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n|----  | -----------\n| `--mdc-typography-body2-<PROPERTY>` | Styles the typography of the formfield.\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.22.0-canary.40a34e35.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-S89eYFb6TO0codFIQDqGnR/Bh+gzJ+sPwwvziCckjtQnbQ/p03lc43byIxEW3UQrgUH44qKhHEF0jNt2vg7aFw==","shasum":"bb89f9a5fe67322fb89c2fdf35698a957de4eaae","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.22.0-canary.40a34e35.0.tgz","fileCount":13,"unpackedSize":40650,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgnGuECRA9TVsSAnZWagAAUIAP/3CMO0X0A/OHyLtV+bDU\n6BXZhh7v8Wv1EmPmvv2FfRcb1rLJqlIdcX5IAqnkRceug4v6wiv0/qNZirTB\nXnAWwWBP9i/IemfKOJzxJ4ICoLDBXD9yXGQdOuqJ0WyT/MInPckoE4oemIDD\nqmXZGY3Pq+ovx2SgEHytrvWpDzhI0SijdLOAgBc7ZMrjnnSFYWzXFXzGkS/k\nc8xbEJ7X0Ydc7RnamoTMbXcA+xIbiPHaLacrKZf5GqNyhWuHaOrE6oEjshW1\np74bG2nuaqHbv+nQitwzh1RnAHBLPwQRnDvHffb8uHt8fB+gE11MfYJvA3vh\n4i13gjm3zp+26kr7vOQe01NMdOe9GW8qSDLyzjMaDWqu2iPif25GFlgeW898\nszpe3+XfSJxVJV9V8ZtGnRpMsGL7MbhKD2KPECQV+xMbjg9XZ9xGxOo6dX9g\nPV9wANxSW/brDBfm/+XxD/8NXTura/G241eAu7b+fClj5pezkJO8rSZ0LKyo\nzfmtBNJ28/Ob/ARAOAgYo5G1cz/PXAwePdhh0Wwdrt1ttTP6qH8gcQA8aseu\nM9xiR7Y13+1zcr9s7NB33RfceuunalCiKJ3bhLood/fhhwmpv62+C1n0GJX8\nYFjSu/UZJnetw3CqmvCZKPKuNM4q5G/Dh6sCkl9KqjLnM8x/1RYwGN1XN6DK\nFhJv\r\n=Xz9n\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHd9Hp/3Bih82gRdq7NNdyhdTT8xI7jQ60wJbnbL9kPVAiEAsvp2JTij8kYy+bK+xwONR8Nokiph5T8nYGTlXrJaknA="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"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"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-formfield_0.22.0-canary.40a34e35.0_1620863876201_0.7904177686315188"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.1be14d2c.0":{"name":"@material/mwc-formfield","version":"0.22.0-canary.1be14d2c.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=12.0.0-canary.a23ecb682.0","@material/mwc-base":"0.22.0-canary.1be14d2c.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-checkbox":"0.22.0-canary.1be14d2c.0","@material/mwc-radio":"0.22.0-canary.1be14d2c.0","@material/mwc-switch":"0.22.0-canary.1be14d2c.0","@material/rtl":"=12.0.0-canary.a23ecb682.0","@material/theme":"=12.0.0-canary.a23ecb682.0","@material/typography":"=12.0.0-canary.a23ecb682.0"},"publishConfig":{"access":"public"},"gitHead":"2fcf49467ff2fdbb2ab4a987563f556e6ff316d6","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2fcf49467ff2fdbb2ab4a987563f556e6ff316d6/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2fcf49467ff2fdbb2ab4a987563f556e6ff316d6/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2fcf49467ff2fdbb2ab4a987563f556e6ff316d6/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2fcf49467ff2fdbb2ab4a987563f556e6ff316d6/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n|----  | -----------\n| `--mdc-typography-body2-<PROPERTY>` | Styles the typography of the formfield.\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.22.0-canary.1be14d2c.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-bEORSbQCJwpILTg7An5oK5mB+w7FsQSqm/3rvaTeafD0+9EJaPUSSCA5DMN6pFSOCi30gv/t4CPx1dMqy5anCw==","shasum":"514941a39e38738856b1c2d2fd9db1113236c19b","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.22.0-canary.1be14d2c.0.tgz","fileCount":13,"unpackedSize":40650,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgnWalCRA9TVsSAnZWagAA2r4P/RjO17JBDMED/xX6UgeJ\nOu/GvybFd4rrXzfAo+dtNwzoX8vSfSQLkA508nX2GTE22i5irb8zO/Pzx0az\n9bYaRaNJcW9R2uWod1NmTIxIjTbzqgozEj5Wup8xVBhuih+KZBgvsNIhmvga\nWIDekjfBmBU/NZvPdBxSohTC02kmWEN1f7JFXn9li38M4EinQQXq3sdKCiuO\ngvRnx1ktafBiCOQ0XZYobkoZ/m5+Gjkd/NAQZsDtO4Sbbou5ndesLBW21eyS\nUW+CvZthZliofMDuVc6eI4fmV4ndoQ9zPadpj3ULPCKb7oAGDnCwWJAqOcIx\noFnthJ7FbcqZqrFYwPEgr9yQdRR//FFyiX1Vl3qFZ3SrKDKQ1ijGYYP//mA8\n9mNwsBaEHyR4Fy9ummkQcgf2x8DoKnYv6adH5NowjP7+Mx9SDPNkk/ldVKKx\nDJZALdg9uCQI67znm6P9BIwmNKH+pYbqXvJOppB3uN2jJlT+CDDwwWQJBZ3U\na4RP8syWVok/Q9J5/BTCjjrN4DzIphUpj/TGN0o1SgrTR5bozLIOeW1ewNVr\njludrshZLKOoOHCa4JddYsqvpvG1OOAGKslSxJcmgxCu0yA5AiwqI8a/svEE\nBr9BzuT7KGQyIUylY32QOfj+cD2hZHh5+yDqzkKxKhnE9Ea6A2kxseyQt/LQ\nlQqh\r\n=3aJD\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGM8dfxNkgCX1pI+sguZ5LwFjRHhC9/TqtU6TM0xzb3aAiAI1qaQ18lEEG8A7DxXrJgjJv5y39n06gGojzpSZ0JSpw=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"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"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-formfield_0.22.0-canary.1be14d2c.0_1620928165045_0.26770742740385267"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.87dbd64f.0":{"name":"@material/mwc-formfield","version":"0.22.0-canary.87dbd64f.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=12.0.0-canary.1a8d06483.0","@material/mwc-base":"0.22.0-canary.87dbd64f.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-checkbox":"0.22.0-canary.87dbd64f.0","@material/mwc-radio":"0.22.0-canary.87dbd64f.0","@material/mwc-switch":"0.22.0-canary.87dbd64f.0","@material/rtl":"=12.0.0-canary.1a8d06483.0","@material/theme":"=12.0.0-canary.1a8d06483.0","@material/typography":"=12.0.0-canary.1a8d06483.0"},"publishConfig":{"access":"public"},"gitHead":"5b6b91a042dd241b949278a5e56cf671221e6a5a","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5b6b91a042dd241b949278a5e56cf671221e6a5a/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5b6b91a042dd241b949278a5e56cf671221e6a5a/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5b6b91a042dd241b949278a5e56cf671221e6a5a/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5b6b91a042dd241b949278a5e56cf671221e6a5a/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n|----  | -----------\n| `--mdc-typography-body2-<PROPERTY>` | Styles the typography of the formfield.\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.22.0-canary.87dbd64f.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-VJUUmjskb86Dka6ldRVm7oHAhSPzCbMK0p0a5UuPgBSAnZUtd5F7ChAd9PywmJl+XCKXctpV9l+/RgDTaMm4tQ==","shasum":"781c3b633bc156853ce62f64a9c30925692e6a38","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.22.0-canary.87dbd64f.0.tgz","fileCount":13,"unpackedSize":40650,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgnuRbCRA9TVsSAnZWagAAbpAP/0EQMa8eK/9E6yMDM4fr\nCY3kTKsVH46fhLxDPnXLd2FdskePuuUozIrKgwIclXv8vg1BgwMR1rEIf3jQ\ntz/fYRs2n+3Q0lstxzxxNStxcov5r0yQNiSt0MrxQ8xpjSJ82dQrqDwX+/8b\nzvdhQu4K0AkSLhvIG9QFcABLu6uNcvZ0ylafEKlpGqdbzhRemYHfGLwtsAD3\nEE20M1it8BdUn3oSsu8BSLYC9gDjiFrPu3pNr+/uywbaRQOzA9aHOTB0heq8\n9t3+2Bhmx3XAU0m04HvqSCitpZkZjWKSpsEsSt0xyupHkyRKSNZNOpx1KvUz\neAX6NbHVu7eumWDc8X1gxN83kx04FIm8YN2Mu4zjLMpYAVs6qQ94zRaH10Iv\nFts5SknvYe/mNWy0Z49MazOZPcUlINwXmHjjb9w3eQ/userUwBEn34WaXfvh\noPZ2+eEc/6ttpH+3lJVxelp0kX7yoMJGch1e/9Juu4g6cV7deQlyISKQQImm\nSgSSfARuojZ8wk8rcqmco8kEBFp4xlO9B2+TE7hkrbzoK6zgxnjY2OXpYwM0\nu2mQqTXnPxlEKSG0qSOwlLHgPYgaFhyLcejhjlvMUBxFTqPQZCvktxS0W6KN\nMFqJxBR/hnHqj+3BeOkAMz5/HRshe5UOyKy9AoxWLgDYK8hTEpUfPIhk2AHI\nObEz\r\n=aNAW\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDT6UHZkBeNmXhjYzdmfmGbf0VIMcvlWmNRhzHpRhDBsgIhAKOmjWHEjvkY8qUGpb+uHIsQa73xWPaZKVNJphr6DKbD"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"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"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-formfield_0.22.0-canary.87dbd64f.0_1621025883005_0.015425415191141711"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.c452e4da.0":{"name":"@material/mwc-formfield","version":"0.22.0-canary.c452e4da.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=12.0.0-canary.1a8d06483.0","@material/mwc-base":"0.22.0-canary.c452e4da.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-checkbox":"0.22.0-canary.c452e4da.0","@material/mwc-radio":"0.22.0-canary.c452e4da.0","@material/mwc-switch":"0.22.0-canary.c452e4da.0","@material/rtl":"=12.0.0-canary.1a8d06483.0","@material/theme":"=12.0.0-canary.1a8d06483.0","@material/typography":"=12.0.0-canary.1a8d06483.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-formfield.scss"},"publishConfig":{"access":"public"},"gitHead":"30c4701f29e4afdbe58f6529e947eda655b1b1ea","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/30c4701f29e4afdbe58f6529e947eda655b1b1ea/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/30c4701f29e4afdbe58f6529e947eda655b1b1ea/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/30c4701f29e4afdbe58f6529e947eda655b1b1ea/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/30c4701f29e4afdbe58f6529e947eda655b1b1ea/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n|----  | -----------\n| `--mdc-typography-body2-<PROPERTY>` | Styles the typography of the formfield.\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.22.0-canary.c452e4da.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-ueCjIvIYONvmV7ez4EGa4dfqCr9QNMVeWSSgBAJQVmmrtU5tThBRe1OkoB2GLkuHcLxpROdi4oxrECMbMPdNqQ==","shasum":"f7ee921ac8a2882181fbc2f099086db873ab879d","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.22.0-canary.c452e4da.0.tgz","fileCount":16,"unpackedSize":47083,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgovzZCRA9TVsSAnZWagAA1wwP/itEqt/8ixDAGlRLf6wt\nBQzqhNnzDAInvMiyNpjuRTarBT2hfFoFqg5sfcFmOuTERoEIYgsBs8C8sfCm\n6LIW/MPs2dS5JMxWqHBXHuyBdf3VJ++gunILDRdKub41P7jn6LqyAif+CXrt\nFMCPLpfSNVI1+4uFAt6Ocq6IPcxNMFHnJ8TqFXH5yVSiK10A4J42oD6RXJL4\nhcYFxRtl+WgJitvsOL3X0sSnah2idJ1BQGRmglpNJwKZ3uHPqB3Xbzfyj79r\naLcLoXo3P2rBhgY5mpE1D90vKC8GqPvV2UncIhB3bxZv7H9e6zFHbmuvjOd6\nm4nuVoonf5WcUoEXLuo8fCOtfaDGKfs83Jt83lvW5xth/XMQ+sS8WwO4zthh\ne0qilXJKh2/KT1GZxm0S1RzzjuCmKqi2zbbKF45Sx4b7/FMS00oJXDs+pFOg\nxrpXP71/N69yO9PT3V+Lz5pWGohtNTf4XEHUKt6MiEhCP/+J6zOYjQdoWIs4\n1WMpBQWx/d0arEIPuKMd2SdRfud8mo52uOEUP4EzAV7PEsRQfRqlIdHUbSVW\nqksbTOvQKi4NrJd6e46uBQfTz30jPRG0FIKorFZBMy8PjSuKfn1sRitJEPMY\nrembDsFZVpMroNU3r4VrlFkNCmoWW36/WC0Cgsvz0o4nfG/1lfKm3AVsLaka\n13AB\r\n=S0hJ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDlcvp8wdmEWlYibEm81FunzhMPem7BkZET1JYMYRvkagIgBNBkDArFq45oPA3pKhHStQmJVwlIfPa9G270C0Uz1B0="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"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"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-formfield_0.22.0-canary.c452e4da.0_1621294297206_0.5794696503369285"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.2212691a.0":{"name":"@material/mwc-formfield","version":"0.22.0-canary.2212691a.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=12.0.0-canary.1a8d06483.0","@material/mwc-base":"0.22.0-canary.2212691a.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-checkbox":"0.22.0-canary.2212691a.0","@material/mwc-radio":"0.22.0-canary.2212691a.0","@material/mwc-switch":"0.22.0-canary.2212691a.0","@material/rtl":"=12.0.0-canary.1a8d06483.0","@material/theme":"=12.0.0-canary.1a8d06483.0","@material/typography":"=12.0.0-canary.1a8d06483.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-formfield.scss"},"publishConfig":{"access":"public"},"gitHead":"8fba3dfbfa73868ebfc76e8070cb5d33921df0f8","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8fba3dfbfa73868ebfc76e8070cb5d33921df0f8/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8fba3dfbfa73868ebfc76e8070cb5d33921df0f8/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8fba3dfbfa73868ebfc76e8070cb5d33921df0f8/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8fba3dfbfa73868ebfc76e8070cb5d33921df0f8/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n|----  | -----------\n| `--mdc-typography-body2-<PROPERTY>` | Styles the typography of the formfield.\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.22.0-canary.2212691a.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-yf4tdxlJnzIrva9fHugNVsRZagctq5YzeWia+HLKCllZKbr9xAdzS7Oj6qWLeVwaxj6XVevhk9RkZzlSl/01zA==","shasum":"59c6d925bb101d5cfb75821048d47e55800ad072","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.22.0-canary.2212691a.0.tgz","fileCount":16,"unpackedSize":43905,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgowGtCRA9TVsSAnZWagAAaSEP/i24lJxL9286SSw6K3qh\n2upL4+GbO5oUGkfsd3xYjELB1+WmBcKkClWbLPtcWCITmk1QfCUa1EAtwvoC\n7VZI5VHXN3qWhNleBSP8jQ1V9jb2ZWMuAyRGam7nL16XZgZysvKGsItq08Xp\nwwODKf5LMqFwnGE7s6hS1oWI3vOiezi3I/x8ovt0UGPZmaGwxN9YmSUMAKZP\nBnqOKp3l4r6Dr2FvaV/v9Fhf7oFc46HD0fSS4kDdEPTabkSiQXv0BITey1xu\nLzGJZ6Y20nO+sqszSlS6srY31wcevdz8FJQapMtLx8WlD4pFRJJFzR8PHu4T\nRCTr1GvFSpmccgxB7jxVeWxxG6Jr2uV4dHLcCMDuZ9QMGjmGtr/0cuSfopbf\npgbJbifo6zrq/5FgdLcBgoIlOFIXoJm2Wj/bKSQBaywyXl6XnkzAXqzOd79C\nqdSr3DDSHK6iAkCISCtVThmokKLI2cIOf3oCVSQVQu6mczeZkiP8ltP0cGSO\np7uP+RzmLYWkXhyqy9CngnzwLW6rSI+6DLqxanX4rbjCg1JdorB3tFloWQ4L\nGVzDGsoOUPhb0yTFYiXFnDyBxB46FiJFTGuZWnNJkt6iocDbmo3n9B5AM+K4\n5ymfDU9GuQT/q06ni6HdBj2aGc4dPYqAV/quOSgqha89yuAMlUWmwCWySrS5\nySYY\r\n=78gy\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCehC90D3fcBmdqzUBUBwO4YrJOwmj/gmk5+Ny3D/3MbAIgEcweVLIUa83bdpRKErN322/KhGQ3Ydo0zFyO7nsPwc0="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"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"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-formfield_0.22.0-canary.2212691a.0_1621295533375_0.43261969447741566"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.f748ff2f.0":{"name":"@material/mwc-formfield","version":"0.22.0-canary.f748ff2f.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=12.0.0-canary.1a8d06483.0","@material/mwc-base":"0.22.0-canary.f748ff2f.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-checkbox":"0.22.0-canary.f748ff2f.0","@material/mwc-radio":"0.22.0-canary.f748ff2f.0","@material/mwc-switch":"0.22.0-canary.f748ff2f.0","@material/rtl":"=12.0.0-canary.1a8d06483.0","@material/theme":"=12.0.0-canary.1a8d06483.0","@material/typography":"=12.0.0-canary.1a8d06483.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-formfield.scss"},"publishConfig":{"access":"public"},"gitHead":"a83c1c5ee60e398896831041769b5c22e19b4621","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a83c1c5ee60e398896831041769b5c22e19b4621/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a83c1c5ee60e398896831041769b5c22e19b4621/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a83c1c5ee60e398896831041769b5c22e19b4621/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a83c1c5ee60e398896831041769b5c22e19b4621/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n|----  | -----------\n| `--mdc-typography-body2-<PROPERTY>` | Styles the typography of the formfield.\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.22.0-canary.f748ff2f.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-YtvUxqty7zLeLRE5ajGGSVeDtmWnW+UKyMsgqLwhr+Rq1EpByso8qR0j30F9zLxac5DcnZiV7b18+TbF6eT3Eg==","shasum":"2979de8341bd4c49215cac61e749083772021fff","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.22.0-canary.f748ff2f.0.tgz","fileCount":16,"unpackedSize":43909,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgowimCRA9TVsSAnZWagAAH0sQAI0lZv4b4zL58omQeK6m\nYcwmxstDun03UhmC+9ID5yyRTJm+CGGZYA873duFP3M5dol3AqnrYwaWpgF7\nl0Hp37nTjotUOkXaU2bHXmGIAIJUp2oFlykPrUdTm0cXohRgNc5gmCrPeOCB\nBECZHD12lXCUb7DOW5chccwSRnKpIi4QY84ts4XigIgD5UrvxquxQxQEbssy\n4OzblhQzx4TiBtX/ZuV8tTSioT19p44YiJip2wIMTsNQ4oK4sgtUw0aF1VEr\n7FzLvmumNq9+e/9IQreKMlfNgmvBQ+dhALcXjqZ+w+4TAUjEuyBiUhWTXH4G\nwHgaChWZnnNISOPeqgjtlmf13F0mXpDochMyxQpPV/D84uE6+dT6KXnirbbs\nFX0z2iGLh9XkgvTfbNWPejiguXX/EpafgMm9VBDadFVHy6bfgowcejOPkjOG\n6X4YKR/xc801Z0u7NkgB0a6BJTYwkdVF8vCEZX/6tOERrhIK7nhRq2oKd2VP\nCgW8iAYjuWhtSvpe9miNbbkS7w4kQFbaqtMgLwc36+2rlW/hfkQhNglnlHnI\nIzEONbsEheNrmF55Dc6w+Qzv7ps1rsCQtciYrzkq2Mo1typf1eu3woKLFo3p\nyoxo88takxC4cH4lgHZWl8/fiHp1nS+bnGCi588Y70tO6ob8pwrxWfufYVGk\n8v7v\r\n=5jxc\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBPXFnY2Z2PmL2cHK+KuYGRQ3EVsCWOcrbVlhbRWl6p6AiEA0nEc0Slg8sHJrek4wGi9UQcaYf6uScMH2xZzYOeiSRs="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"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"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-formfield_0.22.0-canary.f748ff2f.0_1621297318172_0.3550346304431615"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.cc04657a.0":{"name":"@material/mwc-formfield","version":"0.22.0-canary.cc04657a.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=12.0.0-canary.1a8d06483.0","@material/mwc-base":"0.22.0-canary.cc04657a.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-checkbox":"0.22.0-canary.cc04657a.0","@material/mwc-radio":"0.22.0-canary.cc04657a.0","@material/mwc-switch":"0.22.0-canary.cc04657a.0","@material/rtl":"=12.0.0-canary.1a8d06483.0","@material/theme":"=12.0.0-canary.1a8d06483.0","@material/typography":"=12.0.0-canary.1a8d06483.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-formfield.scss"},"publishConfig":{"access":"public"},"gitHead":"b1fa7339fbd44ff5149f7f38e481e6b0b6fd048a","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b1fa7339fbd44ff5149f7f38e481e6b0b6fd048a/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b1fa7339fbd44ff5149f7f38e481e6b0b6fd048a/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b1fa7339fbd44ff5149f7f38e481e6b0b6fd048a/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b1fa7339fbd44ff5149f7f38e481e6b0b6fd048a/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n|----  | -----------\n| `--mdc-typography-body2-<PROPERTY>` | Styles the typography of the formfield.\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.22.0-canary.cc04657a.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-eVajWwlwSC0ySDYU3btu41agtDQlotuaa6LYR0ZamNa1CMcu8QFq3ZyLaQqqS66/FsJJ4W+72+MpkUnAthj55A==","shasum":"3e5803793e19c047ac0ec71061069c1f4b593dd0","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.22.0-canary.cc04657a.0.tgz","fileCount":13,"unpackedSize":36553,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgoxZgCRA9TVsSAnZWagAAK8sP/jdevlSqpGL/yYnFIv9G\nDRDFGYcpLG2Q1YnaQhSEM9yMAVjqFgkf8F/IUglaODbHFlJNTedVJ6aiiFkQ\nmTNFS6PZfMCCxZ8jAFKemrw61IrVJED0guk2LYvW5VY0ANdecWuQF/KUAyaJ\nfrxrGfgEOMWLqZrli8huM9GTaC8/qFiL6UH6suMi/BQywrHTE2p/G9vC6H6/\nANQgEBHCsCy1AaXhjaBU9wTkbGGB5jdgO1CgbzF/A1d5z2OIcVyrzZfE4C8x\nhNoj20lr1NUgYGQyufKUhDPjnAxVqSoiPdZ91GJorAKovL08MFWl8FzaWCus\nQKdp7f+5lTCsZPPM2NWwqLRP7rX6hcirs5S5qmsGef4eo9W4FPinQwM0oRz8\nNnlzjSM4z6/qccN/ejfn67AuHhb0W2LvJMYFhHBGF5IpqFKRmBo04YEt/Qdg\nXpVZwvAzEEnpGrFqdsvDeyornqdLFKv4QT67l0m0BWFdt7pTpYX4wMGkMCuS\nw0qfWhuooPLZvJhvlbmHoFmosdHEcFCDQ/Jo5Jtwxyxlp9XWVH0DDwntJKQd\ncUVeZOXnEWdwB57AqW3KgY0zA+XiNskE/p/HwfrdUKhtKayB9er7P1Hj2/1y\nq+v08ZIKMBx/oJppCWkAHd3gQps4HAMtRqf5vf+2nF8HbiCREG3XKGO0FdhA\nuCHT\r\n=QhdM\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHnaUqSHQ9cX7UWmQpEU5jYtj+B2RZX2lSQ6zTCk36nbAiEA+mBETxksErGTCrOoIiXq0VfmAtrJqbYfsTodVE95mWY="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"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"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-formfield_0.22.0-canary.cc04657a.0_1621300832390_0.8792104643344956"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.3a3114fa.0":{"name":"@material/mwc-formfield","version":"0.22.0-canary.3a3114fa.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=12.0.0-canary.4bb5eea2b.0","@material/mwc-base":"0.22.0-canary.3a3114fa.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-checkbox":"0.22.0-canary.3a3114fa.0","@material/mwc-radio":"0.22.0-canary.3a3114fa.0","@material/mwc-switch":"0.22.0-canary.3a3114fa.0","@material/rtl":"=12.0.0-canary.4bb5eea2b.0","@material/theme":"=12.0.0-canary.4bb5eea2b.0","@material/typography":"=12.0.0-canary.4bb5eea2b.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-formfield.scss"},"publishConfig":{"access":"public"},"gitHead":"217bbc3c5105a7f3ed67d47f0169dc3b8269adc7","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/217bbc3c5105a7f3ed67d47f0169dc3b8269adc7/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/217bbc3c5105a7f3ed67d47f0169dc3b8269adc7/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/217bbc3c5105a7f3ed67d47f0169dc3b8269adc7/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/217bbc3c5105a7f3ed67d47f0169dc3b8269adc7/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n|----  | -----------\n| `--mdc-typography-body2-<PROPERTY>` | Styles the typography of the formfield.\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.22.0-canary.3a3114fa.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-/TE27hZzcTnMT2dbA6KVn2KNuGA71xOcDGQ5iMJsWk8ru9qoLp4zDf/7VWr2mzBx/91Nkxw+AJcUV3bfo1Fing==","shasum":"59d5278ba4a952f5e89094f77fbc5fa2c42fb250","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.22.0-canary.3a3114fa.0.tgz","fileCount":13,"unpackedSize":36553,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgpaHDCRA9TVsSAnZWagAAd2UP/3s5okOQv9nZ5QbMaDZN\nXsbxVy1woUaTGabbGMCR2aJgBd1qt0eIrOzjKIIfvv/knKqTt6eP5Wzvma8M\nZ1HtckNBa0uUS5/0oFygAsOwyokUtBWddNKKueNoNvu0aLaqUkhjnpROMPLb\nOLgkbMlY6voQhXIYq8hTG4kwjMCxxP21ePjkewIUBY7TepHLsiCBUduSjcYk\nQVHjryK9Wl9v8gwOnJoJY0AD5E9K4ePLEJmuOTZHk2V7oxqCKT8cNz5Q2aCS\nAR5rhZjUMS18nhNeTNgr728GMpQOsAcA4UwbrZu0FMn47vpVs+ka+OLVjvos\n5PDBozFTbyZos6biy4Xm6XELNcIUrqvLk5o+5IQ4ajywrWwZ4h+nUu+qRYj5\nmt0ZsHOwCTEqdys6E0NoOc6iQv095DbBP/NSRR6W5mMPdE75uld9xkBUgrEr\nBq+IbWFX4IrkkRIetVTLHD57rMOukNr0Cqpaox6o2osEAcONW/sSt20kX/Pv\nVbnr1f3rJ2ukmROwZukFyvLTXeYgBZKBRA4gI+GwZq/CihzdcxPodtZOIN2s\nLacC6zC2udMgT8TK28MrZgvVv6wCzrgjWpy3oO44rS/HJAMu7Ly++mFj9O81\ntJ+UFJBw5NjUtoW39HWE+TeCAxPyyVZMqi13g+ToL5TqytY6AkUuLLx/+F44\npr7o\r\n=ZuDZ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC0GVmPoG9da5t62BRSpIv5pg5jj/eT2ATp1QfzJmVFWwIhAK5lxeH70C2viEVD4aNO83Tb31WypTPEcQJhho7rvo0o"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"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"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-formfield_0.22.0-canary.3a3114fa.0_1621467586753_0.2766974292000075"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.b46bdf83.0":{"name":"@material/mwc-formfield","version":"0.22.0-canary.b46bdf83.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=12.0.0-canary.4bb5eea2b.0","@material/mwc-base":"0.22.0-canary.b46bdf83.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-checkbox":"0.22.0-canary.b46bdf83.0","@material/mwc-radio":"0.22.0-canary.b46bdf83.0","@material/mwc-switch":"0.22.0-canary.b46bdf83.0","@material/rtl":"=12.0.0-canary.4bb5eea2b.0","@material/theme":"=12.0.0-canary.4bb5eea2b.0","@material/typography":"=12.0.0-canary.4bb5eea2b.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-formfield.scss"},"publishConfig":{"access":"public"},"gitHead":"9095fd5cb7570c346d2093f1eb444f3035718920","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9095fd5cb7570c346d2093f1eb444f3035718920/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9095fd5cb7570c346d2093f1eb444f3035718920/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9095fd5cb7570c346d2093f1eb444f3035718920/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9095fd5cb7570c346d2093f1eb444f3035718920/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n|----  | -----------\n| `--mdc-typography-body2-<PROPERTY>` | Styles the typography of the formfield.\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.22.0-canary.b46bdf83.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-TNkTW+1qxkR0kjC2G5cQqJ5gHTbqrkPCqYW3OtuoN9RfjJOhNsK8ZJfnhQe9v1cAu/Seh6rnXXLl7aESTbpz/w==","shasum":"b21aa29181877a73b5b42e51cfa13bc8f959fdfa","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.22.0-canary.b46bdf83.0.tgz","fileCount":13,"unpackedSize":36553,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgpcBnCRA9TVsSAnZWagAA5kAP/0Gnk4zHMRoAdYDsNRRl\n1zUyeJDqGdyRMybcwmsHxRA0HTS3OrYSAnEXnWWL4dKwhXfTSazTEHuFr5mS\ntKtNIqWITOBsc+bbRmGuxom6uO9ZC2O4gn45cufXLyLZt5GqEkrBrFvScih6\nzR7WN5HbMf+XLqSTPxrQWr+2NpGLzYmN8i/lKq0a3O5ALdMrnxaxy63mAJiW\nA2QInfBCAxEF4132RNDScqfBFu1awxhm3oDT7I6ORLqNoLDWMwqYkd9Uoikr\nPc66I5qr8G7mDSQDyTUk5ot+qEsO7SiES3KN+xfMp3bRsp3e2P1qpfY6sggv\nwSv3Sa4ru0lo51AA3lHhf4Db3X6LVL3ejkwtkdSUljD8MsOVhPrlsajrTMN7\n+qoDwPvbiPSgYtoSVAtbji/UbL51ly/cTrdJ+7xap9ADKN3Y/7O2oXFEPxXS\np6+40God/WnXM2TzsjqG1VB/rU8aCWE476+ieZN5edFAvwoYBZgRUDbt0HGi\naYI9ClM3XcIaYngCQlg/HCdlWtcQkY/V97k1MYhS/dz8dyRt9bI3Dy2TtNPA\nBIZIXOUc/Tf5g1de3G9P4uUVnrxbOJwjPssueNYegxc5NaTKk99jdLpu3aO0\nxuJyV+K2oLqkdwLb1ieF/k8IYD52Ow6NB5wNXE8rFjuEP+7dgIDcoFxdcZs1\nXGfS\r\n=ffFy\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHJnb7GCxBIW48LnfrM4TjEhP33SSzHNFVCitCHM06AIAiB2fhJTyt9+lcl29YILNY/9jlRXILoXUxiQDubWoFDd4A=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"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"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-formfield_0.22.0-canary.b46bdf83.0_1621475430526_0.815243357003562"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.b401a081.0":{"name":"@material/mwc-formfield","version":"0.22.0-canary.b401a081.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=12.0.0-canary.4bb5eea2b.0","@material/mwc-base":"0.22.0-canary.b401a081.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-checkbox":"0.22.0-canary.b401a081.0","@material/mwc-radio":"0.22.0-canary.b401a081.0","@material/mwc-switch":"0.22.0-canary.b401a081.0","@material/rtl":"=12.0.0-canary.4bb5eea2b.0","@material/theme":"=12.0.0-canary.4bb5eea2b.0","@material/typography":"=12.0.0-canary.4bb5eea2b.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-formfield.scss"},"publishConfig":{"access":"public"},"gitHead":"3f253eb320a1f9b9e236e2c6c0503900e63e2c6b","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3f253eb320a1f9b9e236e2c6c0503900e63e2c6b/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3f253eb320a1f9b9e236e2c6c0503900e63e2c6b/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3f253eb320a1f9b9e236e2c6c0503900e63e2c6b/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3f253eb320a1f9b9e236e2c6c0503900e63e2c6b/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n|----  | -----------\n| `--mdc-typography-body2-<PROPERTY>` | Styles the typography of the formfield.\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.22.0-canary.b401a081.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-1Dm4ZCbKQqGTovl/XkOktdTm3lAfdkMkLHCMg02qpPCc6ttlHyiezP+gT8YXD5CK39y/6qR85Bd/RTJ0Wt2U+w==","shasum":"1a890db27ed59fc3ccde2659320fed4127a3d2f3","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.22.0-canary.b401a081.0.tgz","fileCount":13,"unpackedSize":36553,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgqEC3CRA9TVsSAnZWagAAf8MP/jesTne//VrjIWKlEZKe\ngc0vEB4A/M813LbXgtc7DTinwKW3Fw282APWFsBC3J0g5ife3FUgmWSauanE\ndQfzh9GJv1sbwUGsr343YGYfF3g5LEAMOjG0AZ/qfOaMAvDLWEtkx6MyHvUt\n3g5wEw4FA4j6KD4ZjoNHqcDlw6QZ495mhJcTtiI41InuZ/hDDLgwSQ8sf4Dk\n6z+LG+YyildMvrhaTUEoNAcFGV7QjGkAClwbD8VyAORdut1gYwABp9JZp2Jd\n7DDBIjd6BkenOE+3ZwVx+EyhHZvzBza8MVgbHqtAJW4M5VdFlZcVhT3nk3fS\nWTEZspiHbkCZWAOrAx3Wy+qWyQYOS/4NJy8/1mP4TTWwPG3c2WYVwAumIoBb\n4qZwVSvU9EWCkNPsTtfCqyFQso+k/UE6WqYGcJWUoqumKWri3axAdhSCQtLr\nCLzqPGD82fgXeU1INUllh/glyrCKNNDjk/ANmWhYMOoRvJeRRJ5AbcNYRAfn\nNUHkoM58fXbprNx2kB1LroOpzfGdmE4LuoHw+Fj9JzC2IZS0DY4TQM4I/GPP\nLj1qm7RH08UyYYrbIDjLouKARb2gNb5u0p9fVpDHlDY7gSQfB6wEO7xggwJ+\nC7FngVsDajky8a+yDkZxwilL6jR70BtSmQGT6GY6WyqdR1ncKwxSb9khwd1D\nMLWm\r\n=hfiJ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCIbWja24ehO2LnoXWwMDh54ZhD3sxf8E9eY/Xn8fhOZAIgURDTSnaUzts3O5f//rnQrZ2d5en1SDfSnG1ggRnUg1M="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"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"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-formfield_0.22.0-canary.b401a081.0_1621639351241_0.2573291635992705"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.012c8dc0.0":{"name":"@material/mwc-formfield","version":"0.22.0-canary.012c8dc0.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=12.0.0-canary.4bb5eea2b.0","@material/mwc-base":"0.22.0-canary.012c8dc0.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-checkbox":"0.22.0-canary.012c8dc0.0","@material/mwc-radio":"0.22.0-canary.012c8dc0.0","@material/mwc-switch":"0.22.0-canary.012c8dc0.0","@material/rtl":"=12.0.0-canary.4bb5eea2b.0","@material/theme":"=12.0.0-canary.4bb5eea2b.0","@material/typography":"=12.0.0-canary.4bb5eea2b.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-formfield.scss"},"publishConfig":{"access":"public"},"gitHead":"7a0952c38da1624fb6d0653e07cc5ebf284120f3","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7a0952c38da1624fb6d0653e07cc5ebf284120f3/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7a0952c38da1624fb6d0653e07cc5ebf284120f3/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7a0952c38da1624fb6d0653e07cc5ebf284120f3/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7a0952c38da1624fb6d0653e07cc5ebf284120f3/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n|----  | -----------\n| `--mdc-typography-body2-<PROPERTY>` | Styles the typography of the formfield.\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.22.0-canary.012c8dc0.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-QVSFHPUykOvCi45+OoCfFpoIUO3y0jRUBdSMJ2zFDWutjeAkRg7T2XyoVmaIkq9and6vGkMLp1WSYTVIeCk5Nw==","shasum":"50b2aedbcac2f2d1a525fd6eacff7772545c08d1","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.22.0-canary.012c8dc0.0.tgz","fileCount":13,"unpackedSize":36553,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgqE1CCRA9TVsSAnZWagAAiOMP/1JuwbVXYqg9G1qhHyfs\nIOCE/8jdmNE5ACnhW2watyTGsHFS9cYqkVdSY1QM29qm+SSjiqVlG7qRvXVk\n1bIsgSw/jKFiGGfNY/XGkjy+TOLkljrkn1cUxiJlJH3p5Jl5vKyZ+6dCJoWB\na+EX4TNhEFS1NxyJe2wMhtU9W0RMsOKqbVUAtDKxWhf+Bn/lXH304DuYbnK9\nxOAIGsSvINw4jZhzvYEmuRWcGP2RpGYAtiKJky/UWtpZd/JUUCMJr8CRM0vX\nXNjgz/z7wvmtUoaD88XgviLS/HyJI8kniXSS5EE8vySbBe5Q2NGZBKdrNAUz\n77Ibz/2PRbYwdQY2icIE+ogKiFyA3h4g/s00eORnKVyY2ygTmyhuasgDKIKU\nBRWvpj8f+S+aumCmOlm29ukYPYxkqTkgCXYuJTlvY2lRd2mMA10Y0pxrgQV4\nzkfaJwHbCtGFCVbCzRpnm5GhuzYeXV7LMHaKKuaic8mAERyDAVz6jbQcWJaP\nxOXzp3mAqkS5JP88JpimeqmvJjkgj6gRoEnhltcvYUPWZuv+vbz/ifQwrIVQ\nHJ1dvgbjEOj3nK73NvH/3Jhv9emjXkeDO9p/wTr0lhJxSJzcycXzPy71K3ij\ndmbs5S9kqdWU2T8TTfl21tDI8oE6n1k2kVA3+Oq2vcl9CdyZtBOntkWHaLbD\n805a\r\n=4pAl\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFvffFsJN1+iybnqfiao7OhbTO5sc5QY6KUB15Ntiz3AAiBeQ3S/OLjrsUYYFf/3PLeNzse1X6SrjqGDgHo1FHkW2A=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"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"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-formfield_0.22.0-canary.012c8dc0.0_1621642562227_0.21921564069536714"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.e01a1731.0":{"name":"@material/mwc-formfield","version":"0.22.0-canary.e01a1731.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=12.0.0-canary.4bb5eea2b.0","@material/mwc-base":"0.22.0-canary.e01a1731.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-checkbox":"0.22.0-canary.e01a1731.0","@material/mwc-radio":"0.22.0-canary.e01a1731.0","@material/mwc-switch":"0.22.0-canary.e01a1731.0","@material/rtl":"=12.0.0-canary.4bb5eea2b.0","@material/theme":"=12.0.0-canary.4bb5eea2b.0","@material/typography":"=12.0.0-canary.4bb5eea2b.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-formfield.scss"},"publishConfig":{"access":"public"},"gitHead":"8afd20b0913094a1c3c1b084d0bec7d38724fa00","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8afd20b0913094a1c3c1b084d0bec7d38724fa00/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8afd20b0913094a1c3c1b084d0bec7d38724fa00/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8afd20b0913094a1c3c1b084d0bec7d38724fa00/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8afd20b0913094a1c3c1b084d0bec7d38724fa00/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n|----  | -----------\n| `--mdc-typography-body2-<PROPERTY>` | Styles the typography of the formfield.\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.22.0-canary.e01a1731.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-T+dPdXdSl37sTEVvKNYhr8RvkTUtuLNqk6xBJgE6vh68izGTaiWGnocbbhx2jMOPElof0KoFYBVIbu9k32RiHw==","shasum":"3ec0ff1720a51408963cea99fed32036fd65a526","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.22.0-canary.e01a1731.0.tgz","fileCount":13,"unpackedSize":36553,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgq84HCRA9TVsSAnZWagAAm8wP/jntDkakkdXXhAdjDoDR\nrSv5QHMhozJh2NTuuWqjD70DZutyBCWeTXAgVjIOPcfrK4OOl9CaqMfIjm3A\nf5ETu89sa/RdzyDsuIk4XQw0aKQ+uP3Cklny8CdX+Ji2YXdp0qXCCGEJpsPY\nAxmdY4I8ogf94lx85zUYtLKj0EboiA+aB9oujbPJH7OKACFhVCJrEvqQT6/Y\npqk62cqZtWWMtDD8GF3ho+zPFtcNy1hzNCuU1zzRiFNoKyuA2aYjqiex54wq\nWFBBglFrG3plp9COhdHR2dg/uJAic9wTl6swiWq5OJ4WHJyMUXkDTAEeCD6S\n4Fa4DqLiRD2SpdQTb1u0bKJwAymrGdbVIwvO03047yqqd6Kn2RLNJ9oCT+Qw\nUgbMp6/MVCQEq4T+L4AwYfMKtJO+9Lmmv8IdZ6uSvFGtnKaqjTqlz+mvaGls\nVNj5BI64zFlkT5KYfLqzm308FuUkaJIS/bvbRg7bX8v0cyxr9HF+Uhsa6u8Z\nGrPLGHOpjJZbrcNQ6Mxa5VmpUnzixL80p6Ha28oksMPbxc42wI0ftwH+vAIm\nlBXXiALvMaMMSGOk8Rr4SJgRjVAa196dGJ3RjXaq3/44LbEKcnlI/Rxjjwfi\nhimy/yALpE/IVkp4psyFqwkDU33gEQZHdvzKwkFNM5xb0N/uYF+va321b2Qr\nb4xf\r\n=/889\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDRpYUtZWugYjESUarfwvi23YIwpTFMJQPvYwA3Q/xu+AIhAPNwcpodBLxc0mfPKfb/biL5wXeLHVMIpfzslPOHxSjP"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"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"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-formfield_0.22.0-canary.e01a1731.0_1621872135454_0.6533259650146399"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.59174b9f.0":{"name":"@material/mwc-formfield","version":"0.22.0-canary.59174b9f.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=12.0.0-canary.4bb5eea2b.0","@material/mwc-base":"0.22.0-canary.59174b9f.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-checkbox":"0.22.0-canary.59174b9f.0","@material/mwc-radio":"0.22.0-canary.59174b9f.0","@material/mwc-switch":"0.22.0-canary.59174b9f.0","@material/rtl":"=12.0.0-canary.4bb5eea2b.0","@material/theme":"=12.0.0-canary.4bb5eea2b.0","@material/typography":"=12.0.0-canary.4bb5eea2b.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-formfield.scss"},"publishConfig":{"access":"public"},"gitHead":"7fb9171e05c85b1bf933cbbf66a44ff2e05e9e25","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7fb9171e05c85b1bf933cbbf66a44ff2e05e9e25/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7fb9171e05c85b1bf933cbbf66a44ff2e05e9e25/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7fb9171e05c85b1bf933cbbf66a44ff2e05e9e25/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7fb9171e05c85b1bf933cbbf66a44ff2e05e9e25/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n|----  | -----------\n| `--mdc-typography-body2-<PROPERTY>` | Styles the typography of the formfield.\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.22.0-canary.59174b9f.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-wPh/EUH2K8tYYzSwrRu/hnzr2ojC33mR3wRWNc1mGLr1AODlEfdekpWtN5D9OHJdL9EyM25pfRwPNBTeHxhZzg==","shasum":"07e2c8502b7dbae08890dbf95835f647fe04f4c1","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.22.0-canary.59174b9f.0.tgz","fileCount":13,"unpackedSize":36553,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgrTuGCRA9TVsSAnZWagAAppQP/iJVQvFDhfMYFLtjdkqz\nIYkk+URJpTFDFdmg7aOqhWprSLFKiLW0ug12fBxUDHKklzsgxy+Z8FLySEZo\ndVfgZq3JMY5ja3vNLIdbuHsW6xK0b9Dou5cXDa8vCAzjlnx4/a5c3QkuCEHg\nDrgLRWgoqjel9c7qldrFcSIx0q+uAF0hRvYDySe48bV1JeFh1KwA3u/1wlBe\nHmqUXJquNz5ZQCymz62HND6Sc+pQD7gISlM7uxm0TAk5v4ZCsQQbLARE9YRu\nrrf2OPXmTo7B3+QTyORFk718Auurbz2oxwebn1N74wgql5M+ZlOalGQwUxKL\ndICKIRcBTORXNoFLfQevTgQJKGcDUvQ96T2/SZENDwZh7uozYdj6p/fFg2Ft\n8hm3YY5RCu049WFzZJrXZgLZNZtqhugLmpMw4MRUeif3ypmtidm3+HjIIG/3\nv3GaEqWUQLRGQd/mgMYSeL5xjzRZqR4MulcPkC6iGt/3mmUhFoBQID1Jlwth\nZD0ogH6PQnaLrG1zl7iCWHbv+EKj9RnXfjhEGtlPF8DlB9lH0p9qQWfETscw\ndqb3HDYcHUvOz4kJOF0jQtnH+eAAdPbjGkbba4skYHMwZd3rXlYNpG5Fwhsj\nnGX2Rs+ViWXMVPOLOZUU1SI4epkbEaxZvWODalTTrY1+AkXXsCavSJGWjuzA\nM3mQ\r\n=CzvR\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGezRJs8Fsjd7as0ttC1puve3kjdmd9/hybLF3NlCzcnAiAxuITJ8Nc/8bwVhj5GLkZBxrrornPbWHmShtxwRn5koQ=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"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"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-formfield_0.22.0-canary.59174b9f.0_1621965702100_0.8687052459988545"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.c96cb2e0.0":{"name":"@material/mwc-formfield","version":"0.22.0-canary.c96cb2e0.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=12.0.0-canary.4bb5eea2b.0","@material/mwc-base":"0.22.0-canary.c96cb2e0.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-checkbox":"0.22.0-canary.c96cb2e0.0","@material/mwc-radio":"0.22.0-canary.c96cb2e0.0","@material/mwc-switch":"0.22.0-canary.c96cb2e0.0","@material/rtl":"=12.0.0-canary.4bb5eea2b.0","@material/theme":"=12.0.0-canary.4bb5eea2b.0","@material/typography":"=12.0.0-canary.4bb5eea2b.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-formfield.scss"},"publishConfig":{"access":"public"},"gitHead":"516910ae9bfae62513b95080369ed2be100b1c27","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/516910ae9bfae62513b95080369ed2be100b1c27/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/516910ae9bfae62513b95080369ed2be100b1c27/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/516910ae9bfae62513b95080369ed2be100b1c27/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/516910ae9bfae62513b95080369ed2be100b1c27/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n|----  | -----------\n| `--mdc-typography-body2-<PROPERTY>` | Styles the typography of the formfield.\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.22.0-canary.c96cb2e0.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-XtaN4tV8O9M7CNML3hCOlz8jPCGQLhN6liwQZLXRCaKqaHq7FZ3LaIAg67k05y8G1mo5LEk8w4Gh7yqrwbAqxA==","shasum":"c07005cefb76066b6f2774ed681a9b5f6b13a4ad","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.22.0-canary.c96cb2e0.0.tgz","fileCount":13,"unpackedSize":36553,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgrUv8CRA9TVsSAnZWagAA29kP/12vMofm8GiYddOuC0fn\nArRTOXurSZaLzuOzzmPdPDR0kXR3LMzaCUSuQ2+s9lNMmY+Oi+pPfkaINX/t\nIWxlrng7RqnpnSk2UVl5tS2oXNzU9P4kRZmcyu7gA6eyjIKq9Y1rsFMiLyGI\nSJ95HArmrbLIWfjzQBiWvHH30E8iJ6jsk9ghhQY8gOUPAmLBBsyQXGhnrXZW\nvtJz37Sfrm8QCOhe3R28kL7evoLhU2f4ayDK/2IeVnipjwuGDnBdU80IDTVJ\n9XFhgs7fK0as0gztVQJzJT/7GVOQAj7CrLHc3/wxESTNW3cJokdiYPO26frj\nwaazrPO6a4DtU91SnOh1F6kwddHEuZihiGEx4Qe0B1fOymit+uCfqpFG1EUV\nBQqzXbQJeBtUzAkOFJyXiYNCir4j9py+R1kRtn/cs6Ssw6nv/P1jE/iYm0UP\nW1U3exsv3/yPha/Me+bojgsVAHJiRxYFe2XkKBEHlD1hpiIdSdxd5c8bpRl5\n4ZD3ljRFAckSjyWZzNu6yOAJsvs53GnC4XNs9Rx3jNs7933qoHdDV6M3Pg82\nwMe9Axm3cYD56Hkx47vrDV6skIn0KjTWgkAP/aQ+lTRK+Ku0eyaaGr/1vMDC\nSkgaPGb5+PQeokYkIv/GXmb9+CKrsz/tHkoAJnk8PbAHUpNVHDzeCfRvHsmA\nodxX\r\n=yFJh\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCNAPhXMJW/0uhQv5f6lW5nBPbDOJWPvQpZj5t8LsV0EgIhAOGuqmDVMusK5jGtZcsKP5cepiz5+14OsZCcENuCvOWU"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"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"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-formfield_0.22.0-canary.c96cb2e0.0_1621969916228_0.3554644698689591"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.b9b0e330.0":{"name":"@material/mwc-formfield","version":"0.22.0-canary.b9b0e330.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=12.0.0-canary.4bb5eea2b.0","@material/mwc-base":"0.22.0-canary.b9b0e330.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-checkbox":"0.22.0-canary.b9b0e330.0","@material/mwc-radio":"0.22.0-canary.b9b0e330.0","@material/mwc-switch":"0.22.0-canary.b9b0e330.0","@material/rtl":"=12.0.0-canary.4bb5eea2b.0","@material/theme":"=12.0.0-canary.4bb5eea2b.0","@material/typography":"=12.0.0-canary.4bb5eea2b.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-formfield.scss"},"publishConfig":{"access":"public"},"gitHead":"18c2325baf4aba3a786f872ae497d8ee283800e0","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/18c2325baf4aba3a786f872ae497d8ee283800e0/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/18c2325baf4aba3a786f872ae497d8ee283800e0/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/18c2325baf4aba3a786f872ae497d8ee283800e0/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/18c2325baf4aba3a786f872ae497d8ee283800e0/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n|----  | -----------\n| `--mdc-typography-body2-<PROPERTY>` | Styles the typography of the formfield.\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.22.0-canary.b9b0e330.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-OwVXz4LaIpFUpSuxnKuFUKZT9KOk21yaAsj+2gxTGDlrLnun7DPPdJpy5hFvUPJbegIGUqiVQb/FZavkGbU+IA==","shasum":"bdfcacb5f69d096e4195bcaf43c3307c3736d2de","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.22.0-canary.b9b0e330.0.tgz","fileCount":13,"unpackedSize":36553,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgrWVOCRA9TVsSAnZWagAAHjAQAImqU36UAhDncS84QP+L\nQ5v5G7LGbjLFYLA0jzFGbhiee9H3WjphT0o4rz8fjEE0g/f50Bg6elA+9q4N\nIGKbhzOPqoGd/s8fZZCLPNsTCvWhhyijfhMz+trTBkMhFKeFpMKeuI0nNz1B\nlKl4EBlWZ8n+XRyBCEK7rmITTQ2e/G00TrPjqzNwvATPsIMHYbzvzLCLtB+i\n36mfk9thN3waOe+S9kDt/terUB7bLliQ2w85yOl+xY96rHGJaljWFNV44brd\nOa//hDv/ShHuD20WUwCRXJqHGjJKNY+RhUtexYlDyWI+HxTlSKkNFn5ndvlZ\nOvouYUlEuw2/VSdaw4YTFpa39MMBMZBMKajuK9udilSHlfkBp81ru1YmwHta\n8EOJEoW3meXaBijHH3kaaQzMgc+LmQ8eoH3T5w0+T9FtEddepFdm2nslazJq\n54K4GgBwkDk22AO0Ito0szzb1Rx8gbxkAzN3XDTpXikw5+nWo4IUMgtFNjtW\nVtfHTS+iD5SCDeLeb5mRuZojkEVM+qT6/jNl7ixOQ+1aXDtKWn52KeDEyIl1\nnjRiZ6lRfJsoUCoqwtMwxZ7FBdE34C2E7olb2ZxVOB94zJ7GhuLR2ZTV0amY\nSrZMPAauG5trpreanp/k7V57yQhprokNZUS3Kq6UPW5zDmwGzvYDHzJqYffk\nGE4t\r\n=/dBy\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCnRF/vPRivKOUK1FHVlRX16o4kq3Vbo+u6PHpeZDqgGQIgHhXx7Rf0CnxmE5oMBgtH9Un3FZrT3XiKjdVIU7dsBug="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"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"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-formfield_0.22.0-canary.b9b0e330.0_1621976398029_0.24513497219628388"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.ea2a8063.0":{"name":"@material/mwc-formfield","version":"0.22.0-canary.ea2a8063.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=12.0.0-canary.4bb5eea2b.0","@material/mwc-base":"0.22.0-canary.ea2a8063.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-checkbox":"0.22.0-canary.ea2a8063.0","@material/mwc-radio":"0.22.0-canary.ea2a8063.0","@material/mwc-switch":"0.22.0-canary.ea2a8063.0","@material/rtl":"=12.0.0-canary.4bb5eea2b.0","@material/theme":"=12.0.0-canary.4bb5eea2b.0","@material/typography":"=12.0.0-canary.4bb5eea2b.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-formfield.scss"},"publishConfig":{"access":"public"},"gitHead":"0b10a1191b28a4155d8f169ab9a5a3003efd3fe5","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0b10a1191b28a4155d8f169ab9a5a3003efd3fe5/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0b10a1191b28a4155d8f169ab9a5a3003efd3fe5/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0b10a1191b28a4155d8f169ab9a5a3003efd3fe5/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0b10a1191b28a4155d8f169ab9a5a3003efd3fe5/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n|----  | -----------\n| `--mdc-typography-body2-<PROPERTY>` | Styles the typography of the formfield.\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.22.0-canary.ea2a8063.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-dFc/qV2hAKjIi5tOBXjNDS5zIhNEgBYDQpP+0vk5JCksWXaegxm6hCPslmb5k/OGS/AQw5ZSj5tyvubKnQfcvw==","shasum":"0cefa3475a43486fe36b07893cae4e4e6e1cfb20","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.22.0-canary.ea2a8063.0.tgz","fileCount":13,"unpackedSize":36569,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgrWZ8CRA9TVsSAnZWagAAj30P/ivqJgPhLT1VwuNg6Zua\njUjD7oKoHsbMoX151+eAQNfdLuLMNkEpkZz7W7pMzWBkAelb0rwYevTKeibW\nhpDuxwGLH6WV5Lk2hKrYA66UMgm4LeahOM414zQaGRlfyrCmw8DFZLh3250Q\nOKudbFofraqZgrEGL8Se/imp5Z1dMisN54h9g5iOM9VUc0slWDPCcIJU/6Bq\nINGmrcXD1XzHz7WlBoTitT6cfr8WeZTBJkNf8G17kiGz+fSSibJ5Gto92y41\n0HtT6cY06VyuSzc0fu7sz0P895V9uqnVseLEUwLuQoZCZP9fMnqkDklpiDsL\n37/A2IZeSGO0zo92bPSOXqwqL3LgHeFdrBXly/WETE3Cz9t++8iflfuBDaex\nGyB3fOsXRHh78lzLMWbnXTQ1QBHBvvwYTdRYKtbbwGqvo8lw2uibEvLsTp+9\naSFHkx9cjdew3dAETf2Sy7oP3um7qOxNJXvHGJY/F3VfjCGVt29g2I/Jh/dH\n30Vl1PZAjm8m7aTH9St6yIIRsXv1F0OuXRmYJtjufqnpXhZRgdzF6m4aRpyy\nSxM4eHzwDfCob+TEmlEfy5kkK95s4kHutWmjIBrWGgbIuAMPmVvd+2hw69E2\ncA6N/mWM8l+t/6rYWVNrEMK2Bo5ZmJtrrDVT/BkulM9LqG8yIqQW66Zrfs2V\nvK5W\r\n=oVIR\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDq4yKyIblyVlUt3g2d1mINvnqsVqZX8RSis89kso5irAIgXNXWS3SQeVuUZsglBEptj8miKziBdrZCBF980VmYLdo="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"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"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-formfield_0.22.0-canary.ea2a8063.0_1621976700355_0.5873614527739894"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.60cd9178.0":{"name":"@material/mwc-formfield","version":"0.22.0-canary.60cd9178.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=12.0.0-canary.fadab3372.0","@material/mwc-base":"0.22.0-canary.60cd9178.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-checkbox":"0.22.0-canary.60cd9178.0","@material/mwc-radio":"0.22.0-canary.60cd9178.0","@material/mwc-switch":"0.22.0-canary.60cd9178.0","@material/rtl":"=12.0.0-canary.fadab3372.0","@material/theme":"=12.0.0-canary.fadab3372.0","@material/typography":"=12.0.0-canary.fadab3372.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-formfield.scss"},"publishConfig":{"access":"public"},"gitHead":"b194465fb86d4af03f65ac72d9b8427df2a2e189","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b194465fb86d4af03f65ac72d9b8427df2a2e189/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b194465fb86d4af03f65ac72d9b8427df2a2e189/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b194465fb86d4af03f65ac72d9b8427df2a2e189/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b194465fb86d4af03f65ac72d9b8427df2a2e189/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n|----  | -----------\n| `--mdc-typography-body2-<PROPERTY>` | Styles the typography of the formfield.\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.22.0-canary.60cd9178.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-3cxNkE8I4IA63iNLKuIpDPc9xcuVg8arZILXKRhqAsVbajU583Ja4AfnhZSMJSCVu2LwL0Iz9qcJSR6rTXLYkg==","shasum":"ab457757e7e737ef35a3d4e2527bf2734c9f17e9","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.22.0-canary.60cd9178.0.tgz","fileCount":13,"unpackedSize":36569,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgrYSjCRA9TVsSAnZWagAAgaMP/2NuvDZApyMOVSs6shL7\nUgSu2aQcOWBeGUEV9+FrwMEZK8rNw0f2ntXmgpJuuUleczMsUyN5+LlajdNW\nJZGIp+kBLCjhGnGajCaHpXtt1h5MAiySx6te9esjxtoHXuqFJeLB8c1hBkms\nZKCdrssH7RMJbFl0wvv2r+TVhaDGA2Qxm32Rv7mxn57aBKOw7YS0DHOVGo0I\nj4MNUE6QqxbT7EFZoMskPFlguWTIV42g0Hy8oD72L+l2UZ+YcHijRsm02rGA\nGtgqML8TO42hWyaLkmcYc0a42wqcsgiF5NObKWx6JpQfBha7aGYbUNk2fgsY\nG4rdUgCySnGENCCsl/rq8fZvlmF09bgOhz0toS1jy31yRpLYsFnUlFVkHmUg\nKwJ7kEnFtznQqxZev9f+GdFFMYkGGXxlMgoo6Bueqh5F2obWTfOZLQir1D2Q\nwBDLD0k4xycN6eGH5Z6+/4Z7k7+JU6B5LpQx1C8rEZeQ8sQvGhMR/fbBW/zu\nuPP3Z9jPlItaq0W9BJfERZ3Yq/i++8vYGzKfhtol0ZRZvyblgjp0V1Y5QbkA\n4NVy4a/aVPWBv7xgl7flaMETN5oB+aHE9peTRxM1Jz7zmrgELM6oekOFNXlC\na+xvkMjorny7xqvBRA9qm4MPVglTqWV4R55StOU5aV9czaL2LhPy7tewOtiT\nAVGl\r\n=AFnN\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDkdYikbTuy7JowhgqKCz+XzwM57vb08aSMOsqOO/0T6gIhAKc8ZkVyL2ZR5l4T2s/GhANvWk4xBXZdB91M/0Mw/d4G"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"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"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-formfield_0.22.0-canary.60cd9178.0_1621984418797_0.5146690369296154"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.2e2c75f2.0":{"name":"@material/mwc-formfield","version":"0.22.0-canary.2e2c75f2.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=12.0.0-canary.fadab3372.0","@material/mwc-base":"0.22.0-canary.2e2c75f2.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-checkbox":"0.22.0-canary.2e2c75f2.0","@material/mwc-radio":"0.22.0-canary.2e2c75f2.0","@material/mwc-switch":"0.22.0-canary.2e2c75f2.0","@material/rtl":"=12.0.0-canary.fadab3372.0","@material/theme":"=12.0.0-canary.fadab3372.0","@material/typography":"=12.0.0-canary.fadab3372.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-formfield.scss"},"publishConfig":{"access":"public"},"gitHead":"7da0cb4191a309db2509b3bcff390b7ae8e4619a","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7da0cb4191a309db2509b3bcff390b7ae8e4619a/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7da0cb4191a309db2509b3bcff390b7ae8e4619a/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7da0cb4191a309db2509b3bcff390b7ae8e4619a/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7da0cb4191a309db2509b3bcff390b7ae8e4619a/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n|----  | -----------\n| `--mdc-typography-body2-<PROPERTY>` | Styles the typography of the formfield.\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.22.0-canary.2e2c75f2.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-GDmGhkVZOmh7TdzadBINL64HwaSvEvU496m8gIdWWuBompl0ZX8TNlsbRevhGyuLKDFggntXqPWrI3kqYP1IZA==","shasum":"c238413606ef6fe5a9d0561e46d510e489924c12","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.22.0-canary.2e2c75f2.0.tgz","fileCount":13,"unpackedSize":36569,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgrZH4CRA9TVsSAnZWagAA00EP/RkrW9MfNTvpmjAcm5jS\nq9XeAL4RcSLEpyE9wjSrn0c4WOsn0ZpuyPIPjPALyDAI+crxQdX3ZFKxVbBD\noEHV8GAzKACmoYrqR/5WaV0ePfC/0kIb7iWS15uyJqgch5QtKTgEtPkBzZHX\ntXVxRvx9JsckN/I0khX8dG11tBGxDprKggocMVderAA/AuzTMysPrlgqJygI\nE6M4Iw2L4CEuKgrQcBSfifmGxR3b2jzE1HFYfRSKMzNOqKtZFRBfeDzL7RPE\np8OVmSO0Rmv7bd8QU8uIADFg57rJ2O+ns8WVF3ewrXR2tACLncVDuFXAnMLX\nxWAUB1j3y+gpRaK90kyUwhgHTzFvtZR3AnziK7kufU+9h3GWLd+IgXZBLzQq\nEXgPv+nhKI5aA6V3k8xZsdpqwF3L1Jkmm36pzmh9KrCVXpBnBlT+ej8m+cy6\njR2k+ussvb33IbP1gczoOb7WyHjtW8KfkqQWSIxvXHI3WVGkY81awH/yzRYh\n6+ocO+Vr5/Eg/IOO9/yjVS0pzPgV+oPz25Dfrlt7VDHya5IyJ3rWyAorFI+f\nz/VzMveS3tOAUdbGtcJ6Z2Zd2W8a8/TU7Caveul+07IAwQ5FV9WK+drujUcU\n+/bJW4/t6Uud+xLtQCQsaY9V1mGRsr0+ARU1GzrMe+e1jixwJpusx/ZZPKl+\nRCsr\r\n=Ql2X\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDHJ/G87VTuJvBxgolskvFjvcKdLT2MwhrqXtvrcVBXPAIhAL7sYk02PTBq4R0n5js8b4UR+D4tI/U8bB8BMBmCYX61"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"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"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-formfield_0.22.0-canary.2e2c75f2.0_1621987832365_0.2767705981947832"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.b99c77d5.0":{"name":"@material/mwc-formfield","version":"0.22.0-canary.b99c77d5.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=12.0.0-canary.ec31ae1ed.0","@material/mwc-base":"0.22.0-canary.b99c77d5.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-checkbox":"0.22.0-canary.b99c77d5.0","@material/mwc-radio":"0.22.0-canary.b99c77d5.0","@material/mwc-switch":"0.22.0-canary.b99c77d5.0","@material/rtl":"=12.0.0-canary.ec31ae1ed.0","@material/theme":"=12.0.0-canary.ec31ae1ed.0","@material/typography":"=12.0.0-canary.ec31ae1ed.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-formfield.scss"},"publishConfig":{"access":"public"},"gitHead":"5fda182a00532c3dce9d3841b88c80c56a8dc757","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5fda182a00532c3dce9d3841b88c80c56a8dc757/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5fda182a00532c3dce9d3841b88c80c56a8dc757/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5fda182a00532c3dce9d3841b88c80c56a8dc757/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5fda182a00532c3dce9d3841b88c80c56a8dc757/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n|----  | -----------\n| `--mdc-typography-body2-<PROPERTY>` | Styles the typography of the formfield.\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.22.0-canary.b99c77d5.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-Hc0vWdrPIPiB983LVhvOusr4bfkKLzh0iEkflJG4ByI5E+phwDFr3GIw/hpphG31NAzHoweAd9d2vQzXCWtUig==","shasum":"0979a5039f08d23edaaeacae97a3022a2c743894","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.22.0-canary.b99c77d5.0.tgz","fileCount":13,"unpackedSize":36569,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgrp21CRA9TVsSAnZWagAAyo8P/2uy2LlYuKawpOJfshQW\nYnM403bDbDfyWXNbdc7uKUCuaJPnVaH3sPMUJBoHwkm4CJGvS6XNjff6lQNL\n9Q1uOjPwriZBpRCJ5D89XwTy/ACivEZC0FiG/JD+/2s5keY18x+vbvwv031D\n9MOPepFlv1ambe4OXXFYRv0L8276XUGpmxmT7tqLMgBuhw3jj+kLo3GoeaGR\nThhHvGNMXWLTsZsVTNjUCtyvGGbseMzuRMgH+HbKdtAtRBP9HrHCVzt4W4fi\nF7ANQk7b32Q0Frcio7dxXGxWGH7Jw8njCmLx+3X2vbZhzYUz198gRDVSHVUE\nGPosIvEeTqPl6TsiD3fX86AyE1H5iOcmQoYIs7A6P67Y0WtoSiEETTT/xduA\n4YDFOYxhtQuicPExPtQWShxtGV/4X7v134KUAmf/izAwfP+O+C1t15cwmysB\nm6YkP1wgYOldQelIow0pY1K5UyZuDKT1DKvI0YxLQPKPBAqObsWkrL+kkeBL\nTP/licqeJaxRKL1+TV18LDmAtrYx0qw8ABtrBbnj13YRPagKUJo/oDu++/96\nN3Ay/jMYY3mu+vcvbj6CxTLN8vsFepC+zaJWSlChpWOmd7LdsEsVGpg2uREv\n/AYfm/6Clv2gO9acBMQ6fQIW1u18lYoUAU4QSnfYiWJbBAtAR7QQady18WIV\nvi9C\r\n=klib\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC+/VAG5PZNRZd3Z5wpqk9DpqNv7m7PTysOXzs4HMIBvQIga7qusBEwcUdm5uDNpxkeEd3cmsdAEl81KiilFa3y/nE="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"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"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-formfield_0.22.0-canary.b99c77d5.0_1622056373390_0.5060034124807031"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.0de82c12.0":{"name":"@material/mwc-formfield","version":"0.22.0-canary.0de82c12.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=12.0.0-canary.ec31ae1ed.0","@material/mwc-base":"0.22.0-canary.0de82c12.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-checkbox":"0.22.0-canary.0de82c12.0","@material/mwc-radio":"0.22.0-canary.0de82c12.0","@material/mwc-switch":"0.22.0-canary.0de82c12.0","@material/rtl":"=12.0.0-canary.ec31ae1ed.0","@material/theme":"=12.0.0-canary.ec31ae1ed.0","@material/typography":"=12.0.0-canary.ec31ae1ed.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-formfield.scss"},"publishConfig":{"access":"public"},"gitHead":"02037fe47532247fb8d3f160ce76eecc87a64963","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/02037fe47532247fb8d3f160ce76eecc87a64963/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/02037fe47532247fb8d3f160ce76eecc87a64963/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/02037fe47532247fb8d3f160ce76eecc87a64963/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/02037fe47532247fb8d3f160ce76eecc87a64963/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n|----  | -----------\n| `--mdc-typography-body2-<PROPERTY>` | Styles the typography of the formfield.\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.22.0-canary.0de82c12.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-ZrWLLlsXsV+krIzR7Q+IufdumoctZpQDzV7GqwBw4JvG5WBeGWEbnFnMpfQgBLul8b9kemUVPO48FctErIzAXQ==","shasum":"7b4b75e51c0da7d8d3ecf21111fae76f7b791612","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.22.0-canary.0de82c12.0.tgz","fileCount":13,"unpackedSize":36569,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgrr4ACRA9TVsSAnZWagAAOskP/isbn58dcLwozC9NeRZL\nGcUwlAKi2XylUr3m0iloYop/PLRJCD6BRhCREynQUA0Rkl6SVCNsYtm48UeT\nAGMFTvZI+Vs/r02CisZ99jl2e09nXce4YxjuwqjXLe0cCuYks8sD03zvh1R9\n6yZCkEZoS4AJmnfIOB23khcpC/9pkqICRT0OAEe9E0iGp5C0c7qfLAYMSc46\n0YBYWPlSPV0LLFNjuL9J9UGmTzOpjluEFDmFI+139id4I/vZLiAhNUGrWRtZ\nEa4O4i5OWQVPdnAQPxxu08LWh66Ck220jMR22ut7qWZ1ueb+x1WL4tq6FqeP\ngANU55ZiqfnfoUF8R5oUGysF6vEzgnN3fDkR8FBrEBQum5maa7jd9dm/iDg3\n1zzdhUPmB6YRHXpzVBAtkmYW2aCVgof35TAXe1m1/tGZSA5JzGU3JNUK8lu7\nSvaziG5PBy9eVIpijbPzxQUVF2Ngn4p1+KHH13MmdSqcZ0fCzAh1X7sWFKg2\nwdSm+08qUDEIjijZ6ZjSGZ8yAjOhW7pnlOS948vR0CcwQnAR++l/A29J6C61\nlUjZ7HjThhiumLlJ4Dpw0gBDbPYMmgLtSN1F1xoKGS80cEEuIDC6A0ZhNi57\nR8X8D8V2o2z4eB91rfLpMOKlSCj5NauOK2fLbGGkYoE0k5vQESHcioMKn8Ss\nBoZL\r\n=PK4I\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCK4z9K6gjUY0urN4DYv/ADqdKsmSW727OcrejPDFNBnwIgR1wgJh6eZYdfEWCaAoYOyEXoRwPmKONHfUBejqCx5M4="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"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"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-formfield_0.22.0-canary.0de82c12.0_1622064640510_0.40953618423358495"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.227a4614.0":{"name":"@material/mwc-formfield","version":"0.22.0-canary.227a4614.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=12.0.0-canary.ec31ae1ed.0","@material/mwc-base":"0.22.0-canary.227a4614.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-checkbox":"0.22.0-canary.227a4614.0","@material/mwc-radio":"0.22.0-canary.227a4614.0","@material/mwc-switch":"0.22.0-canary.227a4614.0","@material/rtl":"=12.0.0-canary.ec31ae1ed.0","@material/theme":"=12.0.0-canary.ec31ae1ed.0","@material/typography":"=12.0.0-canary.ec31ae1ed.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-formfield.scss"},"publishConfig":{"access":"public"},"gitHead":"882557fee992155765312df09397dd80bd837720","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/882557fee992155765312df09397dd80bd837720/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/882557fee992155765312df09397dd80bd837720/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/882557fee992155765312df09397dd80bd837720/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/882557fee992155765312df09397dd80bd837720/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n|----  | -----------\n| `--mdc-typography-body2-<PROPERTY>` | Styles the typography of the formfield.\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.22.0-canary.227a4614.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-qIQOXZvuf5QYdpNyyHdm5pMfC0g+q0SgYwJwP7Q8IG/XL0PBeTtK+NWTfw2ON4qrG99r6K5dLH7pb9P1bjAAjA==","shasum":"7ee7bd65c297bec5145c4ad4aa60b78daea4d580","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.22.0-canary.227a4614.0.tgz","fileCount":13,"unpackedSize":36569,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgr8KiCRA9TVsSAnZWagAAinsP/Rz8FGpGIg/x8xshaYBF\n36fxQxjKrcygt1pIKdh22X2MZ4q0WAsh8/TmFZfJYjmKnA0C4d51bJszILn/\nZb2PCXZDENL7kARzug1f8RHIln8r1laUoWPvhai3lHXyIYzT7DJCL4JwJ6Za\nzfPXa7YxjI3ZrrAagiPwi6UPaQKNxDkB2vLftPA7EikGUMYXfN/Xi65lB8B4\nzOwfuY0BM2vBFpVWE7ACjko916zExwm97vvdJCxuYGkewcvDWp7JI45GGVGk\nczwKHZY5KJwHMpMmoXVr5xk8Y8e61c6Jt/G8sF2x6U2YubVv4P5Ni8hPh3dx\nLrts8IPpiRI/jc2tLZ8695Lvkqu7GfAXWYSF16wqtFHw4ybpVbQr2ZE/BzX9\nt02sBuejn03u262LxevoxfFvZg0QJwN0DTr3sS+VW8pMkZX4kq+VCZxmXRKF\n0c3+9tl7cw2TizKwoBki7ScasI7MgWlUDWe5UsIWe16vHrlsGey+te5B7G9t\nCMK+QpJm3i+k45uH/6WzoB2mNR7NUbTn2oXVo4kiBQr6xHg3VXYPJkZmeQf5\nOdrcChRhLBSeS07We3xjdCeXTXtxjYWjoo6wAF7eY2odXXbtrHGXIP20Pz0V\no2c28g/vcmGzdOThgqeJX8kDCxVIH7wF+hpRJxleqiaYnt/IokJCTw7WH0PG\n0Jde\r\n=dptp\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICwCSOSsvF5q6nnRyhav/Q9tFLFB51O3Be2O/rQ2NE8wAiEApxz8Z/xmv7JY1LNRsPqA34mswjWMsQDYLcfoUZi1xN4="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"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"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-formfield_0.22.0-canary.227a4614.0_1622131361934_0.9456775213566029"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.b3d21d31.0":{"name":"@material/mwc-formfield","version":"0.22.0-canary.b3d21d31.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=12.0.0-canary.8530d3514.0","@material/mwc-base":"0.22.0-canary.b3d21d31.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-checkbox":"0.22.0-canary.b3d21d31.0","@material/mwc-radio":"0.22.0-canary.b3d21d31.0","@material/mwc-switch":"0.22.0-canary.b3d21d31.0","@material/rtl":"=12.0.0-canary.8530d3514.0","@material/theme":"=12.0.0-canary.8530d3514.0","@material/typography":"=12.0.0-canary.8530d3514.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-formfield.scss"},"publishConfig":{"access":"public"},"gitHead":"0346549e5547eca4c47152eae0253d802633b850","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0346549e5547eca4c47152eae0253d802633b850/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0346549e5547eca4c47152eae0253d802633b850/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0346549e5547eca4c47152eae0253d802633b850/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0346549e5547eca4c47152eae0253d802633b850/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n|----  | -----------\n| `--mdc-typography-body2-<PROPERTY>` | Styles the typography of the formfield.\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.22.0-canary.b3d21d31.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-E6ImuCuo6k/AEl6wJnCjJSKhcQenpO0kYnLRF5K4cSQwpnGQLPfqjSt7hfj8ZRGxA6Fy9cp0K0dJugrE9EZ4mw==","shasum":"178de6bf25168d04cb696f1dde127ed06cb134ae","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.22.0-canary.b3d21d31.0.tgz","fileCount":13,"unpackedSize":36569,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgr+icCRA9TVsSAnZWagAAZ/8P/1Xnf8Sc7EdzXmKl9YnF\nhF/wIfd7iPEXKkNkbE0ic9v6aDBbshjNdvTA2BO74y24IHmPki0GbJwRwecf\nEHtX9wmsdO4IjbprVQ2OYwMAL8YIRCqL8PRT8Daao4O+u95kEtiYWNMSz0r4\nMIiFVLnGKBIlofbxIt8yiw/w7jKDfQtb9rsU+En4YG3yLCoeRaS+rNxQpceX\nBmUBuz5AveO2Rr9S6WrPUqPAQXy95rce5LY7mrUcVmaf3PkxTxhpPDyHnWY2\nqU/7OdgSUyGTt0Mlu6dIuKdC3qHA7vM623NDatiaf1o0qC5oUYnUoNZ89Z6u\ne949Pwyl7Zeeo/LuIlkEu93v/T5xQI19ayy7tbGGwoHeS+4pJkfgU+y9XLhN\n8/2FzouL8NwBrhLxwAY4NG42e/qpGS0TfMWrkoMzLZgof97CPmnwDW1pGMNs\n4nG289ACdADRxSskmRRgoyTyb40zJNM+wym77vBrjrR7zkjwGDymjwSP6w9q\n9Tr+p3aIzNtoLPKNFsLMcF+f1czaORqrobgE8UGc8iEw4iyrAVHmUIg1lDu3\nkk1izi1E9uEgqQAwYUD7AIddSaZU5tx8Xkl7uiirhWL+Uufry4WqcEr7E7JL\nTR6Elhxaxye6ZSJ0z8hYQEb4PD1UYRFyI6MiYG3g01fQ2aB7AppETarnTGVH\nG0X5\r\n=PUMm\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHRdDgz8iEeg1MBsx7Ufo2o2tU2vjgs7FJJVF1yTi4hCAiAQkIEqvDtlDPB7sm1B+3mB8lPMAZuaTMnbgEGnSGe9Mw=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"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"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-formfield_0.22.0-canary.b3d21d31.0_1622141084119_0.9461690052729752"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.288c33ec.0":{"name":"@material/mwc-formfield","version":"0.22.0-canary.288c33ec.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=12.0.0-canary.00b5899dc.0","@material/mwc-base":"0.22.0-canary.288c33ec.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-checkbox":"0.22.0-canary.288c33ec.0","@material/mwc-radio":"0.22.0-canary.288c33ec.0","@material/mwc-switch":"0.22.0-canary.288c33ec.0","@material/rtl":"=12.0.0-canary.00b5899dc.0","@material/theme":"=12.0.0-canary.00b5899dc.0","@material/typography":"=12.0.0-canary.00b5899dc.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-formfield.scss"},"publishConfig":{"access":"public"},"gitHead":"69149a859b2cb2efd7d7cb7a55acad20d60fbca2","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/69149a859b2cb2efd7d7cb7a55acad20d60fbca2/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/69149a859b2cb2efd7d7cb7a55acad20d60fbca2/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/69149a859b2cb2efd7d7cb7a55acad20d60fbca2/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/69149a859b2cb2efd7d7cb7a55acad20d60fbca2/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n|----  | -----------\n| `--mdc-typography-body2-<PROPERTY>` | Styles the typography of the formfield.\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.22.0-canary.288c33ec.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-W0s4XDpPfMSrqptylwRwfCzhpPHnJ4pR8LmBmZzo1psnIEGzQ5SKGfjDg/iVzgGL9O6toOgEefgkoxm0IWixJA==","shasum":"07edc24ffe6be02976a5ce5fc039e8cdf20e3400","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.22.0-canary.288c33ec.0.tgz","fileCount":13,"unpackedSize":36569,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgt9zXCRA9TVsSAnZWagAAFp8QAIWjIj42dRPdZVUSySB2\nqXBWWCGn0m8o+CcZl/dYjzZVAZEz/hKH5tnW10lFkoU//+ZpO+L+1XtV+GUW\nxtKg1lGOrQ3sc3oW/ZDj6N1eV5tBS+O1q0+Pzegrsmrkq/Iga8JuXe/uHQpr\nG1yCMXltVbP9NdMfzDfDR7cLUppiGzir6GixwheNp9Cp9YSAgo/vyI1vR31o\n8VoqHdkDjHesZkmC1XPafGRlmRcgoyxnRsQvDaBqQyoWA4JL6XxlZEZ96FAM\nDivihUoOaNRE/4lVyoVpu6IgpPKXO1L3nMwFR0EY6NhkV7zIkUTQ+Kfm3Oov\n0kQrqo15YshAO7CtHpEXwNkms6wAKm8TyhdWhsddAVUT+OqePjVNAnwrtYyL\nNkZk+5xfFFpBjJBUypQnDHKTWs2DuhglRx1kK80drJmzh8kTbd4y03Q5RNNp\n7Fwuix2SzEgfAokgd4+WmejUYxWonG6ma78gR+cbcloRT91dl2VYbT2ZZcDp\nLN/u51uJxD3FUr5zhYg7u7CFBcKRjl+jKtsxRmU6tbN8uC2TERLqzpZNEwKX\nQ3CUwMSEASqYFS/Bp5by6PKAIfe+W2gqdKyIcBDovpU9wBlfpZVC0xehbwjG\nj6jZ9RAVZVDpaGGSezaPM9qjv4cQbX3RdpojsstwF59qQM8lAzS1Izi9pdjv\nQiVH\r\n=BCo6\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBmDluD6hxwHFTQsFBMWZN4p8Cd+FqA8ic6fadvYI4hpAiEAqopFg+bkjNnykfgzUUKMq8WuyTRvYEsxQ7W7ZiOuv00="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"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"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-formfield_0.22.0-canary.288c33ec.0_1622662359125_0.7965338776217619"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.7eb7ccb0.0":{"name":"@material/mwc-formfield","version":"0.22.0-canary.7eb7ccb0.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=12.0.0-canary.474de7878.0","@material/mwc-base":"0.22.0-canary.7eb7ccb0.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-checkbox":"0.22.0-canary.7eb7ccb0.0","@material/mwc-radio":"0.22.0-canary.7eb7ccb0.0","@material/mwc-switch":"0.22.0-canary.7eb7ccb0.0","@material/rtl":"=12.0.0-canary.474de7878.0","@material/theme":"=12.0.0-canary.474de7878.0","@material/typography":"=12.0.0-canary.474de7878.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-formfield.scss"},"publishConfig":{"access":"public"},"gitHead":"54dcd68c7454a24c791e5bc1bacb53ff095de147","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/54dcd68c7454a24c791e5bc1bacb53ff095de147/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/54dcd68c7454a24c791e5bc1bacb53ff095de147/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/54dcd68c7454a24c791e5bc1bacb53ff095de147/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/54dcd68c7454a24c791e5bc1bacb53ff095de147/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n|----  | -----------\n| `--mdc-typography-body2-<PROPERTY>` | Styles the typography of the formfield.\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.22.0-canary.7eb7ccb0.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-ek8KJY2Qb43cl5ZkgbwVy04U3ba6onKW5HR5377DGVmYshjaosGAqd5i/1InK4wJoDtsTrFathUo32pxMB4Ugg==","shasum":"4cd8524b3fddd9681af611e3c53afff954e3731e","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.22.0-canary.7eb7ccb0.0.tgz","fileCount":13,"unpackedSize":36569,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJguTN8CRA9TVsSAnZWagAAPP8P/RSl098SUPkD9iaBIDsE\n3UhXaH/oJZU33lLxioWoxEilXNDmth5XnwJoKBWuHfUVBY5ob9r5anJJe54q\nomTh2AnPXwLDTRXaLxu1FSgtanfdi2cZqzmVj+cn3fo55WxJVr7uxxEGh7k+\ngv9eOx8vnsY1xJ5aU2YSOnI+cqMEfhfXs+mq69eFpfc4roTQjSdl+/V7C/aS\n4+ZQdA+eSOmhSPOUJH5/fhX4gD+hD+cuo86lmi+rGVq6Yulm3Wgx6ZJkrfpP\nRbdyIrJwx+GBXt2t/8PLWvrXi6JOuofPgr61gEqRukJ3718/OWjAcoGBXp58\nbWsnkpAW+94eE/Ijn85tiD6xBMolP4Hd5R5bdEmxju8wZxxkSDZhe5ApAYXk\nMi4yumZFXCqqEHDoAHBWv5lAl0xcl2qQJDf7RRmPfwmGtdu5zdxkCWAvulkM\nRgq5WSQzK6ALeo0BUgQI9b3/bOD23Ay0+oWmyg0tqqVdTGprS1adyKh2viyy\nlyIPiwci18ItG1k555yXWXCK46UADoqLadWBgy5rE7e4+LqGPB159aNCg2fa\nGxmxirMCoKZPFLWZchAldrO/ZbNsdsJYl/HUNYHmdqpwvI8LX7u2UnegsyHJ\n0V2KojPfLnmRDdjSAQzilDA9+orF7jKvdqUxlx98AHh2g2TmBfgGouQoA8KZ\nhMvS\r\n=rHuc\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBc+NivUfBX/UWWAUL04rbZ/r4zMD4bfllESuwGQxF2DAiBnoDRFp6XbN6l6Cg7uAJqofTUyUjfkYmLgEuIWoiAE9w=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"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"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-formfield_0.22.0-canary.7eb7ccb0.0_1622750076427_0.7294396707443638"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.7fcc0726.0":{"name":"@material/mwc-formfield","version":"0.22.0-canary.7fcc0726.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=12.0.0-canary.474de7878.0","@material/mwc-base":"0.22.0-canary.7fcc0726.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-checkbox":"0.22.0-canary.7fcc0726.0","@material/mwc-radio":"0.22.0-canary.7fcc0726.0","@material/mwc-switch":"0.22.0-canary.7fcc0726.0","@material/rtl":"=12.0.0-canary.474de7878.0","@material/theme":"=12.0.0-canary.474de7878.0","@material/typography":"=12.0.0-canary.474de7878.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-formfield.scss"},"publishConfig":{"access":"public"},"gitHead":"55ab1f053532307fcc5a331fdc4718c7d8e5d8dc","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/55ab1f053532307fcc5a331fdc4718c7d8e5d8dc/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/55ab1f053532307fcc5a331fdc4718c7d8e5d8dc/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/55ab1f053532307fcc5a331fdc4718c7d8e5d8dc/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/55ab1f053532307fcc5a331fdc4718c7d8e5d8dc/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n|----  | -----------\n| `--mdc-typography-body2-<PROPERTY>` | Styles the typography of the formfield.\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.22.0-canary.7fcc0726.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-jwwqI5if4FUcdGnQPSXHEu5lfrVVVToRFhNMBmtztSdDR4JaSSDLsZ6D3tni2KJhuKefHa8bcGqf0UhU77EnkQ==","shasum":"33e6d6084d7a2e8f1daeddd0ee75969714c56149","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.22.0-canary.7fcc0726.0.tgz","fileCount":13,"unpackedSize":36569,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgvr2QCRA9TVsSAnZWagAAw3UP/iHf6e83QUOP7CymnokY\n5aDXHxDrVjqSfGrfr+IZdns5w14d6Sg03pKwlWuOH2Oee27YjjtvUZYiigFT\nAEuEMpdX/KmnZlhjwSXTQaFiBO6qOwSLCZA90xnQd5oqTTL19W1CXyoY+LSH\nJnMeuwsqbkKSnCOalObwSMYfMTQSJLjyZhuChOmzNbcqSaI135vvxZD9b9pX\nRrvrirQDNW1tw6a5j5EecVk0wLyzsDxuWGMJW+Djbk/BXdXURIrHCRMixxcK\nY1er4uTd4cEF7q12KS/UcGzuzPSyE3Gb5v4FlbElZvAxVRyyrTl1lqGV2xB6\ncqCW2YHBLKs7qaNFFKTmjl7ACpoOM4MlYxjE9Cagfm5OmtDpXUjH3HVVnCOR\nRsNPg8q6zXpGV/CLJpt0ryGzS/cMKAG0pcDhBbuzdErzSCmuVbF5TKkJ2zqT\nQibxHm1be5+n0J+CJpUsN0hcOs01cfa74N9INIz/XGGyInznYvfVqF4ZF6gt\nyYA8KQvnrImwbcf57Rx13CnDrTGwPugFDqtQld8Ljz1KfGsnuSefBIBqoblO\n6OA1gFThqfRTqVBe1NbUDA0aP02BnbG0PMjp1pq1wq9RZjqmlgjCsUWJAwQr\nTHNXv2AE3q3DU+Fx6fzGn70b6OOifh5Ke5P2EjJyMRPdL55NugEqz93Zv8u9\nGZP+\r\n=w3Dg\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDlwyAujpTDaJ4u30smtCmgpOJZdnR3jAgy4ExdOMEyGAiB8UQGXp28fq3C/51PulPfP6w7H9egfT5P2qMXbhpc3yw=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"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"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-formfield_0.22.0-canary.7fcc0726.0_1623113104102_0.2545018330139204"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.220a4e5e.0":{"name":"@material/mwc-formfield","version":"0.22.0-canary.220a4e5e.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=12.0.0-canary.474de7878.0","@material/mwc-base":"0.22.0-canary.220a4e5e.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-checkbox":"0.22.0-canary.220a4e5e.0","@material/mwc-radio":"0.22.0-canary.220a4e5e.0","@material/mwc-switch":"0.22.0-canary.220a4e5e.0","@material/rtl":"=12.0.0-canary.474de7878.0","@material/theme":"=12.0.0-canary.474de7878.0","@material/typography":"=12.0.0-canary.474de7878.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-formfield.scss"},"publishConfig":{"access":"public"},"gitHead":"43930a9e907fac042066906c7c9c4a9bc26e3233","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/43930a9e907fac042066906c7c9c4a9bc26e3233/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/43930a9e907fac042066906c7c9c4a9bc26e3233/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/43930a9e907fac042066906c7c9c4a9bc26e3233/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/43930a9e907fac042066906c7c9c4a9bc26e3233/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n|----  | -----------\n| `--mdc-typography-body2-<PROPERTY>` | Styles the typography of the formfield.\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.22.0-canary.220a4e5e.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-fiJ8EFAbe1VFMoUgopq9ZmgZcC5tvu495dOriXNDYVtF4PYsqTHgjOm1Ucc0saODDRFNfsTQDVhNz7o6nChStg==","shasum":"648a30f9dc5596dc0c5c7a47e7e0f769bd252045","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.22.0-canary.220a4e5e.0.tgz","fileCount":13,"unpackedSize":36569,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgv625CRA9TVsSAnZWagAAYFwQAInMz9GtUUyh72rQm2So\n3ezXwxVum6lckIT3HSRGIN6PLrXqR0DhAAnOTCL8xwxH+n6ao2rWqo4Sqvhe\ni0V6RZQgaZyVFzotRfmk0QS0XE152Mc4dk2T1TEG4Gx+LwNMDXQ1fIH9zz2k\ntCRJUVvUzgglhHJbPgfHIV6gZCGFFwiwQ+tkM1YS9XyDdP3z83MiFU7Z2oMH\nenDKV+5uc1JacRqnrxAgqg6C9ExdyvKKKHQLASZ7fO7l35YxFUvbbTgsWcdx\nqBA7syMuL3GUmE+e36KwWaLplCE5Lqh7TORme1mtmKLjM/6fdMzbTk8YXnAk\nxRW1awBgOUsExv89dJ+yWAHR3Y3VS0r7SIXr0UsnFLk+pkdqyOC91Bo9xl6T\nZLPl5x34kwo/JuzK0CO44opCDlCw1Smkf0FXzcPm32+ooKR1Kjid5V9VNoDI\nsS1OF+C0eHhPzZ8PCQkYuVBDmLj65VKAV0f9yaTdeuKh+ziJH8SWTYKDsCM8\nPKTO8yaY5vSD/2+A4zC/6c4bcvet2fS5PniVBeJQ7tXvajICC+yPTR77Ya8u\nzebahoWiyFytcFsfQ/3uI+IG96x3jz3fBBnUDt3QIWeTKA9NgWDz9UMt46HG\n/R/2aze6/xADvbSBYhaI+I/4gWwJ0G89yUtFvdAyhHe0DjhKLCNrR3spvogU\niphu\r\n=XgNH\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIB7Sun8YnEDpkpCHuTqySY4hlmTIC1KEO9OwB+QQsARiAiABaqdpV16D3X8Olu70BVsvwkSkhiSiKr7oFsqMf/OtzA=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"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"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-formfield_0.22.0-canary.220a4e5e.0_1623174585155_0.9069254157221709"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.6b2d6ab0.0":{"name":"@material/mwc-formfield","version":"0.22.0-canary.6b2d6ab0.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=12.0.0-canary.474de7878.0","@material/mwc-base":"0.22.0-canary.6b2d6ab0.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-checkbox":"0.22.0-canary.6b2d6ab0.0","@material/mwc-radio":"0.22.0-canary.6b2d6ab0.0","@material/mwc-switch":"0.22.0-canary.6b2d6ab0.0","@material/rtl":"=12.0.0-canary.474de7878.0","@material/theme":"=12.0.0-canary.474de7878.0","@material/typography":"=12.0.0-canary.474de7878.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-formfield.scss"},"publishConfig":{"access":"public"},"gitHead":"b5388003b8ae379bc5c274e40db94c05a19d7ea1","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b5388003b8ae379bc5c274e40db94c05a19d7ea1/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b5388003b8ae379bc5c274e40db94c05a19d7ea1/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b5388003b8ae379bc5c274e40db94c05a19d7ea1/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b5388003b8ae379bc5c274e40db94c05a19d7ea1/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n|----  | -----------\n| `--mdc-typography-body2-<PROPERTY>` | Styles the typography of the formfield.\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.22.0-canary.6b2d6ab0.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-u0ZbTqW5ujeX9FY7aDT/6rzVvdLdTCotbZwr9qH3i2EH88dGbinQNLLZx6Mt449sOHJ9KcJx15ZC/ZklWAWhtQ==","shasum":"e54b6c3c01b06b5a137a8693705cb49e64591580","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.22.0-canary.6b2d6ab0.0.tgz","fileCount":13,"unpackedSize":36569,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgv7icCRA9TVsSAnZWagAA/dYP/jqS+CFcJuA47b44Gqih\nPeTnhxmUp7E9VlGPF18XuUiVBiZgl6amWwYFkNgpHlbp6VpiSL86lIVQE9+6\n+mP6hYNLOSVTl3IIA3HW/IQJyzhfQRvkZ+/aYmIxgaIn01GcjVkK7MUU9rnn\n5OMlvzeqfUddWCBmqEPUCl+xgHJAmcyF7Yd9oLPvVANzAEtQP8OKes9P6a8O\nRgDjQswesywtZEO7r00Sz+vG0yVI1BL4anBehpZ8FwS5nzQtYou92Fht4kHN\nRFCkEWuko4hfWx1W76j0COtSELF4KzvKPd8zSWZASXzIxg4/XBajWrsH+S1+\nVVTtnoSf2f45KY9YEbFTCl8z45G4FKYu1ALfqwEY5RVLvoQ4AICcrFh9rkld\nKg3p7sOlBKHUh2oEYj1uaJx28CZvx5aFUp1Q8J3SReAjm++Dy5ht0QwrolLi\nUMfA5viBVIxCY3a9AFIipi8NmR651963yDmOknT88Ev1HnfAMXzC0IavIWZ1\nbwahYdKEvK3sTPSqH3ThUnaoYtqABu+LLefB+4ZzpF4782O2ThXGHmap8LVB\neh0PJNLRud+qEPwUZkbfEOMeSo+sjqpmoKQ2TcIus+RdylANCa11+EiniEex\n+RC4cBUHeho9QIzOE/Bp+JGqItd630HgUvKz0BnQbkpOBB+VDgxkfnFmza//\n0pvc\r\n=Mclr\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCi5ocN3AN0guYd7aO8J4fxxdj52kqXgpRLZeCbzY42IgIgA1zTFaSPX+yiNMXLDnKxcL/I1RUqnY/fVj60gBEupos="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"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"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-formfield_0.22.0-canary.6b2d6ab0.0_1623177372087_0.8842536705334698"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.2b20825e.0":{"name":"@material/mwc-formfield","version":"0.22.0-canary.2b20825e.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=12.0.0-canary.8415ae585.0","@material/mwc-base":"0.22.0-canary.2b20825e.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-checkbox":"0.22.0-canary.2b20825e.0","@material/mwc-radio":"0.22.0-canary.2b20825e.0","@material/mwc-switch":"0.22.0-canary.2b20825e.0","@material/rtl":"=12.0.0-canary.8415ae585.0","@material/theme":"=12.0.0-canary.8415ae585.0","@material/typography":"=12.0.0-canary.8415ae585.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-formfield.scss"},"publishConfig":{"access":"public"},"gitHead":"8790f27506406085c946b5033334ea71328fcb6f","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8790f27506406085c946b5033334ea71328fcb6f/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8790f27506406085c946b5033334ea71328fcb6f/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8790f27506406085c946b5033334ea71328fcb6f/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8790f27506406085c946b5033334ea71328fcb6f/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n|----  | -----------\n| `--mdc-typography-body2-<PROPERTY>` | Styles the typography of the formfield.\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.22.0-canary.2b20825e.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-xwuDJGcSlUQt4izbPgkUs9RXouGg9B9vMEIU9whTFgLZKXwY1GcsukoW55BadjUsW9UPCwgx1tsbTetyukFTGQ==","shasum":"4f3d1193f20b038c2c970b1e99892435cc63e68b","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.22.0-canary.2b20825e.0.tgz","fileCount":13,"unpackedSize":36569,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgw/ZZCRA9TVsSAnZWagAAQqEP/jarQeM3eoXW/ZhQ9Ezs\noxgalfjpKVs4oQS2VjVg7KrCZn389YEdbZObfifYeBa9O78Sr/ZRTgNmiQn8\nFTl6w6DDqeddP/PRdGy2SFrZTr+BoL8b5UrxAFeqlbDIvq0a0M5ocANYtQUn\nY0kWzevn4pylLgocz4vnu4q7T80d3GWsDhNCjbniUnXT3+ngZ6DxMjKDTH8N\nychzps1RIqovv+9JbHo/7fatc5HPq/MFgK9HvwEtjB0kNmoz7WOGaveY3TQP\nNHNjsWdOeYzTcEkCTUfj6J2mUgMAHCTyomDK8DE1ae8RVi2rUsECy6ouzDpW\nTnuVEJf4+6LJG4bKiO6Xauwpwyxf+S+LO2FYEDbH3xnDbFAet3QV7+cgVCVL\nIqjY+Z69Pngd3Co0GM9L5xeDUemJTMXQAiZscCQlxsWuLFofnWSQTe0IDbqX\n0QIfc1ainVi1pjwjaMeUsRnvgZ3CpvEbrtCu7Ig1v0PXd0zcw2TKKATFlft4\n+JhAiahYyTSMhZO8SwCrhqTCXvpC+GeriswceiP7v5p2lBQGMY+pg1SHJkvm\nI7egG/R/lkaX5SG0JXCY77jsMK4CdrWoQ+musy2bipgAcmAC7vU9domrHkPw\n802HrNtMUD3JfQYESI0pLMlM/G/Z7D/2mrfmS3PvPfiOb5gAZXu1iS8iZHwj\nd5dr\r\n=1m44\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHJ0bt9S0YPQUeNi850M+DR4wAxsSWMASBVVJUa38XqsAiEAhzNYKXWI0/WncEAYr8j6FVDs/lPh8eLyXBBAvvFu2GY="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"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"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-formfield_0.22.0-canary.2b20825e.0_1623455321520_0.606042233345061"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.e1511867.0":{"name":"@material/mwc-formfield","version":"0.22.0-canary.e1511867.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=12.0.0-canary.8415ae585.0","@material/mwc-base":"0.22.0-canary.e1511867.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-checkbox":"0.22.0-canary.e1511867.0","@material/mwc-radio":"0.22.0-canary.e1511867.0","@material/mwc-switch":"0.22.0-canary.e1511867.0","@material/rtl":"=12.0.0-canary.8415ae585.0","@material/theme":"=12.0.0-canary.8415ae585.0","@material/typography":"=12.0.0-canary.8415ae585.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-formfield.scss"},"publishConfig":{"access":"public"},"gitHead":"37d9e0b693215142b4667122baccbb1b6fc9f835","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/37d9e0b693215142b4667122baccbb1b6fc9f835/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/37d9e0b693215142b4667122baccbb1b6fc9f835/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/37d9e0b693215142b4667122baccbb1b6fc9f835/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/37d9e0b693215142b4667122baccbb1b6fc9f835/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n|----  | -----------\n| `--mdc-typography-body2-<PROPERTY>` | Styles the typography of the formfield.\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.22.0-canary.e1511867.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-I+E4CiwtWnPtKe8CIoYpI0hpgyEeohscK75oCcxy03hH0xUBElSHQ9Ua3i8EJM0W674m2jTyoZDxNDJXfCaLJQ==","shasum":"72ba5743ba787fafe2a2654082af77278e4d8127","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.22.0-canary.e1511867.0.tgz","fileCount":13,"unpackedSize":36569,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgxAZYCRA9TVsSAnZWagAAv60QAJzO2kOE0NTo5SEHZNl7\nb3LUZXUZ7NuMuJn3tdbR1jklk4Q5A8sWsNpu5obufC3aBEmkx0m1P2E/BZ9P\nfUGS6quyygtGVuDQCnkZDhZjKKAvjhM34K8WjsyYS0DP4WQC3UGGI+wsuA6k\nQgo3wlSduENGYzfxJTy0tqq4IXaTON695Ny5bly37jtyMekC0WH1EPqSXQUz\nWOjNiNEVBsUY63BS7X9v5/z7I3TcFCMQX1W9Ky3CSNw+CIVuiWPFaRcsOliL\njkbaI33imDgdezh7B0t5WkHzSmd8YRIbqu2M2RUW8r19fANHWtwXUTAVyCfV\nlclrF6dZy3W6eyZmquVHuKnAwHy9ihu9Fj9dNYAYhBaQogNDzcTf+8AcNTaT\nPCeelyUsTF0kCf2t+VpggqH6ZIX7uHtcvT8TgFB2kRKclUEqQYsGMtEwufAv\nL8DWoBTNzC0TuRkuILL6002n/6q83C06Qlp8Mfs+G3QeFHQ7iPplYkCt5bcH\nOFQhOGsjJjPfbum8uNP9xNWdY1+arqpl66jsAfnCSU2+Qr+ikHEl8DJu9OsJ\nwfuPTEj9NpoPoXqpJWgBNrXUErVxsyP20OTXobzI7/r+q8NeMQIw0OmayKMB\nqekzqVCy3U3Mw9naL+Zjvao3Jzn0MHqm4Hv9eC73Grxuwcq+MFXNWhW/wfWy\nXLZu\r\n=RT51\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCPJxRLTtTUarY21BXrRNLyVEwMbRhd9DcknNyPHUY2ywIgFV/Kv7xwJEZNTiAchii8/u+f4/pBbDhhsY84yWK5g4s="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"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"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-formfield_0.22.0-canary.e1511867.0_1623459415965_0.4498728584165874"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.ef4a0c0d.0":{"name":"@material/mwc-formfield","version":"0.22.0-canary.ef4a0c0d.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=12.0.0-canary.8415ae585.0","@material/mwc-base":"0.22.0-canary.ef4a0c0d.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-checkbox":"0.22.0-canary.ef4a0c0d.0","@material/mwc-radio":"0.22.0-canary.ef4a0c0d.0","@material/mwc-switch":"0.22.0-canary.ef4a0c0d.0","@material/rtl":"=12.0.0-canary.8415ae585.0","@material/theme":"=12.0.0-canary.8415ae585.0","@material/typography":"=12.0.0-canary.8415ae585.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-formfield.scss"},"publishConfig":{"access":"public"},"gitHead":"97de9eb21ffb99cc05f4ad3fe8dc24ffcb569bcb","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/97de9eb21ffb99cc05f4ad3fe8dc24ffcb569bcb/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/97de9eb21ffb99cc05f4ad3fe8dc24ffcb569bcb/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/97de9eb21ffb99cc05f4ad3fe8dc24ffcb569bcb/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/97de9eb21ffb99cc05f4ad3fe8dc24ffcb569bcb/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n|----  | -----------\n| `--mdc-typography-body2-<PROPERTY>` | Styles the typography of the formfield.\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.22.0-canary.ef4a0c0d.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-HWenMmujNVRGU6vFP4VWSn8qnDy7DeABJsE+FE12NkedMZdgZXQWo/ZlWaGhBhftqpx/EQ0+vko8LLYN3CBg5A==","shasum":"011ffac5a95af71d35f03276032ac739cda6bc17","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.22.0-canary.ef4a0c0d.0.tgz","fileCount":13,"unpackedSize":36569,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgyQS9CRA9TVsSAnZWagAABioP/iT1YTZ3JV11Daf9HWFX\nzUmu2NLL5yIUtSHLNzSCtUStorcsh+3ceXHhS34/HT0WHnwmRjlOuro5qD+w\n0WgX7hbiD3VUGMzmI7c2j4/BI6BTPcmS1n3+qQARkozUWjVkBLAae9z5D72P\nlchEM63sy3BqPo2JMV2Dxmprfr3RXCLApqk2mAZQcFgFSG33e1AFo5BR+IvF\nYx2+rGRjpYEAbNUjELoqwymJD0Fg12E+dYp+oqNSQ3LDbKGgFcpojiCIXGBj\nghqZVHIKKPLUeEGQThs+31Bda5a7tFgCzAF9kKtwjRV8nhe4TjXQAOO0Sqv4\nzbl0zYxlLKFTseG2XGaEVxE+OnbLVhgn36fu7ilZaOvmEJayYKHinPKDTZZE\n7JzsREb6q6OF+9NnrbdzJ9du0jkkVrUUCkps8+OuJ/eBYDfmQWwCZt6B2yTS\nqnFFOz+OtpkF4nwmcCnJlsqpckSbNEgJOyVsjamwCJ/ZMjuUzGC1sSFeQwPR\nSyfgu09FYkE2oNn1BQI+8S5no/2qbTeGeZxlNdaqxArHp33RlB2UJfqIr1H+\n5zrnVcFEx0aRMVRbc7hCHYSIQaxCuDP3AlQlnDeNYrN79DJ7Ms6kMNVVjYYW\nEHG1Vh2vKDZfDs2REbsNEyZkVYEH01jfRiWqCqrIzunjukyU903D1JwppAWh\n/o4R\r\n=CsyU\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAUZxZ29AqBg8fCpLU2um1B99nGNTmmePVjpXa8b048oAiEAuxm9BiVAbSOJ9dhJ1N4i6hhlwsMo668P8kTVAcg8R0M="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"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"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-formfield_0.22.0-canary.ef4a0c0d.0_1623786685439_0.22741438708491502"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.573d8913.0":{"name":"@material/mwc-formfield","version":"0.22.0-canary.573d8913.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=12.0.0-canary.f705e8048.0","@material/mwc-base":"0.22.0-canary.573d8913.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-checkbox":"0.22.0-canary.573d8913.0","@material/mwc-radio":"0.22.0-canary.573d8913.0","@material/mwc-switch":"0.22.0-canary.573d8913.0","@material/rtl":"=12.0.0-canary.f705e8048.0","@material/theme":"=12.0.0-canary.f705e8048.0","@material/typography":"=12.0.0-canary.f705e8048.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-formfield.scss"},"publishConfig":{"access":"public"},"gitHead":"13a9b9717491f67b5f5a219b279328890c0c951b","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/13a9b9717491f67b5f5a219b279328890c0c951b/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/13a9b9717491f67b5f5a219b279328890c0c951b/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/13a9b9717491f67b5f5a219b279328890c0c951b/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/13a9b9717491f67b5f5a219b279328890c0c951b/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n|----  | -----------\n| `--mdc-typography-body2-<PROPERTY>` | Styles the typography of the formfield.\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.22.0-canary.573d8913.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-CHkyRk0Ys+dquhezhULZ+CO24So7E4W3rglS+oL1MacpP0edZdo2QHD+RP/kS85Js1S5gaS80r/8zni5X9zfuA==","shasum":"74bf83c1e4486c3d00fb751149ca7bd4be471ae5","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.22.0-canary.573d8913.0.tgz","fileCount":13,"unpackedSize":36569,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgzSuZCRA9TVsSAnZWagAAvVYP/1vMwjo5N/Ie5aNxVKFj\nz0FQLguPBC0bI04mVj5QemA5TTUJ1UFk1ezyH0aO1TmX+QS9nVRCA/vzQRG2\nPcdb0QYkVUa3q7VhsVIFGXSgjj1PKqfGBPRRK8Df506lH9ROErY/mK0TBfdW\n7KhmVaBcjfPV6TscGPAyqPsoXWHnvNsoHpB0ewrTnD6oNY2klmXvPZh2JYAv\nYVogrO3cf0P+CnFehxem2USHxORkQ+vprLhcaz3kdxJ4vuQAzh67HqCUJ5Mg\nN/8/w0uxD8Zp9DtdPN534PZvy1mDMhJK+ds+C0n+ZNy+0t/uhAG+5PJt0bxy\nt9Cr0bRvZ3FijXohsFhuf6G1JzyTZXMkf/U+l0Z4J8pxBPUuEtA3OfPeujAM\nGl67iUSj29h+/KhXXS5WmGI+M0nSeJNfTHcVJm2Ig+Gim8h/kiAYBzEjWacJ\n5JAnn9tuVxNofpqq7VdjxAQs59mgszaOsiMBLeCysu1jnpjpaahRiZ1fwONz\nPvUPKXTG4fSDVeVkCI8k79W8xsPMXxHAhUMnd31mUSwjl/mZQtfaU47CGVzv\naC9kaDYHgjKa9Hf6vTONPvkoMEQx01vqKzDHmdGo+Je3kOihuRNQJuergjy0\nbPiEKv1LUFPLRDl8iyjHgi1mgyce/tdZ1IHlGJIM/kTjREyaE2iOW2H4pGWR\ngF54\r\n=v/9i\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCN92GoN/iNJ0WieWt2SIzh1IbH1b20NBv76hpvPU98KgIhAI9nB3hjN3fxPU3kLFCPvTUmUI2G5+Mupf9caKQ4hSGt"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"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"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-formfield_0.22.0-canary.573d8913.0_1624058776981_0.6143691806082252"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.21dba001.0":{"name":"@material/mwc-formfield","version":"0.22.0-canary.21dba001.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=12.0.0-canary.f705e8048.0","@material/mwc-base":"0.22.0-canary.21dba001.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-checkbox":"0.22.0-canary.21dba001.0","@material/mwc-radio":"0.22.0-canary.21dba001.0","@material/mwc-switch":"0.22.0-canary.21dba001.0","@material/rtl":"=12.0.0-canary.f705e8048.0","@material/theme":"=12.0.0-canary.f705e8048.0","@material/typography":"=12.0.0-canary.f705e8048.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-formfield.scss"},"publishConfig":{"access":"public"},"gitHead":"f26ab3eb589dc34a464186e9b323c9a9bd20fade","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f26ab3eb589dc34a464186e9b323c9a9bd20fade/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f26ab3eb589dc34a464186e9b323c9a9bd20fade/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f26ab3eb589dc34a464186e9b323c9a9bd20fade/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f26ab3eb589dc34a464186e9b323c9a9bd20fade/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n|----  | -----------\n| `--mdc-typography-body2-<PROPERTY>` | Styles the typography of the formfield.\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.22.0-canary.21dba001.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-8vY3geej55VKQNmyzdl47ZeApwOb38lKWdkW89BmES9BtgRXBYMI9bSdBQQVMX4cgwpZW35TCLBj57njdKMklg==","shasum":"bd9326635e8f2a602d9771856a52cb667cc3fd89","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.22.0-canary.21dba001.0.tgz","fileCount":13,"unpackedSize":36569,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg0Qc0CRA9TVsSAnZWagAA2pMP/08eEmOm0Gi2EOEc27gs\nl0iaw6TE+WYlbXThkVbDu5uEM+Q6/tJVJjYycO1C2N1j/PCZaSLp3eYiEqED\nMoioZZQ9JvXNxdlGXDXP54OrxDyZIqW5WjfoMw4w0qk37fphebEE2hLd+4Rj\nkaW9V8OEmhYnWTGlINu7mprYv+VKqO7hcpVUpbHQTe/baCZ0FnjccAicqp4s\nET839XjxNQHkiCxBU2aA7sw0znMZLU3bcqTteYTDzBTYjhgwNsVM7WVxyDU5\nzZ8kZhRxObYSixEZ4ITJEeGQfGdpq0+AeW0GrkgRINGSKofh1P0sZHCnEdKR\nzl5t3qkvIrFK1mPHCObGY+pEAHHayvpmOne3aWhTYgpzT4DH70FrpVmecqJU\nno05OydSufo55j3gctnnsaVbJcZqLbAu30mWiWjq7OXNlAgZslMhbq8woNwq\n8YEDJcEXRc2mfmGKYNy0I2i5uw2SwR4hzoHnjx1tR8RI761UG/G63WEcAWep\nitDbjg+Lhwor6P39eW3gLLBCD0MzTJ04epNGTbjqxXfvYOaawAwbhN+IZmPL\n/KJ/WYqKnJjktZlTtQilJfeIr8DtC+bwDi6+j18RmhCtwzgF+8fUeLcWdNhf\nSCisl2VSn7QmszeYGCF5xFBMv+mztKJkqr6+jXA/kBK+jNnJI6/TmAlKBc/2\nImwA\r\n=epfu\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICV5uGa8PDS/X7aiFECbcybCj/pMXK3Bd4mEZD4mmDWrAiALeKmW4y7+h3D4GX022KX56ma6RnfDsMGTPqDiiWwXTg=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"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"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-formfield_0.22.0-canary.21dba001.0_1624311604316_0.760875866650994"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.6f5bfd0f.0":{"name":"@material/mwc-formfield","version":"0.22.0-canary.6f5bfd0f.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=12.0.0-canary.4ccd39bdd.0","@material/mwc-base":"0.22.0-canary.6f5bfd0f.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-checkbox":"0.22.0-canary.6f5bfd0f.0","@material/mwc-radio":"0.22.0-canary.6f5bfd0f.0","@material/mwc-switch":"0.22.0-canary.6f5bfd0f.0","@material/rtl":"=12.0.0-canary.4ccd39bdd.0","@material/theme":"=12.0.0-canary.4ccd39bdd.0","@material/typography":"=12.0.0-canary.4ccd39bdd.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-formfield.scss"},"publishConfig":{"access":"public"},"gitHead":"38e391cc489598145e8956cdbc0a234563260efe","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/38e391cc489598145e8956cdbc0a234563260efe/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/38e391cc489598145e8956cdbc0a234563260efe/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/38e391cc489598145e8956cdbc0a234563260efe/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/38e391cc489598145e8956cdbc0a234563260efe/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n|----  | -----------\n| `--mdc-typography-body2-<PROPERTY>` | Styles the typography of the formfield.\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.22.0-canary.6f5bfd0f.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-GXnRdAwINFYydcjj+thapu61Ph0tlWiSnjQbmT5fPufjA49zeDFtO6qTGCX1CRyjC89ySDEQS+9M9X2Bpfctvg==","shasum":"66f91d6a8a52a5b188df5a34e250a6ecb4fcd09d","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.22.0-canary.6f5bfd0f.0.tgz","fileCount":13,"unpackedSize":36569,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg1Q1pCRA9TVsSAnZWagAAGlQP/jPVkMAWmsZnabT9KxHW\nTdYkj9UTHP3DTA11JwPVqS4unD9ktBfUzE93gfl780KEZFl0p7aMNaEm7os6\n8eZ6Fvd0Dq1OcInXwYnCX/JQ6gKN/RTkfCuaAJ0I2GtlXuz5Ik76cIRjmsI0\ndJBcMF2Q3n5IXQIeC1nCqlvTINvCXbYelQi67kd0DCsJtdTmX8TIq0RSLA8y\ncWAI4KYt4tHjqwG/mfcYLbB6Jo8t7qdYs1EDQTla2e8SPFETxkgbj/Oj0iD5\nVJ2q584Dp1X1hH5aCO4DXO807DomK8djgjA/FcZszfh+Vujwcua+PCceav21\nmp56ZIQwo4nfEtwGIojllRPpGdReoabwxqB1Xa5A5OlvQVIezcxOiclDoKfN\nweVB8MfgWJcHFcMf657x+yaUtt376STFNYIpeoL8CSPSDvwqRJ/LL0uwtMYZ\nmRXSq08iKKBla1w8bic+gTEZMRBn7INA6mcF6Hh3eDe50O6XWfiTCxqzvwMs\neZ6yFxuV0/xWERz94rUM9YPZSi+dTdEH6P0x9qpiaL8fM5w9TaMVYzpbCEPa\nAWXaxqcvhCNviUT7SZfHl9YOjqaWibIeFVmYLNiSUw6xhBV9hi7FW+0cSiI/\n5KBnqx1Q5EWgHCyuiCO0KX5SU0JQ3aBfr/xnSwAobtIeaTeumNENRUw+VKnT\nDv4T\r\n=Mo1K\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIC4s4EyuPIA3Od1UDn3qgrnKV82LpeY3aUb4ubjuqB7bAiA+WQtP6FFeAgL69HOBe/i7InyqcBfdsIutL5CdLzyc0Q=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"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"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-formfield_0.22.0-canary.6f5bfd0f.0_1624575336682_0.21384693936191912"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.fd8360b4.0":{"name":"@material/mwc-formfield","version":"0.22.0-canary.fd8360b4.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=12.0.0-canary.4ccd39bdd.0","@material/mwc-base":"0.22.0-canary.fd8360b4.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-checkbox":"0.22.0-canary.fd8360b4.0","@material/mwc-radio":"0.22.0-canary.fd8360b4.0","@material/mwc-switch":"0.22.0-canary.fd8360b4.0","@material/rtl":"=12.0.0-canary.4ccd39bdd.0","@material/theme":"=12.0.0-canary.4ccd39bdd.0","@material/typography":"=12.0.0-canary.4ccd39bdd.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-formfield.scss"},"publishConfig":{"access":"public"},"gitHead":"652b3840a450a965d0a571d3b055195dddebc8ca","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/652b3840a450a965d0a571d3b055195dddebc8ca/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/652b3840a450a965d0a571d3b055195dddebc8ca/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/652b3840a450a965d0a571d3b055195dddebc8ca/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/652b3840a450a965d0a571d3b055195dddebc8ca/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n|----  | -----------\n| `--mdc-typography-body2-<PROPERTY>` | Styles the typography of the formfield.\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.22.0-canary.fd8360b4.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-A/xXrlt9IQjHqGt1KHKFhXKvyBYU7dzWt7tUH/iP1k/fsEuIQbUNNc1K0r8yGEIoWmeIbkECT4nzPFHxvWxDqA==","shasum":"c2e67820da8cf7c33d7afcc1127b1b39a7eeb99f","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.22.0-canary.fd8360b4.0.tgz","fileCount":13,"unpackedSize":36569,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg1im0CRA9TVsSAnZWagAAmCwP/RNfCVKzgpGmbzCcn9Sv\nAHHC89uee+Heab9shvFpWcVFRG8zi/5cz+uU+EVrQs+wZPEcfDCQQpZUDGle\nCjWE0htNthL7HX2izdEBJSGvkcHTvJGFgwWRnzDMMD+B++xILcxHP1gVSlyv\nsHwvEk49bhgzU2Y0z08jj8UZner8ZHfZUNbKJXrt7i1i3anKeKyUi+38F5SZ\nYX+PrpGKbX5oRlKzh+SOChw1V11uhcjlHJIr/Y+RLzkzdHa9IqIslmpzu7Gi\nGhW2twbB3UuISDVPFs9xbwr18tnuI3iCtBaKCPK5q4v4gIVUti/U0uGzwdrF\nr/a64No2Rvw761raR3uVW6rt7H0bJb2gxd4oPxDf7yBCZ0UNIT3/iNUJkZM1\nFhq7iyrgnHAEpjR1xLdN3x/gA0MpgmQmPG1DA+xwREi4qvXQ5qsr4iZcdiZK\n1M9xbohua5y6Hv6+vHWtwXd2QhhGYYt3B8snSM0UhvVfI1BVY+Y0KVZGmQBM\n1fXYsT5S02HwF0e+ac3drXI28tpvrFxjejpeZKfeyXTFx0XBK7tSuqPIoBOA\nTKDVRYV0Nf2rfYlrr+IxfbTJoJ+k41zMBfrTrGJYEF6FLOUA4qTY8QMxTsTY\nzvbhUHBN7lLp4KfS8eWcO3SMMEcDVfMZ8fmntxWbAXFRTwi0xVQZNW3pi2th\nmlDs\r\n=HurV\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDZZqF/8hRp5QwYrz7aCxmOCPotaZ4J6tubQinaRchdbAiEA4MRR3R+c02XO3q8L9DnEolnKqXIUFDqihQ+Ks3duWVQ="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"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"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-formfield_0.22.0-canary.fd8360b4.0_1624648116069_0.4650323029154295"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.6f74432f.0":{"name":"@material/mwc-formfield","version":"0.22.0-canary.6f74432f.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=12.0.0-canary.4ccd39bdd.0","@material/mwc-base":"0.22.0-canary.6f74432f.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-checkbox":"0.22.0-canary.6f74432f.0","@material/mwc-radio":"0.22.0-canary.6f74432f.0","@material/mwc-switch":"0.22.0-canary.6f74432f.0","@material/rtl":"=12.0.0-canary.4ccd39bdd.0","@material/theme":"=12.0.0-canary.4ccd39bdd.0","@material/typography":"=12.0.0-canary.4ccd39bdd.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-formfield.scss"},"publishConfig":{"access":"public"},"gitHead":"c9a217708497c2e16eaef6de3d1cd70873d0173f","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c9a217708497c2e16eaef6de3d1cd70873d0173f/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c9a217708497c2e16eaef6de3d1cd70873d0173f/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c9a217708497c2e16eaef6de3d1cd70873d0173f/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c9a217708497c2e16eaef6de3d1cd70873d0173f/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n|----  | -----------\n| `--mdc-typography-body2-<PROPERTY>` | Styles the typography of the formfield.\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.22.0-canary.6f74432f.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-rXTDPJIwpZG3Dxd/Lx8H1F/A38baq3xX4ZWP21pYOprEiNytveACUXsxkbpeh1r+Ldj2AJRmp5YryUkSAOiOGg==","shasum":"d1039f79a3664a0ea53379b7fad2735bf0c11b1c","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.22.0-canary.6f74432f.0.tgz","fileCount":13,"unpackedSize":36339,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg1kCkCRA9TVsSAnZWagAADbUP/iSTQgXLcPGFHvIaFHiE\nMkS67jyLK+bHYkjtiLQur/U3tVHh70EnE3uUl/oLvBgg8Dh55CqSH5MZaqtk\nCvGDQ/9JiqglaXkSibBkqcaVuWIxW2aR4cLYC6V8pucgG4z0o93aVPpZqfZi\nT+tYNQSwrNNh/Uf7G/UrrwxzURKQMsyC4DIRnbE4LUJF+no8sEhrmHGbfGty\nJlzMMrxiMkFSCRMLOwWq291MU/JnfTdEgjhnDaNZpj/PbKQxV1YZaflAoP1K\nUGVbHrIdNT8a1Nj5OLepbrw992R3ImyCdZoKqZIQ7RQjIqiWeAvxyOcMiVI3\nRwteo7o/sFAlZeUqb2uBZgleMMTxXxmURYjvbmZaCWjHdD6iUmvSVBz/rHNe\n8ljFp3X4PN0wFNFxye9g7jpPKTl6tVbPl2mGBKjO9ZyXpvZane0rRKM2qcMl\nr9xxM7BHblSWXuukfiKlu50OW87Fva8nL1xFQk04WDgBcbD5gdk9EA2krIyT\n/cakcRgix4Xa6qK1k/aM822yfifcL5mY7pMtc4woDCJ7Lif2pPNUu4nE5XWy\nbemZOwi0gbCQVm1Ov3xWaXjDKcziqNzG+MV8F1BFPKELzmYsE0uzj4jEWwl7\nv6GlnFkEEB5aOCqs4Bl1CvvmfJA9WaB97bKXm2hRC5rJpwRnHLXuX3RKKObS\nLH8k\r\n=UNGC\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEyjSvL7WwE6sqdfUHcvivcTg+tpRYWPd+VfJHNssfcwAiEA9sL2kMVoY/BGDqx94hvB5zyT+j3/eUgAeDljXroB+yc="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"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"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-formfield_0.22.0-canary.6f74432f.0_1624653988615_0.3231911827265521"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.b62f901d.0":{"name":"@material/mwc-formfield","version":"0.22.0-canary.b62f901d.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=12.0.0-canary.4ccd39bdd.0","@material/mwc-base":"0.22.0-canary.b62f901d.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-checkbox":"0.22.0-canary.b62f901d.0","@material/mwc-radio":"0.22.0-canary.b62f901d.0","@material/mwc-switch":"0.22.0-canary.b62f901d.0","@material/rtl":"=12.0.0-canary.4ccd39bdd.0","@material/theme":"=12.0.0-canary.4ccd39bdd.0","@material/typography":"=12.0.0-canary.4ccd39bdd.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-formfield.scss"},"publishConfig":{"access":"public"},"gitHead":"05d3042d6ee960a41512f4385bd22af7dad2331f","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/05d3042d6ee960a41512f4385bd22af7dad2331f/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/05d3042d6ee960a41512f4385bd22af7dad2331f/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/05d3042d6ee960a41512f4385bd22af7dad2331f/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/05d3042d6ee960a41512f4385bd22af7dad2331f/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n|----  | -----------\n| `--mdc-typography-body2-<PROPERTY>` | Styles the typography of the formfield.\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.22.0-canary.b62f901d.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-jmA1k/3DVnen0WHFFz2PviPOgl2klFKPMybQJh7GVNsIpPvlDpRpRdQ7JfThGrZ3oNfda5a7aEGi8HuML8M1cw==","shasum":"520b3286339b14ff5aa6c8ef145fa3e0117f5ddd","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.22.0-canary.b62f901d.0.tgz","fileCount":13,"unpackedSize":36339,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg1lXOCRA9TVsSAnZWagAARmkP/jyOn7OOojZMHTgm0xEF\nwS5rqbp51ftwRgdQ8rDGQtZDDZfRBfEpRFsXIqzoaXgVszE2yfPLdjH4IUIX\nu3zHAfyoQG5AmUCIDo5N/2LHIIr+YYb2vyasoJ1CxshlRBEfWI5rivN2p3eV\nrWMg0tayyfWGEJtCI30hRmBejmQyl1T7guwuKCxvJIjUjwehUnETlFn9D+um\nkKCLGv//IXw4jx1LX5dOQCVCA6VNzGK7LtLXkvC95YhBbJPMy/AFNW2Gi/0K\nmCsr3ano3fPpSQbs57neWja8UsMm9enmObfTmsdl+l9bEv3Vi93o+KRv5YiL\nC5uXshZYpRpdl+kayD07oA2qZulm78gqMPTTbRjQzAhwMzOBgcZdmMwSOX+F\nGWPyWiPXo3vpidG/x5gcweEx64myp1p9fR+NULcVQ4bVJTXITHkEnWY9menI\nos2iIrN7p2s5Fq5fpVCXqMx4Nzh+MP4pYI9tHxL57FNujwGeG/p+Xi9n70A+\nrsLVtWOBCshk0U2UQyK24lm3TmZDAP7XGywsGvXj4r46Z4g53mxLzxbT5O9K\nzHrJKA0x2Z3zEPftZZKn5hNavnE9PCYY/+oy8acqkDWbZqeyV+1BXNAXLN/l\nfUm9Rjgn8wbZDPNVFjsGXCtCDL1SdOypszP3j1E/ECtqx2ThVK5/UvnhMbxF\ngjGH\r\n=N5Z1\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHeKS92NNFUKq1kE+TswkhOlE4BSevgo8mNSVgI7k+m4AiBqs/QA3Fk4lcX4+EC4vFfOsFbm52XYec6YXH9ZQ70w1A=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"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"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-formfield_0.22.0-canary.b62f901d.0_1624659406200_0.2451194505213865"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.73122cba.0":{"name":"@material/mwc-formfield","version":"0.22.0-canary.73122cba.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=12.0.0-canary.4c80072fd.0","@material/mwc-base":"0.22.0-canary.73122cba.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-checkbox":"0.22.0-canary.73122cba.0","@material/mwc-radio":"0.22.0-canary.73122cba.0","@material/mwc-switch":"0.22.0-canary.73122cba.0","@material/rtl":"=12.0.0-canary.4c80072fd.0","@material/theme":"=12.0.0-canary.4c80072fd.0","@material/typography":"=12.0.0-canary.4c80072fd.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-formfield.scss"},"publishConfig":{"access":"public"},"gitHead":"c6a144cd9623c2a8e58dd87af0807c1aa4d1f5e9","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c6a144cd9623c2a8e58dd87af0807c1aa4d1f5e9/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c6a144cd9623c2a8e58dd87af0807c1aa4d1f5e9/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c6a144cd9623c2a8e58dd87af0807c1aa4d1f5e9/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c6a144cd9623c2a8e58dd87af0807c1aa4d1f5e9/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n|----  | -----------\n| `--mdc-typography-body2-<PROPERTY>` | Styles the typography of the formfield.\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.22.0-canary.73122cba.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-VXD1pf6bxz00ZHsj6f+IT2VVjHd5If34NkkkKAX5SmEduCQZXMdcIu+P1bLnCYLiQmjovfB11EQyXrr/7R5Y2A==","shasum":"9ad5b41141a7e303a2cd880ddd1c7fd486dd4d69","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.22.0-canary.73122cba.0.tgz","fileCount":13,"unpackedSize":36339,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg3MeoCRA9TVsSAnZWagAA6IgQAIAkClRXcgQjTUF/tx7o\nQdPzruJDM9BuEiUQ8ONt8OMZhsknyTi/IMXs80fDRsm8n5VX2Myc3E9JVqx7\nlkIazy/TOWWHdrodOIQimOD5DAd9o1N/ZPGmec3/qjHQxRJ0ESdpozRVgjTR\nYGm21Twwd/6W6q6zhoykpE9JsVv9IszKb8tusXA93iYoDy9UUjH6bDN31j6W\nkZitIBFZseX0vPmejlN0posakQagKRbrDcg4iPEpa0u0xrTE33dgfeZGjv0h\n4i74HFA5R0EkTUwS6jeOUrX7vcB4JX4+62aoGaQ8df+MvQz6H0Vy6Hp+Zuo6\n1gz6npXXAbR3xvHoLn1kQYAj4Y7TRqE5tEwwu/358DOrlLPcKFqtDyNyjaSl\nR/lU/Ib9mYWMQ9euStsGT8SokesD9+86R6ZQy05GOHsoP0omOrBW4V4yXs96\n/TFoGkFP5OadePkqeS1IurlVZ1Q6ZKmYMNClgR2OCifQFwY7yqCJ+B8x5Hsn\n83z5gkSY/dO2zpOtCqKl6YsE17T40tU+vMc6zrpoDN0fc4oNEckuBmaPcm4u\nEYVaqhZuaKrvmVLA7TAJxXJjItkfY51Ir7coEV4VmkoiBAODOBIX/Rv/Bqam\n0l+vO9iJ0a0nOZvJISLdObytIfpZSxTM4dBm93Rc1rpgGGSYv93xzM7xAeq6\nHhaF\r\n=cbk7\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQChMB2lkOvLDbhpKxpP9Rnu2pqRMi5cdf7p9ZCqVwI05QIhAI6Iq/wVLUUFOdcSvKqHH+0TTEelaGDbykqRzfxXeMLj"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"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"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-formfield_0.22.0-canary.73122cba.0_1625081767893_0.26637631770143955"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.a6912af5.0":{"name":"@material/mwc-formfield","version":"0.22.0-canary.a6912af5.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=12.0.0-canary.4c80072fd.0","@material/mwc-base":"0.22.0-canary.a6912af5.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-checkbox":"0.22.0-canary.a6912af5.0","@material/mwc-radio":"0.22.0-canary.a6912af5.0","@material/mwc-switch":"0.22.0-canary.a6912af5.0","@material/rtl":"=12.0.0-canary.4c80072fd.0","@material/theme":"=12.0.0-canary.4c80072fd.0","@material/typography":"=12.0.0-canary.4c80072fd.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-formfield.scss"},"publishConfig":{"access":"public"},"gitHead":"b34c74a66bc7e54e1165edb13005a2923702f9e8","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b34c74a66bc7e54e1165edb13005a2923702f9e8/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b34c74a66bc7e54e1165edb13005a2923702f9e8/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b34c74a66bc7e54e1165edb13005a2923702f9e8/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b34c74a66bc7e54e1165edb13005a2923702f9e8/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n|----  | -----------\n| `--mdc-typography-body2-<PROPERTY>` | Styles the typography of the formfield.\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.22.0-canary.a6912af5.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-03AexLbQvx4iqfwqsJbnnWZnOtdntqoWKgLMBeYQoAVjgiWmEKOAE5j8R3JfcCZxuoKkiXePiIJLN7YpigH99g==","shasum":"98d631b2469522a54ba9af2a5ff0382bc294b73c","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.22.0-canary.a6912af5.0.tgz","fileCount":13,"unpackedSize":36339,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg3jSuCRA9TVsSAnZWagAAmJAP/0d9fzJW78719QUjyoIZ\nXJ2D7iaevUrdItBkh+PVdgCChIHVrSay+q8pBED/MKG72FtqB1Q11To4PAtG\n7E53aEuS6hMrHpW7EYETt4+0/oMZfkgW0wuMlN3xF5ATaYi90GIpFJSBnAhb\nLO/VWYtAx/N01yfgo+LYIuykVTANAFWTj0jLB84eZ61R0+z2DVfCPMGOuE8y\nN9/7sAdM0aztdE8hu/2UI/KRbt1WUGv2gfpc/iXStAmn1X8eLwDxDEo/1TZ2\n+W3k/Z4uckQ+HMmMtIi3wLiYIKoE0miv42VEI6PZOEeeyqHWVWJZBdfSzOxQ\nSCELr/sl3TPgbO1OqBrtepV1suyqM1vdF/OcgtmANRuovf1ZaQA6/0dHXtOy\nUVxbOHgh0MUN+isPlJDIJzV8+EgaX9M4xK02C8WjsVl2mA+W2i/ukqs+G0TN\nIMvA+7WoWPEBzriAXYzfl2NISmSjJroEFBLJ/X1hh9boX2MHAbDcmOm04CLZ\n1SgJjZiATZh5nxlL/nBaRivA2dyEjIcCASWhM77LZnmyIuwGGEJDD8+n8Z1k\n1jqn2xJeT2KIyIrGKdcxk5lRfj5ojWevYUeBxWys3VHqgObyE6MgFvOS4oVj\nkcP087R2/n8xRiX2IGLHwqXxQVc+2rsAlY4m2AUhs8oGz7tT9cCvB9noxK3v\nVAc9\r\n=HubG\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCtWDpsKDFYRuqJ/LCfKbqYFVk4uwbN2CVoewi0Rl+mHAIhALLJppydczGSOjEQWVcnl7n3V3aSX8Z1yFRgEPSkB3hy"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"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"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-formfield_0.22.0-canary.a6912af5.0_1625175213664_0.11411582670612153"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.134f24bf.0":{"name":"@material/mwc-formfield","version":"0.22.0-canary.134f24bf.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=12.0.0-canary.4c80072fd.0","@material/mwc-base":"0.22.0-canary.134f24bf.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-checkbox":"0.22.0-canary.134f24bf.0","@material/mwc-radio":"0.22.0-canary.134f24bf.0","@material/mwc-switch":"0.22.0-canary.134f24bf.0","@material/rtl":"=12.0.0-canary.4c80072fd.0","@material/theme":"=12.0.0-canary.4c80072fd.0","@material/typography":"=12.0.0-canary.4c80072fd.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-formfield.scss"},"publishConfig":{"access":"public"},"gitHead":"1191b29dc7fa661811a1c3960131fce8394fc84e","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1191b29dc7fa661811a1c3960131fce8394fc84e/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1191b29dc7fa661811a1c3960131fce8394fc84e/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1191b29dc7fa661811a1c3960131fce8394fc84e/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1191b29dc7fa661811a1c3960131fce8394fc84e/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n|----  | -----------\n| `--mdc-typography-body2-<PROPERTY>` | Styles the typography of the formfield.\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.22.0-canary.134f24bf.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-UtDiE7fJOZuouGv2NdARundA3DWiSOosYxf6yXSyk7GSMUcJ7hpM6sQg1A3fDmdFS4pN4tfdItit1UfiuUvxGQ==","shasum":"19f6bad9e50d083a567771aea4cfb0534ca55839","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.22.0-canary.134f24bf.0.tgz","fileCount":13,"unpackedSize":36339,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg3kJXCRA9TVsSAnZWagAAPIwP/RJ0ZgyymD32Jf8DcBxV\nabnSOCik9cK6rMm+mnLYePxxJzhjFzev8GxztM2rU235UfiZaxXej4gbKmGi\n6EwbzfoYnmJpic4VZtNClVR3Qa4StfOWxlckxxbCLnSbMybt6q7Nony+cDyi\nw6Zq/Z6shbIBOnB5WcAG3iAEhkydByPT8G9Y7nf+517RztlUzkTsWik7MXFi\ntPMrhqPQqUnFY6S3A4K2qIeczOqXRX7VTPW8glZOyLlln181mhyFWqTQE9Mb\nOeKlsKc942hUiAvNHe1QZx1Qix0o/lzDLkzWKAVlPyXtsI40Jw7rK8PbOUMQ\nQaoaP0MOImEWjqUj93tq//XaRMKhHiekLBMWLL0S0+1YnmULa3sP81PZ3mro\nE6LGfSaPuWE5QBZRqYmv3xM44A/o4LQhVM7flcFOZV6ZXZepIGs5x7vSR5WY\nTX2SccTK4YQMYIaYhyEonqO/8ciuEZA7LHJtFMMcX/tqvo23FyOTHCDn6/MH\nONuIE/jb1JFQrlBoXWm/eTerliCMQuyc+4ScDTx+HH74PQTzP38XYsTXq0vS\nWhaG0NIjFEPjuM/k4HyWPEvtxNd6PKabdEfEGTzF8Rxdi7yjKgLDlaDnc1Qx\nrblOPubRDvpZx753Cj39u8i87lUHM+Oms9/vRmssiZBdMm94IJO/2ycsfort\ntnhO\r\n=9A0v\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAK6jdY4cmamSyQtnqqjEY3CJbfsCUO+f2Hbf1GbiVdAAiEAh1xVejDUZSetBAobNz71kyrPICdzbXps9R0n/atasig="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"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"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-formfield_0.22.0-canary.134f24bf.0_1625178711082_0.2861989066134054"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.1debb78f.0":{"name":"@material/mwc-formfield","version":"0.22.0-canary.1debb78f.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=12.0.0-canary.d0f9f3f2e.0","@material/mwc-base":"0.22.0-canary.1debb78f.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-checkbox":"0.22.0-canary.1debb78f.0","@material/mwc-radio":"0.22.0-canary.1debb78f.0","@material/mwc-switch":"0.22.0-canary.1debb78f.0","@material/rtl":"=12.0.0-canary.d0f9f3f2e.0","@material/theme":"=12.0.0-canary.d0f9f3f2e.0","@material/typography":"=12.0.0-canary.d0f9f3f2e.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-formfield.scss"},"publishConfig":{"access":"public"},"gitHead":"05e5511ca831a84c47e7bd43f685202e9213b33e","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/05e5511ca831a84c47e7bd43f685202e9213b33e/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/05e5511ca831a84c47e7bd43f685202e9213b33e/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/05e5511ca831a84c47e7bd43f685202e9213b33e/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/05e5511ca831a84c47e7bd43f685202e9213b33e/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n|----  | -----------\n| `--mdc-typography-body2-<PROPERTY>` | Styles the typography of the formfield.\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.22.0-canary.1debb78f.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-0XVZfCai09fFkVEJxiYIDa6Soa7O3KBnY029uA+YnwsfuR4Af+hdG7DsY2YiKMyiBy6Y6G9AvygptAc5VvU+8g==","shasum":"bc061e7d297d3b82667eedce978178bfce03e588","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.22.0-canary.1debb78f.0.tgz","fileCount":13,"unpackedSize":36339,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg5Pk6CRA9TVsSAnZWagAAl0wP/20H1YCMyfU9U8dbaGum\nNmwknPKS6lo5vjYoKIIWT7zqe8wyo4ZnqGTZCMenkd4S7cWGb9gGiMy+5U1p\n/Zgpt1k4c5TDKpllBgtL7S5Io5NWf2eVTLG87rniWH0CvoohH+NfBOOrWO6S\no/KgZ3HMIZiyzh172tTqxGHjnJwSI7UEGdJ7B9zxTQKPaaQtTyhkcEu5Brws\ncQnMgIFtzIwpeOItWCF6o4edEnPIzmYmtkGbtTz7o5F/S5FozppBWKhuoV2+\nnTyIRSBEI7wkMF7eudF4f/iK2vGT7XSQYtDdFoD53tZiOFm7yAoJ9/q++0yr\nZTiuldgzeVBb5aaKd/LbBgJrEjaNR0UKopXmZzjdFwIaabl2fVFVg3bWrihM\nFOoD2DQhpN4jzblfmXrlK9MPQWYxN0pZPHwxFE1Ww++A7KwocnVoDKAXzg2D\nnI9LJ6HPJqrl8/t2RvS0eeWFttOABCb8LV2bk0HxGx2Be+NQWIZu0GXKuaZ7\nzGKd+Hcx4S+V4W0WXzqqjtbEfftF2tlYTJ+3b6bH4fQ7Q0kteDxrFoshC952\nGEKXsja5Ui1CJwEPHgVuRMT8W8ayaZWr5XbiBpZJkW9Sf9IH8KEXe//unvp/\nn93sgFkvgbzPSByiLItpCBA51GKDms+fy5ASI+IqhVyHzZ/kfdjrSKONEkMA\na+7U\r\n=4hTh\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCyKvHY2hWxS1r+GkDbe4PmgkPoSixlPOKeUfnchAhgMwIge4dyoyVTyM5Lcmzc4WrtzCFjOfOAkl4eNtnV0sGSpFk="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"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"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-formfield_0.22.0-canary.1debb78f.0_1625618745980_0.9946419923291197"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.d53edeb6.0":{"name":"@material/mwc-formfield","version":"0.22.0-canary.d53edeb6.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=12.0.0-canary.d0f9f3f2e.0","@material/mwc-base":"0.22.0-canary.d53edeb6.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-checkbox":"0.22.0-canary.d53edeb6.0","@material/mwc-radio":"0.22.0-canary.d53edeb6.0","@material/mwc-switch":"0.22.0-canary.d53edeb6.0","@material/rtl":"=12.0.0-canary.d0f9f3f2e.0","@material/theme":"=12.0.0-canary.d0f9f3f2e.0","@material/typography":"=12.0.0-canary.d0f9f3f2e.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-formfield.scss"},"publishConfig":{"access":"public"},"gitHead":"becc7820ecd046cb48666a32a633b8d9f76f2980","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/becc7820ecd046cb48666a32a633b8d9f76f2980/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/becc7820ecd046cb48666a32a633b8d9f76f2980/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/becc7820ecd046cb48666a32a633b8d9f76f2980/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/becc7820ecd046cb48666a32a633b8d9f76f2980/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n|----  | -----------\n| `--mdc-typography-body2-<PROPERTY>` | Styles the typography of the formfield.\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.22.0-canary.d53edeb6.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-/BFxvhCUL/VZZRALdG0WmE2VIC7Xq7PHMlKhhrPzt21sMTRRWgAmIAwrSLakdwxnOQqorer19lOgFbVqWYywnA==","shasum":"6246e1f4978fd7e0a529d22790c6b3e5eee0abf5","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.22.0-canary.d53edeb6.0.tgz","fileCount":13,"unpackedSize":36339,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg5d19CRA9TVsSAnZWagAAb3QQAJ/Zg2NedUPN4wQ7xMNR\n+JPHE1Ddqg7lnEyxgN0fFqqe17r03Mc/0G7Sov4dkfNpTXzw1IFS6qaJOKLG\nqpTMThrTfP7Zzu5bn4Lt69V+NSWE3NbdsiL4kv4Ev8t+UZljrtcJNpwBft+X\ntMNJsdjdeqSBrr2nrszz8Jb5fZ1UWAKKHiu8DCrhoXp6zlLCstJCUJv1LIOq\ngt3OKPQmKpWSLngmzPiHCMMO7fLV2tmi2oWajQRuj3OeapgxqCNYdQ6QlngV\nwOXW6l9f2EQAt87x2VIVZDgH1SSsg4nx9IqL3vK9edSPk22Z6A6U7ckBReiA\nobPDoGo4QJMkMFdI+Q8MTUeVqzv0KRz/yWuLB+1qrvjGrheYmKJp3/wnbwwY\njeWH2oaPk0TzPBzD1eUMi2F4Y9o9KJjnER2OPPh8MHA2qIq5wE5EjYVzrIM1\ntsCm291VuNg1NWhFDhv1BOCLOrMvybF5vXEMZZhVASZwB9//23t01UXi3jnx\n9vASSoX5xJG4Xu4ra/9Ju1tT4ki/V0PbHXUpLJPXfDLKSQHoKakilWT75svx\ng8KDKYy5IDzM/ZD0x9FCt7Hsmr0yO2G9NapXOa0RyfiTlABj0pXGMPZ/TQEx\nQQWfv8O4QHeKyHvUXu4mX1mxRUFq0N3j53T9/j+0t49/bVDQ+6xaV55VL1iA\noUxd\r\n=xV3U\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHv6rpKynGRRH1r+Ji4CwPFlUEPnAE6uD+5WF/R3fa4lAiEAkzyZSaXSIjOc6G1FKU7cNI1JSx5QncN1MEYeHxI50Xo="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"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"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-formfield_0.22.0-canary.d53edeb6.0_1625677180959_0.8530914337825066"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.2226489a.0":{"name":"@material/mwc-formfield","version":"0.22.0-canary.2226489a.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=12.0.0-canary.d0f9f3f2e.0","@material/mwc-base":"0.22.0-canary.2226489a.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-checkbox":"0.22.0-canary.2226489a.0","@material/mwc-radio":"0.22.0-canary.2226489a.0","@material/mwc-switch":"0.22.0-canary.2226489a.0","@material/rtl":"=12.0.0-canary.d0f9f3f2e.0","@material/theme":"=12.0.0-canary.d0f9f3f2e.0","@material/typography":"=12.0.0-canary.d0f9f3f2e.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-formfield.scss"},"publishConfig":{"access":"public"},"gitHead":"4ac660ba00e610510de0d1b8c86d4095110ac230","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4ac660ba00e610510de0d1b8c86d4095110ac230/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4ac660ba00e610510de0d1b8c86d4095110ac230/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4ac660ba00e610510de0d1b8c86d4095110ac230/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4ac660ba00e610510de0d1b8c86d4095110ac230/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n|----  | -----------\n| `--mdc-typography-body2-<PROPERTY>` | Styles the typography of the formfield.\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.22.0-canary.2226489a.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-roWYghAKtlpyvIdFqTyKaWskwqv4cRhGGPcFLtClfrmrPeuwgzsNhxzbMzYb9ONksTOhxONump1S2WsDHPJorw==","shasum":"beb9eb65035cb52b240acbef3a1fe28e6c12c7db","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.22.0-canary.2226489a.0.tgz","fileCount":13,"unpackedSize":36339,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg5z1cCRA9TVsSAnZWagAAzXoP/j6FY0fPoZp7BzgrkrLy\nwmAifPmr1PM/Mul7j73hmG1p5gFoqC1t7VrR28BzrTbXDcgYH+NZbAhoXpKq\nuHmYy4LVDFvvA1Hh59hbJEppAcuNLRcFCzv4CgkxUUGatEdKbKwZ3huax7CP\n+NwSQl8IeX5clTpYKL8f4i98PqrHT8gYxKgRl76SJVJvvW9uk4tU8qh7qu6H\niGtqRDwTFf7+prQ5VXKFEWTVaC/alEs2Paaakb5uybdLYADo5cKW4Lcgm3F2\npjX1cXHdHii7Hl9zNp5OBe9pyXTm792hbY2E3qhgPFXWzQ1vQ0qLNHghUc/1\nIygO2THQuzFIv5J42PzNIr6xXtebjjUAGXkFwVHnlf/bKRW2oqp20bDNJElm\nEEDmwzpte49rAVqIswRbg6XiBVJHi6QG5HoEg9Twb8hRuGaVYUr3j/L+z3cm\nKY00HGbMKUPCB6nhh1MPA8gS4ewGVpcn1Ygizpvyk6dTkTEu1p16aDSARxb1\n2P005xWxPUA2wsP3DxgtIro+DzmxmCJe/vXxdHC/mS+N5nfR5S31xwtApTk4\nlpJWbL9GgfqI5fra4OfjGx+yRW5z0/K3cwWAQUfrpAImfbCN7KQHZIlOqU2L\nZyfrCkK5B6z0YQdShJB2toYeIb68CmnvCDZ+JycMfY7Bkdi1DUAWh1BtAtOk\nAWSF\r\n=A8OA\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIG95PQwYWXlCu4KdzDhK996FJwKQK1VGjLhYhecx7ZWNAiEAisrWxX5Sx1yPcRvoWP9MhIoge3WOkYNiBuQZZdKO7RM="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"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"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-formfield_0.22.0-canary.2226489a.0_1625767260431_0.3823094798658404"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.d4801c11.0":{"name":"@material/mwc-formfield","version":"0.22.0-canary.d4801c11.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=12.0.0-canary.adeac0549.0","@material/mwc-base":"0.22.0-canary.d4801c11.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-checkbox":"0.22.0-canary.d4801c11.0","@material/mwc-radio":"0.22.0-canary.d4801c11.0","@material/mwc-switch":"0.22.0-canary.d4801c11.0","@material/rtl":"=12.0.0-canary.adeac0549.0","@material/theme":"=12.0.0-canary.adeac0549.0","@material/typography":"=12.0.0-canary.adeac0549.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-formfield.scss"},"publishConfig":{"access":"public"},"gitHead":"2d6201005f2b928287b990b2ce5ca643ef37ce6e","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2d6201005f2b928287b990b2ce5ca643ef37ce6e/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2d6201005f2b928287b990b2ce5ca643ef37ce6e/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2d6201005f2b928287b990b2ce5ca643ef37ce6e/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2d6201005f2b928287b990b2ce5ca643ef37ce6e/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n|----  | -----------\n| `--mdc-typography-body2-<PROPERTY>` | Styles the typography of the formfield.\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.22.0-canary.d4801c11.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-fNFBWW8L4GrL+8qH1oNSGi77KTIEyODgh9ST71ChyPgyITEc7SP7Sp0gHVOCENQZwPaygGZOZCQk60NUd/Kl5A==","shasum":"22908599cb5e735425c4ec939469ade2e8b94922","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.22.0-canary.d4801c11.0.tgz","fileCount":13,"unpackedSize":36339,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg51nICRA9TVsSAnZWagAA3l8P/jHCqpf6b2pHxuwUrbg6\n5d77b51KW8ZE/2QnP9mmhNyGktcgnEVavE0eFeX3NCJ3ah+mevv0W7Pr/Kei\nqplZ4zNhbhOLCzXBySaWwcm+o3QjaoUEGj72jD2jOK0Uu4AHl37tMYuh0FNk\n2SbN8Botr/PEeERccORU/pWNYIaAa/BlOuoCmD/bvPIVOtopiNK6Yz/eoA+Z\nYtOzRVZle+NwlV6C2oG8/dZtEA57MrKbFOJ4MoJqhsqlzp+Ldi+bLwQHC7Fj\n7s/gTJw/c1kfGHkyPdSPErDc+lA05+K/E1t5EV68kCqTHbt/8NM4cjNUKA9v\nwRuvGhUZ5JGQAioPFS+oKQGaTzm5ZOZOkR0txbvD7e/h//2JUXwCc/eq5J+Y\nDnVnWJV3odqs+sMyC+KsdrG07OMiEm3v3gTBqo8sIEHARmWZsfxrr4rkBMae\ngwvZwbosUi5lni+MfYfJs54FEFsnEVxpQtMH2KI4XkZj458a7M6u2NANlxgx\ngP8Us2JbWXtngOukQHCyZFTr2CqKbBgu61xVBDiLCXYsN2AYhWFL6RDx6x1H\nyhXd78GUqmbhmd4MbmGOQHRGBPSED7P7Ai8dx6FQo8Bt31uQW0LnvrLBX9Gb\nhNefPemCi+va9TGcaedX4fZXNgFGJw3J6IjhG07C3aJWRht3jnjj3TJX+6Cf\nZ9xw\r\n=NF1M\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDzMVMzaqgLJRiATHSh7dgcbAHm+upeeR4Abn+088neZQIgAUhoyD9DjdZp/pQUGJE4q/vp2HTqMY4FIWLkXZ96T40="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"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"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-formfield_0.22.0-canary.d4801c11.0_1625774535589_0.9976259487062842"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.7ec5f2d6.0":{"name":"@material/mwc-formfield","version":"0.22.0-canary.7ec5f2d6.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=12.0.0-canary.068fd5028.0","@material/mwc-base":"0.22.0-canary.7ec5f2d6.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-checkbox":"0.22.0-canary.7ec5f2d6.0","@material/mwc-radio":"0.22.0-canary.7ec5f2d6.0","@material/mwc-switch":"0.22.0-canary.7ec5f2d6.0","@material/rtl":"=12.0.0-canary.068fd5028.0","@material/theme":"=12.0.0-canary.068fd5028.0","@material/typography":"=12.0.0-canary.068fd5028.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-formfield.scss"},"publishConfig":{"access":"public"},"gitHead":"530ddb2b50487eae209a7b76d4233a5b591dc62f","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/530ddb2b50487eae209a7b76d4233a5b591dc62f/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/530ddb2b50487eae209a7b76d4233a5b591dc62f/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/530ddb2b50487eae209a7b76d4233a5b591dc62f/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/530ddb2b50487eae209a7b76d4233a5b591dc62f/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n|----  | -----------\n| `--mdc-typography-body2-<PROPERTY>` | Styles the typography of the formfield.\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.22.0-canary.7ec5f2d6.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-pKOs/fV7JRgxmeUG3GLyA3DOziHYLb1Q5As0rL1w3RG0ywN5JqfTxcjvzJXMivRThrwQF1TXmUwUhgNPYVKRyA==","shasum":"a9fca965a8f4e5297a2af4c4bc14a71f7ea81841","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.22.0-canary.7ec5f2d6.0.tgz","fileCount":13,"unpackedSize":36339,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg7HjiCRA9TVsSAnZWagAAtSYP+wUNbEZgxDb/EOCN5YB8\nl4nQlpT9DyX83NLKFk0C7uaecfGvGGpA2IxD73jmuwoXLGVUQieDHHo9MwhJ\niC45xGY+5afsNIZHSHYplPYsjtmbfjVZ44NAXfZjlHOw40QuNWLOqCB/nOhk\nxsEBfzeSq20Fm91gjs3R59RWuSxBC//B2Gf2t9G1/ji0BEatPXalrMQpqBlO\nci71pArPyvjMtbs31rAnM/5x+kAcgfbGDMuA6lxfy77q3SiQ1VYRXM1i7OZt\noLGG9JC52oguhe6FdrSiMaiQOhuLvap8awMDbuV2ZudF0PZ0hmsCYHm8Sbus\nrU8tgVGvGm+eg+vr+lLjWc/6M4oPv2tXxiKwpRBPfYroPnO85QE6STzzX9WS\ni/9McoHZiV26Q1xD4ezqyDiU3Ozy94IaM2s1Bx7rqYJNeoYdvFhhI4/fIP8y\nZyupdENEwdvtS6IGMOWh5gF98Bd6S3BkHcsW2Lketk3WWCeQGw2bPu4EJ8a4\nEPJettypIfoAsgWUo7LpqsHuTilbrdZ2jRx/qs8xefWjBQyVZpi5+oQm7i9M\nNYdGi84BviTq+1gh0hmfX5pL4aWEuclpnHpiDOAILsStPKpZ0YapHkWRzAiR\nQrkYW6IC7WTHFhA/TLpZfv3CHDL8zWiQH3zW0+EVWgCWN/zuRcPYHNTNCR26\nXk8K\r\n=QayA\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICwIUmFctHwfHHZQGJgDsNKB4DG9g+b17QqBD2cht1jJAiBYbd0skzbO40YNiS9B9pqYR/ayRm6PhqL0WgmeigZtgg=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"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"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-formfield_0.22.0-canary.7ec5f2d6.0_1626110177796_0.5726739964503531"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.86cb4ca7.0":{"name":"@material/mwc-formfield","version":"0.22.0-canary.86cb4ca7.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=12.0.0-canary.068fd5028.0","@material/mwc-base":"0.22.0-canary.86cb4ca7.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-checkbox":"0.22.0-canary.86cb4ca7.0","@material/mwc-radio":"0.22.0-canary.86cb4ca7.0","@material/mwc-switch":"0.22.0-canary.86cb4ca7.0","@material/rtl":"=12.0.0-canary.068fd5028.0","@material/theme":"=12.0.0-canary.068fd5028.0","@material/typography":"=12.0.0-canary.068fd5028.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-formfield.scss"},"publishConfig":{"access":"public"},"gitHead":"f679091aef1ae61c94f4217310d6cd1161c48598","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f679091aef1ae61c94f4217310d6cd1161c48598/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f679091aef1ae61c94f4217310d6cd1161c48598/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f679091aef1ae61c94f4217310d6cd1161c48598/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f679091aef1ae61c94f4217310d6cd1161c48598/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n|----  | -----------\n| `--mdc-typography-body2-<PROPERTY>` | Styles the typography of the formfield.\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.22.0-canary.86cb4ca7.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-Tv22pfaePHiK4wsycbAOWFvRzHYS9jNB2w+o0tvd+IddKPA9anADOODbn0UO0AzX4yPP3K0amTJ6y4pQMyh/XQ==","shasum":"c6a816e21d2ab71309768355e60201807c3d4393","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.22.0-canary.86cb4ca7.0.tgz","fileCount":13,"unpackedSize":36339,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg7c8+CRA9TVsSAnZWagAAQJ4P/Re64YTKzKGZpP3cXUkR\nHQ+5d3piQEyfbSzODKNwoC4/azfrwrpeLir68+oFxoANnzmMjBBxxrXU26rw\n+bc/oCQu2/URafoPpkV8Zh1uHFeXI6ou0HDxABg9TtRllJmKzu4m0KWGD+ym\nXkoWuRdocQl0CMXR7L74HNTyqB8pAIjfciuxh/uTjsuw0QK2p2mmbszOH911\npk5Bmvmaf/5aCRWDNOeq5TGPP6ySqzA4seyQcrOPd3AhMxlLHDoe6/jNiM/s\nUI6sHWOLJqnpNC3pjV0Sni3eNYzcsgC4BJfFW3beIaq38i7djpea+owCk7qU\nC60G5VMozq2vhUbqO2qN1xXsvIEq8e3ESyUVfPc05pOWMDSIqb3YnTYh98AW\n9Fss/T8/gKXite6/aU61Js6YimD+jlV0/o0o5EHE38627LJSWHfz8U3Phuyt\ncEvXEuh2RN3WtlqwqttsAPc9oQf1zMqOcYxwxNwIIBUtvks7AaL7gl4dM75r\nsLbLS7FVl4PTIRPMycPTzd1Zl7LDD2KEswoxyoTkfXpM9Y68pgByqk+r+Y0T\nk7CZRDYYO9SSpVEQdVHkzQZv09OWU/u1SMsM2pw5eju/Z923OoidKuPnLlfJ\nPFjxa8sks4r6vuFpgPNuSjtYxzjTXxBjkajQ1VWTEwHrWnHIgfh7JLB4R23r\n1ZQc\r\n=q1+E\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC3cRZyy9dKWpsLkIU0uAkXqAIaJvbzi/iQWpm9jFJjTQIgO5oIue4viySk74YxAuHekPLH3pSzfiFUt1FKWVs/g7E="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"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"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-formfield_0.22.0-canary.86cb4ca7.0_1626197822245_0.5771988296624773"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.cb42f5bd.0":{"name":"@material/mwc-formfield","version":"0.22.0-canary.cb42f5bd.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=12.0.0-canary.ea77795b1.0","@material/mwc-base":"0.22.0-canary.cb42f5bd.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-checkbox":"0.22.0-canary.cb42f5bd.0","@material/mwc-radio":"0.22.0-canary.cb42f5bd.0","@material/mwc-switch":"0.22.0-canary.cb42f5bd.0","@material/rtl":"=12.0.0-canary.ea77795b1.0","@material/theme":"=12.0.0-canary.ea77795b1.0","@material/typography":"=12.0.0-canary.ea77795b1.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-formfield.scss"},"publishConfig":{"access":"public"},"gitHead":"2a31bbf40274b11678aacc5de800344a83518f3c","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2a31bbf40274b11678aacc5de800344a83518f3c/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2a31bbf40274b11678aacc5de800344a83518f3c/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2a31bbf40274b11678aacc5de800344a83518f3c/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2a31bbf40274b11678aacc5de800344a83518f3c/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n|----  | -----------\n| `--mdc-typography-body2-<PROPERTY>` | Styles the typography of the formfield.\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.22.0-canary.cb42f5bd.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-3H/K57u2iwyLp759yKjmI9HIzj4uVsj5MmMJqAWOJCBdElHzs3a4tj4B1+z3nnSLqplsfnku/VcRGCSI+87uLg==","shasum":"2818b9028eb6195c19be356da566f9833f8a607f","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.22.0-canary.cb42f5bd.0.tgz","fileCount":13,"unpackedSize":36339,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg7dkrCRA9TVsSAnZWagAArLgP/jy5TNlSeiD7TYe0cOxk\n+PghRVJJ9BT5ICwtzdnBvfFZ73NEppSCv371L04ZYn13QEWkZQlJc7WoY7CX\n+T8eI5ERdWGHm6xGAlmHxqlD9lEAKg0asN0umwkeNhebQ2WeL01/efunWoHT\nF25JWWALe4RKp4XJFpet0+1MEhJUZcYxWzO2dhjPyuaVEoXX0c2MNg6PiJfd\n/66s8LMN8XjX9sscSadR9gm5y+YLaWRFFceS80UtvDVoKGcK7CjmFNi666sn\naiVCOv5KM2P3ZPyvP60A9V8EIa7xC9Y+V0jLbH+5B4YyIrQIERsYQy+ts8N8\nZNc/dy8St5aRcR/ATEcVUGyGMiqMxSqxId0ukqZGCeejoKLZ4/4o7XXxaliE\nv4dSeZxr860HbCufizMHo7MW+VT0q3nCZOcsEQWsfAUgp823Dzj2iOaTPdQD\ntyrK9ZZxIC5t0vqaRsO419uUjtuUBMVVQjzz/36/f5F51ErnTfPZJhIQ/rq3\ngEyhYZ0QoH5+2yKV+WHTCufJbxjBOnX7XfLN1OXzGdTExdmxSWO4Y4BG/S/s\nxsfSkkaEi+AsqTOMGB9bVomesyA4BG75omD8AfWt6I59kYAj9sJQcNCNAiXJ\ncclBNA4H2WEZInyNwNHEIug/eIAOvg2tN7HZupQN/Pk4Q9AxrGBOQJnGm+e7\n2kU8\r\n=3WAs\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAoSVljlN9vUP/iS1iy+4raW2+TsShMzb4bD5mNDPPYRAiA/SW1TGl5+yYizccIc6U12ebf+XYYa3/oeL7yTEaQ+ZA=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"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"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-formfield_0.22.0-canary.cb42f5bd.0_1626200363291_0.11692170971850624"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.bc9a724e.0":{"name":"@material/mwc-formfield","version":"0.22.0-canary.bc9a724e.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=12.0.0-canary.ea77795b1.0","@material/mwc-base":"0.22.0-canary.bc9a724e.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-checkbox":"0.22.0-canary.bc9a724e.0","@material/mwc-radio":"0.22.0-canary.bc9a724e.0","@material/mwc-switch":"0.22.0-canary.bc9a724e.0","@material/rtl":"=12.0.0-canary.ea77795b1.0","@material/theme":"=12.0.0-canary.ea77795b1.0","@material/typography":"=12.0.0-canary.ea77795b1.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-formfield.scss"},"publishConfig":{"access":"public"},"gitHead":"3f6fbd971026d270d71f4fa8515adb70cb387ae3","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3f6fbd971026d270d71f4fa8515adb70cb387ae3/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3f6fbd971026d270d71f4fa8515adb70cb387ae3/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3f6fbd971026d270d71f4fa8515adb70cb387ae3/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3f6fbd971026d270d71f4fa8515adb70cb387ae3/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n|----  | -----------\n| `--mdc-typography-body2-<PROPERTY>` | Styles the typography of the formfield.\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.22.0-canary.bc9a724e.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-MEtxuAHWGQN4icmN18BymMmaJDwyRs8M4VlEpAqN/wCwP9Dsj+w4/3BlpeFQgEE9RIhrv2TIdrWkpXIM3wk/dA==","shasum":"e6aafc0aecaf1bf92d98e502eeee8f957a8aab2f","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.22.0-canary.bc9a724e.0.tgz","fileCount":13,"unpackedSize":36339,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg7d5fCRA9TVsSAnZWagAA1gwQAIKqK3N8C4dFu9zk4fth\nB9lQc9uAVplpLGCfDkxxWXgfusQoVT6SoGBUmGOnrnQXEICKznou7S7IwEtY\nrOQvPZmdtsffAnrEWsj622v1b+yRdvaVT3LOYSnDHuR0IpRpx8ftyLL/IB/2\n/cAeGUk4q7liR2pee5Hjp4/UQmQ67nDUU63rohH2ysahoWzVbDlBczZDFRWV\nefR6X7Ts1TbrjcYc94hYs98GdTtVOIYzJN81MZwlJ6/sqAc3GbVWNK45HysH\n44Ktdsnu87IEAKiOaH35ia2VtTtS352pn/04ttp4q3s5ZHCap2lZ+uxVKW/3\nTrrg/V2E1Im1yUSoE1f8M3MO4q0HbAIR6ub3lBUTSpEowG7d7Xu/WDL5lV6o\nKvIbUT5Q67455Jo0OQwpivzGrutvSIc8zX1REQl3nih0i6hZBQtlelD3vyaq\nVXFVxCjSOhZk0i4mo7eKgBdvTPPONr6vHSG2EVlChoA7Vs/AOZ/F/gc1e5xq\nnJDXu2xCSIh22zlqFDyC3WRW6Gtvb688R1j0nsIq349FJCyPdNLUFyQUatH/\nymyroCFs7zr8UqHuV8MnyqQiIpMhbxcYA1NyAZPUvPpdOhB4lLnRI6DKq7Fp\nvDamedN4rc4tnhDqMgrE4vIEoCksrVtTl9lTzqlOttWuYtawmTTomuxHcSDU\nd5/2\r\n=GBq4\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDF+L6mluZvAc4Sr0KTe0VtUxZwwW7g2xbW3uviD3Z3WAIhALI7H2BD2iE+de2JLyffZgyTH6D0I4J9TRB/kwsnzZ50"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"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"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-formfield_0.22.0-canary.bc9a724e.0_1626201695099_0.38209196581646054"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.7847b83a.0":{"name":"@material/mwc-formfield","version":"0.22.0-canary.7847b83a.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=12.0.0-canary.22d29cbb4.0","@material/mwc-base":"0.22.0-canary.7847b83a.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-checkbox":"0.22.0-canary.7847b83a.0","@material/mwc-radio":"0.22.0-canary.7847b83a.0","@material/mwc-switch":"0.22.0-canary.7847b83a.0","@material/rtl":"=12.0.0-canary.22d29cbb4.0","@material/theme":"=12.0.0-canary.22d29cbb4.0","@material/typography":"=12.0.0-canary.22d29cbb4.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-formfield.scss"},"publishConfig":{"access":"public"},"gitHead":"96a87e19e381c977d8ac1c7a5a20a261fe54c448","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/96a87e19e381c977d8ac1c7a5a20a261fe54c448/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/96a87e19e381c977d8ac1c7a5a20a261fe54c448/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/96a87e19e381c977d8ac1c7a5a20a261fe54c448/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/96a87e19e381c977d8ac1c7a5a20a261fe54c448/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n|----  | -----------\n| `--mdc-typography-body2-<PROPERTY>` | Styles the typography of the formfield.\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.22.0-canary.7847b83a.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-Qb5ffIqRFcqMFSVUvRAbMqL6XezoRl8tPke7L1w3xRWrH0JGD67eovcWpnC3Q959911byepJYP5sYI+3/H3xRQ==","shasum":"84637bb50fa7f41db5695cec34b1972a184de2fa","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.22.0-canary.7847b83a.0.tgz","fileCount":13,"unpackedSize":36339,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg7xxSCRA9TVsSAnZWagAABzQP/3WeY0Mc2Qgs5sdHZFXl\n7VjpEJna73QRYocXt67bo2UmKl52IE6AP/y7ZPcXv9RLyqUuS2gUBNm3GmJB\ndScy/fawj/6xIz7tLtiDlz+AGenL87YlYadR55B9XcKRYucVzTQUo4l54Qup\nsoqqQqPR6Sc4ixteWde11gfxmt0o2+dBj9nyj6PjFEwPPwV+Dt8gjVZvh36f\nOV5uRCuwZ2hSMo65RWwsgqjhaHFLB3QiCzY3fIWpPpCz6Kq7qAuZTfDy5SFl\n362hSAvTozXZfRaaAi+RNwBGgh+XHi/FRfkP/qxvdBGmin/u+YRd0+g/aMum\nstgUBM3Al5lmtrdm1I2Pp8QqKgCgVDL0NLeaXZVPp2H3T6+6pdbRsh6KHgIL\ntxA1W4R8v7jtLIr6aspAtpSzpBUGG67PNNlAC0VsXPrOjShf+7Y+0AMPQ+Y8\nqbk2iypy3dw3TaFgUW5WMK4ZQqVLeWN01QVMFU5LNnOOr3sbvO1pvWI4krJA\nMbWeSDEMUoTyMKBxQISGDw1B0qJtqE7qacrFgVeGuQ3x95MCcgEZsxTCeJI2\njMAkxf8UVlhL4nq8KI2Xg5XfkxjZ9N2FHBfpc067GFvNqiJrOVoHX30PQosJ\nf/YfDEqiyPQ+s/cnScVz4g70YO8ToEhHiYyiezMdQo/G+xuE+7QQLztQgNQd\ncrJB\r\n=Bx7U\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD+LLX5VoboIxc1XG/qkd0KK/wIfrJxjvBavgwmZG0wfQIgDDTOzYqXwKM7BYHz2KasURnTmGc5PH+kYcwEX5WquUk="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"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"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-formfield_0.22.0-canary.7847b83a.0_1626283089457_0.24090415340452043"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.8cba18fa.0":{"name":"@material/mwc-formfield","version":"0.22.0-canary.8cba18fa.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=12.0.0-canary.22d29cbb4.0","@material/mwc-base":"0.22.0-canary.8cba18fa.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-checkbox":"0.22.0-canary.8cba18fa.0","@material/mwc-radio":"0.22.0-canary.8cba18fa.0","@material/mwc-switch":"0.22.0-canary.8cba18fa.0","@material/rtl":"=12.0.0-canary.22d29cbb4.0","@material/theme":"=12.0.0-canary.22d29cbb4.0","@material/typography":"=12.0.0-canary.22d29cbb4.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-formfield.scss"},"publishConfig":{"access":"public"},"gitHead":"0eb1334d9597f86a21b5f9edc232a1c0f67f6abc","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0eb1334d9597f86a21b5f9edc232a1c0f67f6abc/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0eb1334d9597f86a21b5f9edc232a1c0f67f6abc/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0eb1334d9597f86a21b5f9edc232a1c0f67f6abc/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0eb1334d9597f86a21b5f9edc232a1c0f67f6abc/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n|----  | -----------\n| `--mdc-typography-body2-<PROPERTY>` | Styles the typography of the formfield.\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.22.0-canary.8cba18fa.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-K1EjwtgK9S/4MhFAD/tqL4zfC0Z9zJCgQxdSnZUdUkTiXy0ybQFXk/GyQVJeRaKm9Y/sfaSCQmuZhcBlzhyTTA==","shasum":"83bdc750a79ce732f9c26606d8ae1d308d64cf4c","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.22.0-canary.8cba18fa.0.tgz","fileCount":13,"unpackedSize":36339,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg70hdCRA9TVsSAnZWagAAJkcP/iLrgIoYrMVVeiZDnl5U\nEl+1LYen9dHl/J4+lcDglHOKNh0qduH7TxdFPgqFy+TnZp+cWjOKYcbPtwsB\nQpre6TlaBzpD3x9SKTjB6dujtSNY/dQ1Hiy07tIBrb6lMH+r31isPv5J+zko\nyIoOcSW/DMEyEtJAZcY/RBmSr3TmLzzOldsCLULVkgIpBkKPaNDvvDC6QwLx\nnE76/FJVRLcq0eQWDiOPYsVVzUGHQlF+zipx5A6OZUjw/cUKhYgdJwSMGg3Y\no80Enif3hJ/i9+9F826y3nxYk52FsKnPQ6ONtIozx69QRCOBVv0EJDL1cI2n\nxt1n5zt+KXUBhXLI2J/GUBGis+XMDY8NyPTBh7NH9f1bcOjDEG9rLHW2ZCHY\nz/pKyJVBrgg1k+aOr/oax9YLm7w8NZwYvIr3K822lfJWGn/xY4D6RE5Leco/\nrNkedZOC9rQSKtgy3cZu84Sc8FFlNWbyHwiKaRr8MzEB9Qtk4ixfpos7ND/x\nVV+0j0Kkp/e4Fw9vOgiuzXPLJnt0fTXTj2HIW+Q2Z5aKgdxBNh2044gtb793\nTbBurT00kZNObylyBDdYyEXZvXuiOnTTuHZmIKq++M/IT/by6mtIx+MIrwp7\nzL7a4MqAhw/B8HrTyYqfdrJ9CmzTQD8BVJ5lf9d3OjnyoTxhlPqo6VdB8v5Z\nzaBY\r\n=9GXT\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIF6DMXMTA6b1vWMFf9goHRThEuHszByINOcyGJSLPpAEAiANjSkpCKFSv+9cyoeoyItDkityE04inLt4BTiTkioeLg=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"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"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-formfield_0.22.0-canary.8cba18fa.0_1626294365573_0.11306243532470783"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0":{"name":"@material/mwc-formfield","version":"0.22.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=12.0.0-canary.22d29cbb4.0","@material/mwc-base":"^0.22.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-checkbox":"^0.22.0","@material/mwc-radio":"^0.22.0","@material/mwc-switch":"^0.22.0","@material/rtl":"=12.0.0-canary.22d29cbb4.0","@material/theme":"=12.0.0-canary.22d29cbb4.0","@material/typography":"=12.0.0-canary.22d29cbb4.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-formfield.scss"},"publishConfig":{"access":"public"},"gitHead":"cacad1c9793ed32c30b99eb73991eb6c1218048d","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.22.0","_nodeVersion":"15.8.0","_npmVersion":"lerna/3.22.1/node@v15.8.0+x64 (darwin)","dist":{"integrity":"sha512-cRgoU7F4wUUTk63tgI7uXhN68DNhsjDeIVwZFlW8Fod2qSfiiKnhI7UNpoRKCy3939c8ne2f2CZxh/d04LC9sw==","shasum":"e75f8e74aa6623a258c9ecef58fc47de1d412588","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.22.0.tgz","fileCount":13,"unpackedSize":36253,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg72XaCRA9TVsSAnZWagAAF0sP/j1MYJCXpW6VjXjP9R5J\ng/Og1Mjgr28j8WtavfAtp2QZCBawtO8Ilj3zXginFAvbwAqo/hwyTK33B6Yf\nbsSW/+kl7tYFBZXGbp9XgQCo7l1RWrszVpH87RjY1VXZh0BaUUQ17h66U5de\nE5GNbKEOUBIkNu/01/FEYkau665nRUhtOBrJa36U2GRx6tVFq5mj88qnkhRY\nOWQ0EFakg1H6ZXW1dcu7gsXnzcI4EknJA9VY48sofSKikEQKabuo7DE9zqZ6\n71xjj/BdPQMxYqPVmwCdFZcu7Ennx2n42NwVXKRMXeWd2OVyy7qQy4DdJiUQ\nz8uSC52QZtpFILeyM7YDWpOdGbpYm0e7DkxUwF6j0n2ZEmtHeefPvzag/gsd\n8ys+fSmd9UErGxuD8QuynJEWoM4Is/xtCbzA94E0Np9dZhe8+myfi6tYhdHu\nee73P3T19srpUXFbtU9dGQckMefgfR5AwPp8LeVnQjYjLS2JDYIOBpOO2Vud\nMTsWnMM53xGAP6f3l8kK6zzRLLzshOaX7wyF7NvYfqBzraGpYLzvnOXvH2KY\nnlO0i2R2elwlPd9HH5g+TR4QdqD6Vw/YB+WPGcFNbFD2HalOyyfWBFqGWGRD\nBFbbC20ce0WcafvbnvU5NedUsOmjl58tmnOl+NtJdZVVCL7V0vwMLrNJfRj6\nrmi/\r\n=zCgJ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAusND1Vz8zSP/7OUC+EDaIVdkmnZlRDR6PFbFXQgEG8AiEAtH1o9+9QP8oZe/Q/e4nGA26NA6RGtk/nQ7WzMLys60I="}]},"_npmUser":{"name":"aomarks","email":"aomarks@gmail.com"},"directories":{},"maintainers":[{"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"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-formfield_0.22.0_1626301913863_0.7533468620829722"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.1":{"name":"@material/mwc-formfield","version":"0.22.1","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=12.0.0-canary.22d29cbb4.0","@material/mwc-base":"^0.22.1","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-checkbox":"^0.22.1","@material/mwc-radio":"^0.22.1","@material/mwc-switch":"^0.22.1","@material/rtl":"=12.0.0-canary.22d29cbb4.0","@material/theme":"=12.0.0-canary.22d29cbb4.0","@material/typography":"=12.0.0-canary.22d29cbb4.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-formfield.scss"},"publishConfig":{"access":"public"},"gitHead":"fbc09b4e8766843c4aef86023c2cfa4cb9e7cf5d","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.22.1","_nodeVersion":"15.8.0","_npmVersion":"lerna/3.22.1/node@v15.8.0+x64 (darwin)","dist":{"integrity":"sha512-jk8YyX1STjh+HCQOjlEmtr+kVG8Nlkemh9GoVNkJoIH6k7n+WgYcVXoJtfGWJFBkO8kfHziRVeLRPGP8Nt8ErA==","shasum":"aea95e45086d680ff7175a68cf87d9abba755a42","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.22.1.tgz","fileCount":13,"unpackedSize":36253,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg72q9CRA9TVsSAnZWagAAI/gQAJkG/Eg1d4r3RAtPnLaR\nemf8jYB4IrnKkhiJftfdF+YVpW91AOhhehvBaf6Byj00edkLpxlM34BbzS8p\nTLZOQK/1MAQrb8sb6RylTEzohb07Fk/PI9H1kexScAgH1ybu3a/m+BEdTaKK\n3EEGVSKlhh6lhFewiDQ+N5/BMFR+G55pg8ouxz0vFCMUge6GKnxWmUxSkbu+\nbh1oADhI0awti9NPFAkH80wHcJ60FpyYKOuWtwT8t6DpYlro1+sIGCYQ01kX\n+rZ2KqaHHXa/PMDj46txt5FE073kYTDClb86mX3ABIs+GCDm23I1A0Pu8TEz\nXY5k74uwPAE4KYTiwx2Hs/G4+/cplswh1juXaVM9l3omeLCpURRdrpZaVwxH\nsPWBljhaJ09grPGr25ULR8w8Ms46GS3BNeKk6EVkozIWQdPh5pjVODdvFB4Z\nY9+0/U5ncw5TcMcu0DXaF9ohp5BJXdx0zphjJjm8Fvced6W42iTRkol0L+Dk\n/Hm4exVwRPMIMJWaPAa947UK2U2yTQAsO8UWF0JkqhQZV3nO5Kfh4RME3VAT\n5wpNVZzuAxYqP68P2FaCMGoMSDQUHnpYYsLr19KuvM32Rt8j//2OO4nbtBer\nOGKxUMbTr1VqZO/PcvidjRRQODFZfnAvvV4hcg2ZshupTbzCQBq9bFbhTIh9\n2tK3\r\n=lEEM\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDxTfEKqBSObbeAyNsaNAcu3IkW2xt7zDC/uIwI82/7wAiB0R2pGz3qVSJt0Fy1vv8vl2AY/lTajaHNIiDvT3pRYnw=="}]},"_npmUser":{"name":"aomarks","email":"aomarks@gmail.com"},"directories":{},"maintainers":[{"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"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-formfield_0.22.1_1626303165181_0.25527895865886796"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.fbc09b4e.0":{"name":"@material/mwc-formfield","version":"0.23.0-canary.fbc09b4e.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=12.0.0-canary.22d29cbb4.0","@material/mwc-base":"0.23.0-canary.fbc09b4e.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-checkbox":"0.23.0-canary.fbc09b4e.0","@material/mwc-radio":"0.23.0-canary.fbc09b4e.0","@material/mwc-switch":"0.23.0-canary.fbc09b4e.0","@material/rtl":"=12.0.0-canary.22d29cbb4.0","@material/theme":"=12.0.0-canary.22d29cbb4.0","@material/typography":"=12.0.0-canary.22d29cbb4.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-formfield.scss"},"publishConfig":{"access":"public"},"gitHead":"928fe21d53da3c383833e0766f262dd5454356ed","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/928fe21d53da3c383833e0766f262dd5454356ed/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/928fe21d53da3c383833e0766f262dd5454356ed/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/928fe21d53da3c383833e0766f262dd5454356ed/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/928fe21d53da3c383833e0766f262dd5454356ed/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n|----  | -----------\n| `--mdc-typography-body2-<PROPERTY>` | Styles the typography of the formfield.\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.23.0-canary.fbc09b4e.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-RBSJKwkHcwqAvqqwwdW39hOOvWFSm8ifWJOYyCUQjW85xnRUvAmOB97QK+y5JXDUeaJnuwljUKNRaR9AS52Pxg==","shasum":"466d86837aa30c56ed1045c3df7f2c3e6774b7b8","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.23.0-canary.fbc09b4e.0.tgz","fileCount":13,"unpackedSize":36339,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg72rtCRA9TVsSAnZWagAADTgP/RCwXUUNx2iFTt2zXrMe\ntgzGe0OIj2B/dYwr8mCWbPpEfqYl1bujkPN9v17gHEG1/lpYt62XXCBxDoe2\nILuhjIG1p2corwcmC4xQn/5DIFG3rUNGn/as7s7kVrQwhcVLZYPD5Q5bytpk\nWI0YKsv65315+8YsWdM6cLg4yg09DC9GRtyCwgRmLYbxmW4+Tbhpmf4uCzCj\ndNZyRnjtsrxYTbEC7VaaM0ymEvKLxmoU5WD9Bt3x3bzXWHHCf9MbBzWV5DQl\nBGhZXVcGBkh3BR78/mMl0PZciwq/is+vzXo5aMIpxX+HhnRWqqhcewzWBN0q\n5gzj8oWeHQmCqt60M7H4O0ky7ekWDrvMozdUuJolr83GU7jtvB8hr2RLcdRc\nIamhkrTQsYgjp/GZ2v17Yji5cbMIfmKxuz5kXOLesdVgs9hxk53dXu0F3sz6\nPRw2KUjboFHwcZVQpA6yoGsZ0+V/0+B/T3jJ0nMjwHRBI/URMjF03y5Mn5Sn\nBeOyVaVOHWX9fcm3YaV1ad4u5mgIhTW242qJW9/9sJKj4ADviDIWaV9ZA7JX\np+dAfbok1arn2Pffi3uYwpyvyglGulEYAP79ro/nEFegcPmDGaqBrzzYb25p\nV3DAjEoSSM2xVkvIyLV0HdYEYr0wVLinbWY5JchscCY55wA76t5SWuVt6bQ+\n/T0E\r\n=vqTW\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCOcTnhX4NTbM/M1qoUMcGhBIUC+ZQzPNlu4uqtVGWdPAIgbFLjV9R3tvCR1GA3Xq1TcHDHOjTxxB6T3gPWiiAzv0g="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"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"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-formfield_0.23.0-canary.fbc09b4e.0_1626303213172_0.6282566180961022"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.73e9f83c.0":{"name":"@material/mwc-formfield","version":"0.23.0-canary.73e9f83c.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=12.0.0-canary.22d29cbb4.0","@material/mwc-base":"0.23.0-canary.73e9f83c.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-checkbox":"0.23.0-canary.73e9f83c.0","@material/mwc-radio":"0.23.0-canary.73e9f83c.0","@material/mwc-switch":"0.23.0-canary.73e9f83c.0","@material/rtl":"=12.0.0-canary.22d29cbb4.0","@material/theme":"=12.0.0-canary.22d29cbb4.0","@material/typography":"=12.0.0-canary.22d29cbb4.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-formfield.scss"},"publishConfig":{"access":"public"},"gitHead":"7cb506f7d4ddb8897417b2451e1dce233644faea","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7cb506f7d4ddb8897417b2451e1dce233644faea/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7cb506f7d4ddb8897417b2451e1dce233644faea/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7cb506f7d4ddb8897417b2451e1dce233644faea/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7cb506f7d4ddb8897417b2451e1dce233644faea/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n|----  | -----------\n| `--mdc-typography-body2-<PROPERTY>` | Styles the typography of the formfield.\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.23.0-canary.73e9f83c.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-XwB9R2mT7DLnSqqsPpKs2zddptKWhdWJI0E1uUZ9/DrpLM0D9ehZ9KrlgD/6VpQpbiRqPAiK3Kt2cPlmOZZEaA==","shasum":"5c65eae77b00a3197bf13b5c7dbed391f48e644c","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.23.0-canary.73e9f83c.0.tgz","fileCount":13,"unpackedSize":36339,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg8JzrCRA9TVsSAnZWagAAyB8P/RDb160JOGKIeV6cGcgQ\n1PPh6XiWk7/l6QOoLhAFFIhEn9c4tVGtPP9Ig1mIc/6Omn4wTbUZ/yZA7mPa\nBkphi/8aowxz4hXAy7ikIltbwl2nEKo+f9ZAenxEqV1e1BPn7yGEEgZRlcPz\nK7+y/D1Ttjc9U7b+K2rTOaucj7ZtQDH71ijm7M11/sdX3SmekEZjzQ+FJNnZ\nwGg/S/Fyf4PJSXBP521tUuCTmu0+PIjYTJmOSh8JucIEUDbakqQwOuRg84y2\ngKHXJqMYa83o8y2uQ51LIbR4npt8BO49374V0Mn2k6EwyJAEVWvobNiVqZrG\nFi/B4DYpPoep/VdUMUVTA3zmq9Tyksl1D0soc2nJ9NXNfLNELQ7sg3BZ+Cel\n/d6Tik+kBxZDkLhdF9giwbcDVnF04eEt520UGJDaZC/on6nQVmpq6VwkY9IT\njZny3bMOuo2/UdGcE+eH85Bq7en1UwdweNJaz9MdEjUn9awhU09mskgxP3dd\nzy0n8m4HZxaxyaZPz6BQO33cVmZHau/h4sh/wg08xaaGhc+aXu6AOSc786nr\nrdwq2QL95leSTNvKakQ98bd94/vx5zQZM4/w7JC63S8kydH0lEsiZ+sth8rk\nddhtiNOaUDKmBEZ/JVPKRpcr0lfmlRLASWwOrusfX/434e2u9fmeJUx3XiPa\ngZEA\r\n=k1PR\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC2+P+SBQPrQgOyzr2/mH4EEJetHK145FnRq8RJ3W//LwIgdduBNXph1xVOVelT9hGSGNOLbYtvK0Ufq+HCuuuHvVA="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"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"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-formfield_0.23.0-canary.73e9f83c.0_1626381547311_0.9975824726082048"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.cc0aa7a9.0":{"name":"@material/mwc-formfield","version":"0.23.0-canary.cc0aa7a9.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=12.0.0-canary.22d29cbb4.0","@material/mwc-base":"0.23.0-canary.cc0aa7a9.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-checkbox":"0.23.0-canary.cc0aa7a9.0","@material/mwc-radio":"0.23.0-canary.cc0aa7a9.0","@material/mwc-switch":"0.23.0-canary.cc0aa7a9.0","@material/rtl":"=12.0.0-canary.22d29cbb4.0","@material/theme":"=12.0.0-canary.22d29cbb4.0","@material/typography":"=12.0.0-canary.22d29cbb4.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-formfield.scss"},"publishConfig":{"access":"public"},"gitHead":"46cd2c64b884400d63eb38fd81a1ad72accf42df","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/46cd2c64b884400d63eb38fd81a1ad72accf42df/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/46cd2c64b884400d63eb38fd81a1ad72accf42df/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/46cd2c64b884400d63eb38fd81a1ad72accf42df/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/46cd2c64b884400d63eb38fd81a1ad72accf42df/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n|----  | -----------\n| `--mdc-typography-body2-<PROPERTY>` | Styles the typography of the formfield.\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.23.0-canary.cc0aa7a9.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-tNzdoPY/nMyKR47niCPXcvLiTd56pZCasjNsdKptyq+hnzak/SApVHMWc9ofxGRtM6E03ssHDaPs/D5pBA7Yhw==","shasum":"5656839e8a1177be28a2446cecba0cf7c30fd30c","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.23.0-canary.cc0aa7a9.0.tgz","fileCount":13,"unpackedSize":36339,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg8KKPCRA9TVsSAnZWagAAZ2kP/iMbkaL7fL0XMNaHWtwW\nGMIxxKGyE61fMIMKdTSwmX2VNqshRNIt+03pZRJ8qh+NUIC/MpSIT2kkj6xR\ndGPOxKWFl7ubvoPAiwvdRgTwgK6uWC4fVFxP0YcnOmP/TFexxaNpJYU8agTw\nxjx/CKu9l+tgicAXl0x8HQNojsCyKkgJHefTjhj58mQ0SP0LcMpExtWaS2iH\nJ3qDnhfk0E89h1TUrpN6wfg4JUcuAlYlBRWDIzqI/rUGrPVm/5uRiBrgU+S4\n8qS6XF9r33LAuSXp79hLv8JHznnmIb3J+A8FrQsEnpYYkXiOc8nOn1Usy65s\n99tpEt0f5iCr7ZqHq0Wakpjf/5QeTgK/JwJudUV+GY2wJWRzQ/rjqdeX77H5\nfF3OiB/KrpE13TzYLZNDLtJwCb/DrxomcyQY9lDdC8URjbQg9ggfx8J5nzEI\nkMhyNk2qCy+noDi3cWlEu7pT8OZms6ZriUsZGMeobCWMBlFy6HeBYAisyv1X\nU9tn6Ck/4KKDQmFf1hwEaXaPl3IYEhTSKyWVREEzvdGzCxpfx0zaYhRJpSix\nhrFSTaBTOK4X439q7LZdbQgnySrTVQS9IXZ9B+YiT1XsmpuK9Eh7+LCusHYM\n2UfbjlInaomlyfX4WC4+99CRaAcQ6/PqwRUJ1B1dquf7Il59J5jyF+8wuiq7\nO64f\r\n=VR/j\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIF084jTQ9EPvQe3hGLs/612AIW8lcn2LsFn07APeMO0QAiEA3Mo3BWN5x2vmTPNHjUcq4Q7/SlODZLPqmssvL5Wt1bc="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"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"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-formfield_0.23.0-canary.cc0aa7a9.0_1626382991027_0.2882378390221063"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.a8fcac45.0":{"name":"@material/mwc-formfield","version":"0.23.0-canary.a8fcac45.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=12.0.0-canary.22d29cbb4.0","@material/mwc-base":"0.23.0-canary.a8fcac45.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-checkbox":"0.23.0-canary.a8fcac45.0","@material/mwc-radio":"0.23.0-canary.a8fcac45.0","@material/mwc-switch":"0.23.0-canary.a8fcac45.0","@material/rtl":"=12.0.0-canary.22d29cbb4.0","@material/theme":"=12.0.0-canary.22d29cbb4.0","@material/typography":"=12.0.0-canary.22d29cbb4.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-formfield.scss"},"publishConfig":{"access":"public"},"gitHead":"7319affa5e07f6651089343a3fdf21864f2d3de3","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7319affa5e07f6651089343a3fdf21864f2d3de3/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7319affa5e07f6651089343a3fdf21864f2d3de3/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7319affa5e07f6651089343a3fdf21864f2d3de3/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7319affa5e07f6651089343a3fdf21864f2d3de3/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n|----  | -----------\n| `--mdc-typography-body2-<PROPERTY>` | Styles the typography of the formfield.\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.23.0-canary.a8fcac45.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-+p7GBVkmEq7+tY94CgvKcuHQAFls0wIrHsKXeudDzEVIzTNIIYTNvWcfMqsyMZRIoVu7nNQN+ME6ZtCGLkEoeA==","shasum":"21fb2343381322c7a321109351db25f2c99e9238","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.23.0-canary.a8fcac45.0.tgz","fileCount":13,"unpackedSize":36339,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg8KcACRA9TVsSAnZWagAA28UP/03SdsmOJQF/Mhc4wLgo\nH6jLgJU+HRRFN/u6KYlTu3wHONwMcQxMk8xwAcr/N1sLV/nMvGSqDuHBQEvg\n2PHjgSPZY7DnsdLYU1aWG5/QNEpowHQqdXldgCjH7MwSNGe83xj1D9ZfFfVN\n8G6OSSDbCryjdTR2VTBJ2hz/QwKNcls0fSnVZn9D07BLI2M4c2b1zRQgvWYY\n8vX+ibsslMykIJDWkVFZkXpAqW6nWUfaRnj9jCG6T0kw+5/pBSki0ymX3bda\nFQM88J2VqlVfzOXGxl5FL8BYL8VOZ8l9shIbYLUfG3bhFcR4KvmdgUMiQ4Ou\niBslRy14cuGjcJQDrpKogVxVtqXSGgBlZrHRmyGGDz4qR+MBUg7FyUWKa586\nVXiA/+7vf8WptiREIdWGAUEXFbth+r4bW91J84Xewl71KxIeBJm1OPox0Q7d\nGrDLLywbIkq5tQK6j4RptmTzrywV7xrxQ+Wvs8Nn13OBOBaXVeS80ASMbBTF\nPomYy4kAC0MvFugqC2QKKSjGjR3q775llKy3Xp+sVYA0vDJ3PZUgSMGod1aa\nMmg63cNpgkoceVyba+GHTkj6awD4iQYeaTlMq2oxE4qrsZU8AGAc/0htQhGk\nuEYG5D/7XNBKz9wSttMxcI1lZKX8enQxceHAvKEO3fsCyewauXPzxCzb/ITA\nmEH4\r\n=VoC6\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCZKtRO5CuzURc1zZmG6mIL/wo9lJ1htOlPLV66rD2DigIgA2Y01rW6E964LsF4O6pmmXBYytt2iV13MT7yiQBbpM0="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"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"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-formfield_0.23.0-canary.a8fcac45.0_1626384128114_0.6081726004442665"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.3ca580d1.0":{"name":"@material/mwc-formfield","version":"0.23.0-canary.3ca580d1.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=12.0.0-canary.22d29cbb4.0","@material/mwc-base":"0.23.0-canary.3ca580d1.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-checkbox":"0.23.0-canary.3ca580d1.0","@material/mwc-radio":"0.23.0-canary.3ca580d1.0","@material/mwc-switch":"0.23.0-canary.3ca580d1.0","@material/rtl":"=12.0.0-canary.22d29cbb4.0","@material/theme":"=12.0.0-canary.22d29cbb4.0","@material/typography":"=12.0.0-canary.22d29cbb4.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-formfield.scss"},"publishConfig":{"access":"public"},"gitHead":"a2e57ca3915a4619a2a2fe234e3e3bb8be5a5496","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a2e57ca3915a4619a2a2fe234e3e3bb8be5a5496/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a2e57ca3915a4619a2a2fe234e3e3bb8be5a5496/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a2e57ca3915a4619a2a2fe234e3e3bb8be5a5496/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a2e57ca3915a4619a2a2fe234e3e3bb8be5a5496/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n|----  | -----------\n| `--mdc-typography-body2-<PROPERTY>` | Styles the typography of the formfield.\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.23.0-canary.3ca580d1.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-30QGtnIMb3D+O7IWaMtorwKMp3HVtBFw3xPYEKnrMD85fiEa3JH5JlxeJLEU6poVBipqpavv4T73U5lT1vQ9Ow==","shasum":"83b0dbcf7300fcab445670288ac75dfdc061e756","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.23.0-canary.3ca580d1.0.tgz","fileCount":13,"unpackedSize":36339,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg8LC2CRA9TVsSAnZWagAAfksP/1oA4F0x0TZ6Wb/uwkPa\nfDSyxnlV9zvZkR5J/HzRWaZwadJvkC6Fy1K1wjvp1ovNwgDBudoNVcWVTI7V\nXeV4EVInAKC78YDNvSzFnNchVnK5VePg0F/rzTYjANja83hPkJ0RI2gNJ6C6\nwhtSWpqFeOE4oUytdcMkP268AwX4WUG1Uphxfpb0fFmnbbOpNNE33HVp0X0D\nbXEFis85loupoti1HWuxmLBHz8nfGsDHGAQ0Wx+TRFrtob76bOtumppiZiSj\nVLMGn0s4kP1fcMicxSzB2l7q333j9Wfye5PoYoF9GBUNZkRH/JlaQ90m73gx\nofaLZlsSmScnKnTC3lTkC8kuJthSvFV88Gb+bsp+18ErJzDnpxvw/gCy5EQO\nGYQYU0QBnqlSryx3Bm++Tn7hzfqIUc3bTpn9fneOZbpclIL6TrqKBgXCCgEx\nN06YBzoiywpNKvEqVHcS4J68xcxq/Njo1P1xJ7CVvVS9pUe8IPhptaxl/C5W\nZBFrxjims6PIApDhYj9ZPHyrKv3vb2wO35/WG8yGSIlRce/DxRk+gjInnb1/\nm6boh+4vlY6y4eCpCjq7cBqR9I/gCKA/gLZcszfSZDlyFQIIU4Bln84G6O4D\n0WKjxRik0ytSijjvi6MTKvzbahcS3Vc7BMhSafphSS1xIT9whI/7FNxtAeYZ\n7tRf\r\n=5A1V\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIA92FOJDTr9F1Z5pmP8LJpozfcjoZjLGqdMbPVA4HDIPAiEAwUWI4QFaOIivX82rBQQXtGXuDs/5/fIgaIlfPG/dxAI="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"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"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-formfield_0.23.0-canary.3ca580d1.0_1626386614162_0.4604309587508959"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.9e41cb2e.0":{"name":"@material/mwc-formfield","version":"0.23.0-canary.9e41cb2e.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=12.0.0-canary.22d29cbb4.0","@material/mwc-base":"0.23.0-canary.9e41cb2e.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-checkbox":"0.23.0-canary.9e41cb2e.0","@material/mwc-radio":"0.23.0-canary.9e41cb2e.0","@material/mwc-switch":"0.23.0-canary.9e41cb2e.0","@material/rtl":"=12.0.0-canary.22d29cbb4.0","@material/theme":"=12.0.0-canary.22d29cbb4.0","@material/typography":"=12.0.0-canary.22d29cbb4.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-formfield.scss"},"publishConfig":{"access":"public"},"gitHead":"66f1b7c941717bc279a73626020dd81fa186f3b2","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/66f1b7c941717bc279a73626020dd81fa186f3b2/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/66f1b7c941717bc279a73626020dd81fa186f3b2/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/66f1b7c941717bc279a73626020dd81fa186f3b2/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/66f1b7c941717bc279a73626020dd81fa186f3b2/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n|----  | -----------\n| `--mdc-typography-body2-<PROPERTY>` | Styles the typography of the formfield.\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.23.0-canary.9e41cb2e.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-NEqB7cp+q4nIXeTfpmemLXz5GFWE86QoLlhRnEZQKd42AGGqjlhr/BQPxm4wcDEOrZ3n7OW5g+dSJ0r3vVKr8g==","shasum":"66a0a1d658f3c8ea1e0c06f77a14bc1890dd180b","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.23.0-canary.9e41cb2e.0.tgz","fileCount":13,"unpackedSize":36707,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg8L/eCRA9TVsSAnZWagAAidYQAIgBGOqOx259mTEC2Mkd\nWzkV8Vv5bl70fNrsJisVJ50QRoJ5fpCiOD9xcpzFP3F7ttVZirUC73IeHf7/\ngCyLGXVMovHe1X4GT9loFIbreTKsVxQlBh6G6br22bOwKmnzpj3Vd3O3AV48\naB09Elc6VKK9TGjxYdr+C28U9wKZIr7jBteO/KUNpLIcKVujzRiWWQRWRn/3\nTyBHo15GVHWOWNuwOAjTldsHXOGr+8VP2mYaPgF34ewn/U+l4Bas/b1/+Und\nC1PEtbLmtsezjKUfdrwzEN0hp/4ga39VHseo/jaXsL9ShvAKuoCKBuKiTGHU\nX5UAZqjKQKXqD/vE3Y3na+UcdCHv9K0RDjcKYMn5wRDE40X78UOXDMhUkD+/\ngchqlss9igKYriknOaFRmtEnVFbPirIiKzk95hX+ANrgg0G3T5ruFj3tY6zb\nM93v1kQtc1BobC3IHeyYCFTeUC5Rb3vZMtzCP5ZUlnp0UXxEkK/8xRkSlq7r\nINYFKbqhNBQOSAl5q+o8dDj7vtXFqr+n54Sc5CmMUhBqOLWubC5vQ9dhAOX6\nh3zJrmz6SLpaMJZC4NIPtDHeg8rBxs0f6klOPiyndPoxQpVTHGTPtiyXPI1X\nvA0L+ciR8QgN2Ft7d3WjZbod/KwqSj45f/0wztVkK44iEs0f4MWpQ2GHX6ML\n7gig\r\n=znzd\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDsLb1eBY1RAqhwjoZFgDViJ2Nq3s+Rn5PtbEPKMxYw6wIga4BF9UAsgj9JJlDXMqEO9diYqyLZRfPT1vMMfFL8Z9E="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"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"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-formfield_0.23.0-canary.9e41cb2e.0_1626390494646_0.616854117745294"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.c180db74.0":{"name":"@material/mwc-formfield","version":"0.23.0-canary.c180db74.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=12.0.0-canary.9f68a932e.0","@material/mwc-base":"0.23.0-canary.c180db74.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-checkbox":"0.23.0-canary.c180db74.0","@material/mwc-radio":"0.23.0-canary.c180db74.0","@material/mwc-switch":"0.23.0-canary.c180db74.0","@material/rtl":"=12.0.0-canary.9f68a932e.0","@material/theme":"=12.0.0-canary.9f68a932e.0","@material/typography":"=12.0.0-canary.9f68a932e.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-formfield.scss"},"publishConfig":{"access":"public"},"gitHead":"33c53eb23c6f331885c1a70223139ee7e69ae97a","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/33c53eb23c6f331885c1a70223139ee7e69ae97a/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/33c53eb23c6f331885c1a70223139ee7e69ae97a/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/33c53eb23c6f331885c1a70223139ee7e69ae97a/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/33c53eb23c6f331885c1a70223139ee7e69ae97a/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n|----  | -----------\n| `--mdc-typography-body2-<PROPERTY>` | Styles the typography of the formfield.\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.23.0-canary.c180db74.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-5XvWE5789JqUqASI/m0RbgFTC/TtT/2KBEKbUQAzTxOYRPTIGcZT0MiU7MmCQCxfKsT4ZJR9nFKJerRlhpZiJg==","shasum":"3e14a72dcbd6124a007029b7f4d11a73dcaa3e96","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.23.0-canary.c180db74.0.tgz","fileCount":13,"unpackedSize":36707,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg8cDRCRA9TVsSAnZWagAAOXEP/1mF/dM9Piu+TdYwBRxB\n8y9ngOreXx2Q1whGRH/4mYI2GeAOqGgBiQXinUelyKU7BYNzSAw8Jc0qGMbH\nrT1lMZRmNvrbPkpVN8CcYrkb2diPZKjXcupUKnretHt6rq0uMc3GATUiIB3P\nYbEK6r+jH0LuOy1Tt3sy/nt0kIYk3hSg8OEJN2eq6zcG/j7rWGun39QPmsX/\nCfSSFLrWYTOiveDkf56Ay4zpALiHYsqpZcSR2gJaBt7g/hKmuOgekrZZ19re\nbEfeQ0iXKP+B58NQCS0VNUebSS9S3mdsSHP4QLhGiwp6rYAmXemacHoDZAE0\nnny0HtiKpZZ4pZ5VY1mdUGNfIfduQnh6zxd5QcDpeqq6XqMV0r3/JOgnzPNV\nwqBSx9tAYeAXYHILPtm4+JZrN9iSPzY843o6gcqbmj1/L+LfGYltdznDmxHZ\n6hG9L3Tv9A0MJV/bU6CFV/zDtJak7WERKczH6ZuQxrtRzT9Q/EM7U8cGPLp/\nqR6wHn0MYxB3pSUxP9FsQkx32qs4ogWbbgWVGxSLU2YUjel1OXD9D7oXDj7i\nQn+lDJAQllBoyZCfd9WBDNIQw+kGXLwACeWmLO+y2UquVv7eMxTQSzIWEzcq\nXf52EDbd62p415dKM1r+Hp0l7J84oBcXNa5+pwM4i9PoSDzFoi3BiQJPXTJ/\nNbWH\r\n=hVUj\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDmi3aJJY+wC50MySPQI/pIzgZMKPauO5j4ux4zpIJ78QIgV6jFCHSunzyuNLYTEMvHwlk6QHu4NbRD9RbHZ3WvDWM="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"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"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-formfield_0.23.0-canary.c180db74.0_1626456273553_0.35955438613313007"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.0d0a9267.0":{"name":"@material/mwc-formfield","version":"0.23.0-canary.0d0a9267.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=12.0.0-canary.9f68a932e.0","@material/mwc-base":"0.23.0-canary.0d0a9267.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-checkbox":"0.23.0-canary.0d0a9267.0","@material/mwc-radio":"0.23.0-canary.0d0a9267.0","@material/mwc-switch":"0.23.0-canary.0d0a9267.0","@material/rtl":"=12.0.0-canary.9f68a932e.0","@material/theme":"=12.0.0-canary.9f68a932e.0","@material/typography":"=12.0.0-canary.9f68a932e.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-formfield.scss"},"publishConfig":{"access":"public"},"gitHead":"edc1a3fb88ad7e6dec8f22e73f329dd02bca032f","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/edc1a3fb88ad7e6dec8f22e73f329dd02bca032f/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/edc1a3fb88ad7e6dec8f22e73f329dd02bca032f/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/edc1a3fb88ad7e6dec8f22e73f329dd02bca032f/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/edc1a3fb88ad7e6dec8f22e73f329dd02bca032f/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n|----  | -----------\n| `--mdc-typography-body2-<PROPERTY>` | Styles the typography of the formfield.\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.23.0-canary.0d0a9267.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-kDqACjvt9vIzVOuW00Gantb4bP8cuEodZV9XhlHoU0glNA/PkShT38m5rZ3D3dV4SWnpHBT4QZTWU3cB+ysRqw==","shasum":"29fd6c3ba54808f3a44aa2027d6235e8a1ef3599","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.23.0-canary.0d0a9267.0.tgz","fileCount":13,"unpackedSize":36707,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg8chfCRA9TVsSAnZWagAAUyMP/jCZClnJsZmu4OoEsZ9q\n+ER19BJ0uHKUmFEh3IRqe+ZXRG0o75JqEMTQgy6WTJuNGHooktxpZI813+jN\nUVqDU0JhdWlDkQdzetj5yGYUo3hhB0M+amH2+hSPSbcr7N67N+ildfqlovty\n6Mc3fTfQkSLL3ZvSDFWNfKcZmxKmZfmNS3b1zaZLqabRDGotEXWSoYWggbrq\nGyIgyRXsOVP/0VZ6VuHcX0zAbvRr0HyOagURfIJFcaIMf1zFkAP4jQd+Zm/G\nYEMjcegvFxXcwTNz6CLFS1tO6AFL44H7ZtHZXTcMir9b7E35YxLrpxoohhLp\nhcnqkJ+YtJYYL+ZGSP4+nf+A974BkYnBq49AoP2oD5zuWD7YN+232EqthhQX\njPxcXejnlxKWtIStFLnMwY4AGLBKXzDkUbrA9iRhKdxkFbAaVWPQd3vu9WQZ\nYDelBnF81divLCtuG9ZICYhBG++VJozQjh08XRah24u/ZsnYKyCs/A04Slvj\nUU2H4AlPjzUkEZVFi65/Kt43SJJ9PIjcs10LACia3f67OI/Z+aIFa6Ia1tDy\nD6z7A2SlSP7vH3f2BIBzyyoABfJYxdblxE5Vb6m7OAs8O7klkGg8W7RX3VuU\nwq2owUHlYeiPYa34lS7pWYL5+iUi3A/JkJegU3q9fBShVfdkM70vRNaSsOxN\ng+Ge\r\n=02nl\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIG1HLnReAkZMcGiuq6njyHJV2lUMV6mqkmhrK4OsbClGAiAKcXLyWhY+rZC7FTyWQO8fpfWzRvb0T1o3xokIYtdD+A=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"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"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-formfield_0.23.0-canary.0d0a9267.0_1626458207622_0.6915065886210774"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.d234ec3f.0":{"name":"@material/mwc-formfield","version":"0.23.0-canary.d234ec3f.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=12.0.0-canary.9f68a932e.0","@material/mwc-base":"0.23.0-canary.d234ec3f.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-checkbox":"0.23.0-canary.d234ec3f.0","@material/mwc-radio":"0.23.0-canary.d234ec3f.0","@material/mwc-switch":"0.23.0-canary.d234ec3f.0","@material/rtl":"=12.0.0-canary.9f68a932e.0","@material/theme":"=12.0.0-canary.9f68a932e.0","@material/typography":"=12.0.0-canary.9f68a932e.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-formfield.scss"},"publishConfig":{"access":"public"},"gitHead":"950f54539b9a71153ac09a57ec5710112c307c8f","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/950f54539b9a71153ac09a57ec5710112c307c8f/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/950f54539b9a71153ac09a57ec5710112c307c8f/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/950f54539b9a71153ac09a57ec5710112c307c8f/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/950f54539b9a71153ac09a57ec5710112c307c8f/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n|----  | -----------\n| `--mdc-typography-body2-<PROPERTY>` | Styles the typography of the formfield.\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.23.0-canary.d234ec3f.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-ISyfc9YMQCmAUdMZ2aZ6Yv+I4ZlIxYjMj4z8eL4grNKV05c/Z6mOFvf9Er8KQm04nvxmzVIfvijS+egqxFBUGQ==","shasum":"c490fa8c10c84e377995741a6d5d25fb7226547f","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.23.0-canary.d234ec3f.0.tgz","fileCount":13,"unpackedSize":36707,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg8craCRA9TVsSAnZWagAAzTAQAI0OiBaKijj2qLfDWORa\nfGddEP/cATYLWNW5oN4yljuNbYzixYQr04IhWO+T3IAnijQS1DbLv+Yq66Fl\nHbMQDt9p1Oe//2NQqi3zSWVsSGzK/WyWElqk1jPliS0EkCbOQ/Z59WJjR+1r\nxGzLQrX1PxDmBvTi4SmTg7cukwx989xqxhRbFiUoXyQl4Jt1yizX3a3vdkEs\nA10hOW68dE0ZdwrtZNMPwYDuB9GLIssObWl36qnr7XS0bzeTx4Skcp+PpF2H\nqwBYHfL55sxN21HGoVYxcu8NifRwYBLAY7TTixlNWLCrOXEm44t1unxZmTrC\n+7n+3IpMHSBvdUUfzVSYS+fA9dbyC6WMLOunoCOI1uwSnMho9UawCSyk5N8O\nhNwlU2ITmFlXknHt1ydxlGu+laJXFEAY0rEpBbW5SZIPQp1NPr3EoqLTCoef\noA/HKJiP30dkKs34GuP8o08f2rfI2RQ0QEuc7yCxgkOspv2kbLR1xB5+zQmT\n4MGc/sh4wmGNI/4+Wh1idGRyXIyomzl9cQBfRLqIyQz2cCt4ioej5TticT4H\ng7gyG8xf0d9QOgoBQbjVg7RUOlTP+tgsZ0kDTvNN6oT9/mSauBktOF/lG3qd\nifz3VIHW0b1prt2jYM9bos+mLmXIXdVIGul621kq1oZ8CZxHkK8mA4JaXxSX\n7OWr\r\n=yB19\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHIZxHM3mjHJUKCpag+FXoRDAYKaVfaJN4k32o8LtsAwAiEAn49T4JQOFBP+Wm3c2VbMF/ERo7w89vl7Ec9rcokY7Uo="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"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"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-formfield_0.23.0-canary.d234ec3f.0_1626458842201_0.5954166080684633"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.5cd4bcdb.0":{"name":"@material/mwc-formfield","version":"0.23.0-canary.5cd4bcdb.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=12.0.0-canary.9f68a932e.0","@material/mwc-base":"0.23.0-canary.5cd4bcdb.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-checkbox":"0.23.0-canary.5cd4bcdb.0","@material/mwc-radio":"0.23.0-canary.5cd4bcdb.0","@material/mwc-switch":"0.23.0-canary.5cd4bcdb.0","@material/rtl":"=12.0.0-canary.9f68a932e.0","@material/theme":"=12.0.0-canary.9f68a932e.0","@material/typography":"=12.0.0-canary.9f68a932e.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-formfield.scss"},"publishConfig":{"access":"public"},"gitHead":"5c053f1de07d32aeb409f327470360f0b5c02ae4","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5c053f1de07d32aeb409f327470360f0b5c02ae4/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5c053f1de07d32aeb409f327470360f0b5c02ae4/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5c053f1de07d32aeb409f327470360f0b5c02ae4/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5c053f1de07d32aeb409f327470360f0b5c02ae4/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n|----  | -----------\n| `--mdc-typography-body2-<PROPERTY>` | Styles the typography of the formfield.\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.23.0-canary.5cd4bcdb.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-BzypAEXcf4wmBVDssuwx4KL5LrXJc/7zEfX/i6mIkGJhfvXUcq0oYVbVwCFba6c1e+IAKwurhVZj7XfWgF1hlA==","shasum":"ae9a705850fdcf4227928adb25e8e7e8e37544e2","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.23.0-canary.5cd4bcdb.0.tgz","fileCount":13,"unpackedSize":36707,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg8fYJCRA9TVsSAnZWagAAKh4QAJEjmGJOy8NpO/Wm44yI\nJTzSVGWnCp12TK1dCCkuN+GrdiYyZbeIpFlzs5WMtQygnq/inS0DlTZf4jTA\nQWQqxrjsdqgkuivv7nDVP4psnb023JaLqe1FKtUMK0aeEnqIv7i3xDVTiqUH\ndN9toDzTm/4v/dt4oem64en5O4CoHFoDoG6nHsDg2oPxDZ8Z8cy3XmnbcXsl\nqRg3QFnysKfXo/b3hOgyZT8CQI5Yg2eTAuchV8gh1bSRA+cezHp/BNh1A72H\nhqbVeu8izGtZ6WsBczlearpSNPmqsa6gSEfEatDhh3GG6EnkcXWwUMZIuwWb\nUrpzTtvAyaXseh2fl9CR6UBtLo3cel07nmXBqT/kCbQW9WKnHOnMPmWe1QyQ\nQMMhK1arYzvleFRjMFasSO0ilIFlXTv2B7sD1r0TqSLtSJJp2P2KIMCvtFTj\n6Aj2umQvI61rtpPm3FXgNPTPCH3hlau0S6oRZs2hHVRMx6vCo/moxZZXNULy\nsVmPRlkLbxUZywcujAoc7AWeN54zI2+IgExm/0Z0P2wYRnn0Hfv2GPj0o54f\npFitvuoHJ1oVgoAU97sCd7Lojysu7J16smMS662YaLvpqf1Fz0Ein5FT0bns\nwUCYo5Wxq3Qkcj8W9YJh5GwcfHN3E16jYnjtYKf777JsJmgwUQ78V67COXG4\nKaWX\r\n=bjzF\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD2v3dBOtyUoCXeQ5T2tveUDJ/OEMUC/ZNf5DVmyBs1vQIgGg/uSNn2uj04eJVBmGiDZVUS8EfSRKx+Bk5w11JXezc="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"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"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-formfield_0.23.0-canary.5cd4bcdb.0_1626469897705_0.08773188010443955"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.2b133cb2.0":{"name":"@material/mwc-formfield","version":"0.23.0-canary.2b133cb2.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=12.0.0-canary.4d95812f9.0","@material/mwc-base":"0.23.0-canary.2b133cb2.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-checkbox":"0.23.0-canary.2b133cb2.0","@material/mwc-radio":"0.23.0-canary.2b133cb2.0","@material/mwc-switch":"0.23.0-canary.2b133cb2.0","@material/rtl":"=12.0.0-canary.4d95812f9.0","@material/theme":"=12.0.0-canary.4d95812f9.0","@material/typography":"=12.0.0-canary.4d95812f9.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-formfield.scss"},"publishConfig":{"access":"public"},"gitHead":"72202d1bfc4060bef4aa100b9593a5dd27125d0e","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/72202d1bfc4060bef4aa100b9593a5dd27125d0e/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/72202d1bfc4060bef4aa100b9593a5dd27125d0e/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/72202d1bfc4060bef4aa100b9593a5dd27125d0e/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/72202d1bfc4060bef4aa100b9593a5dd27125d0e/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n|----  | -----------\n| `--mdc-typography-body2-<PROPERTY>` | Styles the typography of the formfield.\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.23.0-canary.2b133cb2.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-oMlMk5JAPkXp8f7inxuzcfOn7zQeuLbFmWADqI4PTEEC22tJKUduGWqmsOFxHn00EAtZKNogtIrJY1Q2E5k13w==","shasum":"29faf4ef475f43b5dc52cd8fad42bde48086012a","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.23.0-canary.2b133cb2.0.tgz","fileCount":13,"unpackedSize":36707,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg8gLOCRA9TVsSAnZWagAAYUwP/RPZ4vvA6j9bJfBy+9x5\nQt9RcFLW6R3hFNK+GeeBujZfsuKJLftCk+dh71ADGXjTxuBNNZ4LINBM8qEu\nk7gQqB7RxRGANlmIhGN5z2fqMaXaZVnxXZrPu46f+6q0Fe9Ll8UGLqwr3lxl\ndRnwh2ag0x4l4+xPKagSLfu9mVvnf5TJ+MIg34fjVHexEFeLlwZ43+ffjgZG\n+/psngIKBfvzj6AFJ7gNBo8XMZV0HDTUuaO+XeZVlAUa9BuFK55s5TiCPgfL\nnxdVM6X9shq5oU2zBAmbWSLd1EDCTZdAVayK8afCr+2j5mKEgcZ7tbcBTilz\nZvfP+siIMpTMSIxAC/X0bSYQc5Pqg2JnAhrg4kcxCaCi9kipTGHHGBuEygQ+\nxjmWQDJNsq9L1xSRX+LBSbHvFq0FxwhVGgcQNwjC0EXBfnqWnOh2vP7Fm2BQ\nzL1sk5LdK7hlszWuVFOp/MoU3YQFSPAq65b132IrE3yLwZa3QTAXp/dGJLPI\nvih1M+8MI4gJlyQB7SYebEYVqd+OYRlMp4I0tjDxpEAFwwnOFNIKh+Ewnaie\ndIc5bIQwHn/dB4xB5xP5+6ZsE4OgDyW1IGUOhBU2GSjygG+Q35+6sCtnDhaY\nM+M6naJoDEervf/TI9Tdna1yZ3uznStx1oa/EV4wIoA2XJb8Tv2TYhixncYR\nEnfb\r\n=Yl7R\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHAJG8f3eYozII+n3DA0eLebjgPgDte4H0GO4WRVsg/oAiBZenUCR4VWBFFo0d5yJvuUHUH8teUO6lmkzGedZ7vGpA=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"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"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-formfield_0.23.0-canary.2b133cb2.0_1626473166133_0.8320667247613873"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.ae4f422b.0":{"name":"@material/mwc-formfield","version":"0.23.0-canary.ae4f422b.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=12.0.0-canary.4d95812f9.0","@material/mwc-base":"0.23.0-canary.ae4f422b.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-checkbox":"0.23.0-canary.ae4f422b.0","@material/mwc-radio":"0.23.0-canary.ae4f422b.0","@material/mwc-switch":"0.23.0-canary.ae4f422b.0","@material/rtl":"=12.0.0-canary.4d95812f9.0","@material/theme":"=12.0.0-canary.4d95812f9.0","@material/typography":"=12.0.0-canary.4d95812f9.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-formfield.scss"},"publishConfig":{"access":"public"},"gitHead":"8bddb410bdb60fa3790691718471a6b49c3f8765","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8bddb410bdb60fa3790691718471a6b49c3f8765/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8bddb410bdb60fa3790691718471a6b49c3f8765/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8bddb410bdb60fa3790691718471a6b49c3f8765/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8bddb410bdb60fa3790691718471a6b49c3f8765/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n|----  | -----------\n| `--mdc-typography-body2-<PROPERTY>` | Styles the typography of the formfield.\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.23.0-canary.ae4f422b.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-JksbdhW3ddlrKiDSMJBa0/SQGgknblEZPEUn9sW7djj1N6fPwcKZew6Z3Qo87/1OAqt0t+B3qCbWPF/7uFYS2A==","shasum":"1c7c068a685712babc18b171a1f27740a6a5749c","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.23.0-canary.ae4f422b.0.tgz","fileCount":13,"unpackedSize":36052,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg8hv/CRA9TVsSAnZWagAAxWkP/jv4Z/z53FCnt2gRCM4V\nJz1DBIIfcazcgtXMv9Sc7UcKCItaoHvUjm3Q2jqdf0g1m0oA20ZCX80NJC2s\nNk/cHUBmIrxrgIKe2zJ1Jzv52xl38tdjMm//o4sXS2n19e87/QhCYwwRYRWP\nqTgJ767W1FdBWS9ZhKxer40Q1SAqbreAduZ9qGG3lsw4ZVObrtQRqKAvhLsX\nFJ1yxooSWzrbYHgVwVoHoTAQGNNJAC44HsvpoFIsFYL2PpBtf5Pdy8c5+PvM\nDh3zgZ/X/hlZbXgOnw4WcdN+gxG5aY3uDmLaanmWm1XV39RaW9sG+YYaay6+\nrpqtZsgiP8EZam5zkYwIiY17D/q4+a97LDCWsN0I4YC595eTzdRpKNlbNc3W\nsdjK0Yij3kRw9Tx6JGmL2Vbh6P9bKsJTBXuVgmj7R7bDE5sUtzBHMrTbMT+O\n772oIcJQuZ4JAGaejVNp1zgjlWRZfohvGg27gc0dwmMbWjqa4GW43z6u4JKL\nw7Ls8dTpP5NkKcJxpsvo+djrvJKFgs3gv6r4pvSWS58DRqgBz22oa3imwKN1\n9V2yZVM+haNFCF/PHjKi0HXmeX3CEPLnFFHsjxOohXLaB9cdR587cr2ZDJnV\nuDLPs8H3WZ/3t05aGeZ/wdWjR51x8+PRViFcdmC+P9xsZ9UvpGgiT7PYaggj\nGoqO\r\n=raHU\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFqaHBsx6n7YbpDcnhzDkbc2RigCov+gUTIcq6hCocbVAiEAl9r+fF90eoIujk9Dahh5DmbEKs247DWc/OJ5MsHXZQs="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"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"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-formfield_0.23.0-canary.ae4f422b.0_1626479615089_0.40717502031291364"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.90ff8057.0":{"name":"@material/mwc-formfield","version":"0.23.0-canary.90ff8057.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=12.0.0-canary.4d95812f9.0","@material/mwc-base":"0.23.0-canary.90ff8057.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-checkbox":"0.23.0-canary.90ff8057.0","@material/mwc-radio":"0.23.0-canary.90ff8057.0","@material/mwc-switch":"0.23.0-canary.90ff8057.0","@material/rtl":"=12.0.0-canary.4d95812f9.0","@material/theme":"=12.0.0-canary.4d95812f9.0","@material/typography":"=12.0.0-canary.4d95812f9.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-formfield.scss"},"publishConfig":{"access":"public"},"gitHead":"f90c69a94171ac1d67bd6c3315ba759c0e2e79b7","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f90c69a94171ac1d67bd6c3315ba759c0e2e79b7/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f90c69a94171ac1d67bd6c3315ba759c0e2e79b7/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f90c69a94171ac1d67bd6c3315ba759c0e2e79b7/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f90c69a94171ac1d67bd6c3315ba759c0e2e79b7/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n|----  | -----------\n| `--mdc-typography-body2-<PROPERTY>` | Styles the typography of the formfield.\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.23.0-canary.90ff8057.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-pYCy+M8PKAr7Aj1wWPLW/ZRDF5bTYL+N6exCOutWKRxghTP95+3IjM3NiL690ZjxEx1hZS4Re63jNci+jKIyKw==","shasum":"31441b3d05e25f7da6dbe6355d7756930c63ded3","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.23.0-canary.90ff8057.0.tgz","fileCount":13,"unpackedSize":36052,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg9YcHCRA9TVsSAnZWagAAWTQP/34j9s9mXmxSdqpouMpO\nTS/7b7XPSGSpgPqEuLSYLIqawP45pNm4/XudB+RGDzLi66BJ+0GGuV057C9m\npjKFWqsMwgu3v1yHaNvNG2hQnzuvSlgzEQlNYqgOgZHRMTjChxtn9qd2MPXa\nxJVO8+otMLtR1UeQxBRUpZzppTYrwzk1q2gXfSvD36m/w4XuvaQIqCVszbq3\nEaVoAtO/59nbZo1CjCwwaeaJCPZoM6CGxB3DJY1xJdrrB2S8N0Lz8bKlo/jM\nmEBsSUxUx6r7/X8U3+l/zY+hBzKf7apNX5pnNOq6lKDayOUZJ2Ct0wOtLxYv\nkip3uccDjzHGcGkrDwiPgQMk66Qalo3akbYg7KNk1MBR2Qb+H2koZcxBn3Ig\nZxoZooGfUxaH5m0rg2fPJSf3HNVu+qeDwAwFfhN5jEy1ihJ3VAas4cGEVdYt\ntXp7rwmWy7H7LQfu5LExVQmxNkgemBB9MXi0Rs/mPDCGR3nffwIzag4eResm\nAKkyoyAJGW71aAmW2LIq0l8UWGt46JwsrzVhDUH30Cji5SGVv/hvzW0oyPH9\neHOd0EO6AoySocmpbULPol2ZKki9IFyq6orHo8aJmgeM0Edlx/azvF5Do7v8\nYX57ldFUzKmrRmCvfdBxI3H2xS3uS5y35S3Ew8TG7iqocqsSIm8XWOJMplxP\nc78K\r\n=21cZ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIH3rWfmPYHVDkEuHKVPKvD92h28vJ9rrvpNuaf9RiJV/AiANKVfrjx0Ng/34NLK78ZcD+LUh5IeZDLPPzW/wY0Z+Yw=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"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"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-formfield_0.23.0-canary.90ff8057.0_1626703623338_0.21180450563043607"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.dd7b75d1.0":{"name":"@material/mwc-formfield","version":"0.23.0-canary.dd7b75d1.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=12.0.0-canary.4d95812f9.0","@material/mwc-base":"0.23.0-canary.dd7b75d1.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-checkbox":"0.23.0-canary.dd7b75d1.0","@material/mwc-radio":"0.23.0-canary.dd7b75d1.0","@material/mwc-switch":"0.23.0-canary.dd7b75d1.0","@material/rtl":"=12.0.0-canary.4d95812f9.0","@material/theme":"=12.0.0-canary.4d95812f9.0","@material/typography":"=12.0.0-canary.4d95812f9.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-formfield.scss"},"publishConfig":{"access":"public"},"gitHead":"b0752e4552aba84ad89d4eafc1a2a995bbfa0607","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b0752e4552aba84ad89d4eafc1a2a995bbfa0607/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b0752e4552aba84ad89d4eafc1a2a995bbfa0607/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b0752e4552aba84ad89d4eafc1a2a995bbfa0607/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b0752e4552aba84ad89d4eafc1a2a995bbfa0607/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n|----  | -----------\n| `--mdc-typography-body2-<PROPERTY>` | Styles the typography of the formfield.\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.23.0-canary.dd7b75d1.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-kJ2YAa66uZoS9Tz+VkWlgzHhOLSbuVizfO4B1ksnto2Geev4aqnnabMvRAKq9tySxdSzSfDvrBOMW+kYPCFPQw==","shasum":"98612381570905f7bfce95d32dee209db7e69d3a","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.23.0-canary.dd7b75d1.0.tgz","fileCount":13,"unpackedSize":36052,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg9btNCRA9TVsSAnZWagAAVGMP/1VmZyquosonOQZcnsjM\noX5A0LTUXrw60qu1V53mL3IKnLGRRidysGBKCVl/k8BXPVaffUw4bwFQ1Mn/\nYMlA0dXEj7+583bXFmLvD2r2XL9LpTmB67PnGYpflKM6jQNXyB0nEVqowg/Y\nx3B46alQaZ4wQEj7xWYKZj8qc1FKmhazxEGM6uL7lSLjyfpPF7R/Xz22qP5d\n2ShFIalHymGVCCPToDIUbViSPE7WpnjfE4kZOHSZlJAiLjEDlKQavgfCgtS6\nXq79EXElP87ol4azznCbkIO7Kroy8Qly2/2UtOBSPe9EkKvvn9mkcE15mNIi\nveeQAjBfONfoxBnZ+Rk3QQqseYnyQGBKpUMIu/pttNEn+FLrMqnM73mncFL2\nXnZYRuWZs4q5xzA/hg+tBQmJGigVt3zVD1liBaRwroZHqOmXo+7jgVslpihO\n58hctnmAQy2hHVDEneJtsrvxV0dI3By25HMc1OLdIpgKBwnXb8imQknO3eIg\n2FZB8KifP0IhuD/HgXJSu+FFyZeEm2sdRTwLGXFsBFRQOwwcABiWgw3i8DV4\nRPMakQGdA6VNVcv8NacoQmgDEJQluzt7o/3UYv8Bmv3/ehTbsUaeeh0QlD7r\nCM8o4LuMWaj4pzXexJlWpLSsdKMv2Q+cCqsGy8WNYfXiA1PxFl2mL+QUA9nT\ns7L4\r\n=i4pb\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC14rpwftDvynLnXnpw2LbtEjplwnpwfg8XviphKoRSCAIhAJbQjT7xhhSanO7fIMRH3kECsXlbwfGsKIxKevLUD5cy"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"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"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-formfield_0.23.0-canary.dd7b75d1.0_1626717005508_0.8197748592930743"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.104debd5.0":{"name":"@material/mwc-formfield","version":"0.23.0-canary.104debd5.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=12.0.0-canary.38d1846cc.0","@material/mwc-base":"0.23.0-canary.104debd5.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-checkbox":"0.23.0-canary.104debd5.0","@material/mwc-radio":"0.23.0-canary.104debd5.0","@material/mwc-switch":"0.23.0-canary.104debd5.0","@material/rtl":"=12.0.0-canary.38d1846cc.0","@material/theme":"=12.0.0-canary.38d1846cc.0","@material/typography":"=12.0.0-canary.38d1846cc.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-formfield.scss"},"publishConfig":{"access":"public"},"gitHead":"9dde76584b6e4258f93d65b54a1f9695d2dddb1a","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9dde76584b6e4258f93d65b54a1f9695d2dddb1a/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9dde76584b6e4258f93d65b54a1f9695d2dddb1a/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9dde76584b6e4258f93d65b54a1f9695d2dddb1a/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9dde76584b6e4258f93d65b54a1f9695d2dddb1a/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n|----  | -----------\n| `--mdc-typography-body2-<PROPERTY>` | Styles the typography of the formfield.\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.23.0-canary.104debd5.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-n8dAjMDlBc8U7llssU1OfMpMpVVm9NTlQcGmZ1pKmaMXJXwa3SoduxDALmuljDfuil7B2Vn9im7YppudticSKA==","shasum":"caf0a98fe7df626d562af7242a1a08d55738ad37","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.23.0-canary.104debd5.0.tgz","fileCount":13,"unpackedSize":36052,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg9gJSCRA9TVsSAnZWagAAPYwP/jrZHvX2+9yecM0QzqZa\nV78smt28j3nBrsIiSyr3mFbGdOZPvprV/o42g74KjcKcZVO0OAMiXyT+89Kh\nWTuEFS5NZBqGS5cIdGz5dgk+DlUmVYIECmas1TWKMVQyOAWytekrhjUxGL5T\nfl8tjxuXKp9TUIVYwJF3js8TUjmL3MxTJkIhEgWLB/nM58c37XkknEspt0j6\nWFKnC/tt3VPEDKfIH+2OcWHB4SGNo36s3b6wgN0yUsKYJwZbFCrR8MfQObep\n45P0AfNv3nHFnF9aODygJjfA/T+7E+GBDHtn3//9fZZPZYZS9BFxM8QLvAws\nLYvdvsd+g4XG6KQ74vjXH0b45wXWQQtGwY6O1vVEqgHubR0CooKRfBgGln5y\nGnjA2YSe6kjsvpy85tYu8x1f1MY34Eekh4d1F5kSfyAEcvBVBifg1t7OWmYt\nTmbGx64FsqaufMNlFGv4/VtMd1NOp5Oz+ayxBtFbgaCgcUSE2wEzjX6xuqby\nhXJ53XOBjHK2/Wn3PkMX2MuxlX1nF95qBqYgZdgVA/FLZ4gfyG3Nq0GsLjZL\ncb/yROHfMji3ilfVSBGxBwk+F7F46PVTfRCjmvpjNWHBca24B6tsL2XHxtub\nBoqDE0dRO+dviQYUF42uVZtM/WvqcZmB+XMH4XcmGcPM0vBfatVwZgO+lXGK\nVyFe\r\n=15Me\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCv6zWQYp0bDgcV9bYN8SLOkgHaPsVhmOPJABMr2DsGsAIgdETDGBuDOBB2UNy88cvktjFTzzNsCWpnwOiV9a0TK0k="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"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"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-formfield_0.23.0-canary.104debd5.0_1626735186429_0.7206554174055191"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.4612705d.0":{"name":"@material/mwc-formfield","version":"0.23.0-canary.4612705d.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=12.0.0-canary.38d1846cc.0","@material/mwc-base":"0.23.0-canary.4612705d.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-checkbox":"0.23.0-canary.4612705d.0","@material/mwc-radio":"0.23.0-canary.4612705d.0","@material/mwc-switch":"0.23.0-canary.4612705d.0","@material/rtl":"=12.0.0-canary.38d1846cc.0","@material/theme":"=12.0.0-canary.38d1846cc.0","@material/typography":"=12.0.0-canary.38d1846cc.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-formfield.scss"},"publishConfig":{"access":"public"},"gitHead":"28f0176f44158c2fa7246b69d5737a09425a6e4f","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/28f0176f44158c2fa7246b69d5737a09425a6e4f/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/28f0176f44158c2fa7246b69d5737a09425a6e4f/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/28f0176f44158c2fa7246b69d5737a09425a6e4f/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/28f0176f44158c2fa7246b69d5737a09425a6e4f/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n|----  | -----------\n| `--mdc-typography-body2-<PROPERTY>` | Styles the typography of the formfield.\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.23.0-canary.4612705d.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-jB8qV6LlDlQCksxGy+s5vXs2YWxSguwTkyowysDDn7Y+n6gmcj7d+4Kzn3CiLzQVkBgIUd91bXA9KG3JOPUpwg==","shasum":"38a92f4f346154795bce4833005b47fa0e749713","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.23.0-canary.4612705d.0.tgz","fileCount":13,"unpackedSize":36052,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg9vP7CRA9TVsSAnZWagAAv0kP/AiU9mCqooYcW+1+rUez\nkDyaj8GgWDqIWkhgZanvk0wUdKKO96XNrWJ/2lA7KmzOpUyNwRpLmgKUHmgj\nqt5f3Q5AyafeMrDTugnXr5sqQBK5BwI9DJDyeam//mlxkX3HnEHJA5ayfJC4\n8K+2h00+MZeLpXG/6A9Xsfdoa2eLgVsXYra25JwXx3f42KcKc96bHkZN8Wi8\nhV41EI9zjrlK0bmcc1Aam9qTlzX2pw5aS4+2uuXqslmtyu2Uu8TkObc5hyhK\nq1B1eYyfrYrMnRvsrWkJ6j+4neLqegtapAUNdUWo2qg/6O+KFYfZJX6VO5oi\nWtvcyEVk2oQM8DTdO4EC2LciNaYSZJvwgLfFcCK+IAnC3P4qa/f+0UQuJCJX\nrUzI0hImcWTj6JhB/SIkbtpnu0AyzqNZRlwD1OgCG4h1bpX/Aqf3wI74DnKJ\n7osjp/7XtN/+RXoZyLrzN2JKel2aMUgA7liCisme0qd6WRXubVqU29hEbgEl\ns6tEvUAatUHNN0BJS/JmYJ/3RN5bfXCo+Um5aPd2MtrvzOemQh4wS/7Kli3s\n0bHbKrT90qGG6esjNXK730B9JUCJu6zwFJKKZXeEpY3lGYgP4v6HKcVdXJsc\n0jggrS2guYIBhfNvYQWwYKbhgfz93lh3FSXxbSVIZOl5/izRCdkqmPcdfDOb\n6diK\r\n=k0zA\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGhyMN7XFzOoLxs8ffCl9KxLJ4U+OfmGaT4c9PNfL54LAiEAnwdCOdeBq7tQEouJl33z4U2SQefBOms2LFDquiV/87w="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"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"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-formfield_0.23.0-canary.4612705d.0_1626797051714_0.2117925672878711"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.b36502a2.0":{"name":"@material/mwc-formfield","version":"0.23.0-canary.b36502a2.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=12.0.0-canary.6b0442278.0","@material/mwc-base":"0.23.0-canary.b36502a2.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-checkbox":"0.23.0-canary.b36502a2.0","@material/mwc-radio":"0.23.0-canary.b36502a2.0","@material/mwc-switch":"0.23.0-canary.b36502a2.0","@material/rtl":"=12.0.0-canary.6b0442278.0","@material/theme":"=12.0.0-canary.6b0442278.0","@material/typography":"=12.0.0-canary.6b0442278.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-formfield.scss"},"publishConfig":{"access":"public"},"gitHead":"1df0a9b6912d747311691d2320eb16519bf8c660","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1df0a9b6912d747311691d2320eb16519bf8c660/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1df0a9b6912d747311691d2320eb16519bf8c660/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1df0a9b6912d747311691d2320eb16519bf8c660/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1df0a9b6912d747311691d2320eb16519bf8c660/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n|----  | -----------\n| `--mdc-typography-body2-<PROPERTY>` | Styles the typography of the formfield.\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.23.0-canary.b36502a2.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-ZuKbsPQqitjBIToZoezHzFpBSjWifyANzIY8BGQxsGN0LwagY7g4o373kz4QOHIPgAY9V95IlfaDize6szAIaQ==","shasum":"2f2971c051d4cfd5cc16e14897f73ecb78c11aa5","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.23.0-canary.b36502a2.0.tgz","fileCount":13,"unpackedSize":36052,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg+KDeCRA9TVsSAnZWagAAxa8P/36phUwaebwPjqtRAIGq\n2eoS6d5Nvd0neaio7AEpN3uaUGPhAoHMb3pLSLmaIhgi8HdQEIx5mc4dkjb5\n0ALCJP9XtW/J5fxsJrsTHBgDo4HmOnXDjTakDPmZYOJB6zvK/iEkeXH6sWfZ\nTxkS/dI/1UAdVkpmEBxHhsl9QyccABlkVhr5vpKnrZY9xodKvNvSpRKc22tA\n4vAG206m2PavkJuKfI4wNFm3Zp0ZzXfhS2vBPIITc2EyBOQBTc+RuMiwNnnU\n3Gwjh3zuSZ7QZ9CHkH5UlGH+1TIjPsFTeId2OM5TqzOr/dcX0ec1DWgGr363\n//cQArZ9CkwgQmQgTlSKMslBpMCbW9XRlHNuubJYa2IRWKz2Fdg16Nwkdkrp\nKCVsKxGzzFwsYGrVSgcj86gykwruQhhkvdWZ9ARGB9IZRXTiUZc71R1oyJqY\nXjem68byh4J2SHUh7ZtRwsk+m3IHcm4EicmiUeDoAwWLYFUbFDYOQkHzkd/D\nU/Esf++rW6x8FHvS5FInd8HBco5/BsnOQ9McEqOsUJlemsse0jA9QmrGbp2A\nWLwf3bTCf9zkLQ3tCYTI1iTBXtzlcUgA2Af/+oYvIKxM3x8j653S3jHZEMOK\nLUXGtcftvaCLuSGBDbirWNS4y3YEkM1eqImzfj8bhJgbnbTuxa99TCS57FYw\nVBge\r\n=Ncxc\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAUpA51BmSSzthybZlWAQUSODLAQ+SBny7q6L5YC0FqbAiEAlr3Ja2ejW6XtAhT/7VXes2CCID2BYr5t8Y/xIskKYAY="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"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"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-formfield_0.23.0-canary.b36502a2.0_1626906845825_0.5128070677068615"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.2c392ab3.0":{"name":"@material/mwc-formfield","version":"0.23.0-canary.2c392ab3.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=12.0.0-canary.6b0442278.0","@material/mwc-base":"0.23.0-canary.2c392ab3.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-checkbox":"0.23.0-canary.2c392ab3.0","@material/mwc-radio":"0.23.0-canary.2c392ab3.0","@material/mwc-switch":"0.23.0-canary.2c392ab3.0","@material/rtl":"=12.0.0-canary.6b0442278.0","@material/theme":"=12.0.0-canary.6b0442278.0","@material/typography":"=12.0.0-canary.6b0442278.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-formfield.scss"},"publishConfig":{"access":"public"},"gitHead":"83a61c9efee1610d42af318683fe4985effae0df","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/83a61c9efee1610d42af318683fe4985effae0df/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/83a61c9efee1610d42af318683fe4985effae0df/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/83a61c9efee1610d42af318683fe4985effae0df/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/83a61c9efee1610d42af318683fe4985effae0df/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n|----  | -----------\n| `--mdc-typography-body2-<PROPERTY>` | Styles the typography of the formfield.\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.23.0-canary.2c392ab3.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-vAa+U8umgJrvHHd+lm71iRwodPy7dcsOlIhr9QRAzWg8RWItar6FywhZEmzV9+YGjQZE8sfV4dGwUloVYlwc7g==","shasum":"f63de352773d23a0afef85caf000654651ac1dc5","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.23.0-canary.2c392ab3.0.tgz","fileCount":13,"unpackedSize":36052,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg+YYsCRA9TVsSAnZWagAA6GEQAIyDLJGGbhgL4VDoG5/T\nEFdGxComahJfybrQ9ypUmlPnR5x+ZslSFzHV3xO00r6LSWd6+Bcxe+q8NYIY\nq0tsqymIJEvtikSPl6PQPssxAR5yy5gHy2wokIydjsUOjGiDtDHC677u1iw9\nyTrkb2vnR58Z4YUzEAuci3q/wdVPHtCUkUddKerpWP2Mocw92lVAa3UKJfxj\nx/QD8tiQb3cCiHwnie7ubE7BJYFg7hcdwyBEKF9N4V+Z/9JVpNpmlTOvQeUM\nnJ1AwTWcSZqwcbhJoJpB8p6jyqVEoBvdPMGYplWdAAkPNzyFanb5VmfdylyY\nfLJQO01aPO8hbfwBDAAqOHvmO9PEm14r17uhExwGbSZK5LhX3+aLliYakk//\nrsFG0DerJUV4+T03jhCvSMPI1DOUaRqBYU3uEAZsfVz1vUS31IjzX10z/M+V\n2A3sp+1Brh8eEy/DIxLGgOMfrpr2fl1fvR6axjxH7cJEU3qM922o9UYXdfgx\nxTBJh2NQQ2OpNM1w/0JTbqFn/ioKF+zRstdMFZWHr6VladwEelulla0qcC0A\nwCxHm7QvOlE9EsPB00UDSRLdv83BY9r7fAvkFcdEwM1hyDQp57aZ3wk17st/\nEKpSwleg4SzDr84Ef0wtmDtPdiG9Un7t1Ia/Ez4SEmuVtTp6f4Kmy+XcP+JQ\nFIe7\r\n=vBlJ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDzd19pwHkj1jq+KuoUiyFwFOSsREjupkVf1WDVPJECJAIhAI/3ZTjXT9nR3BNZsfst9PRospVKo1U/U4sASvPsIETx"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"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"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-formfield_0.23.0-canary.2c392ab3.0_1626965548068_0.20692609373124426"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.e8bac95a.0":{"name":"@material/mwc-formfield","version":"0.23.0-canary.e8bac95a.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=12.0.0-canary.5f00e454a.0","@material/mwc-base":"0.23.0-canary.e8bac95a.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-checkbox":"0.23.0-canary.e8bac95a.0","@material/mwc-radio":"0.23.0-canary.e8bac95a.0","@material/mwc-switch":"0.23.0-canary.e8bac95a.0","@material/rtl":"=12.0.0-canary.5f00e454a.0","@material/theme":"=12.0.0-canary.5f00e454a.0","@material/typography":"=12.0.0-canary.5f00e454a.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-formfield.scss"},"publishConfig":{"access":"public"},"gitHead":"2215253d0031fb9db27cec4c40894bd549b72930","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2215253d0031fb9db27cec4c40894bd549b72930/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2215253d0031fb9db27cec4c40894bd549b72930/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2215253d0031fb9db27cec4c40894bd549b72930/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2215253d0031fb9db27cec4c40894bd549b72930/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n|----  | -----------\n| `--mdc-typography-body2-<PROPERTY>` | Styles the typography of the formfield.\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.23.0-canary.e8bac95a.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-oE5x+7JPCyPWmIo+PoTh9zq0kdIRPS2urJr0efFve7xZucnmFH9ZpZoHPi+uV1jT9hiQuuDkR9XYhrfx40vJ4A==","shasum":"c1ce167c5462af11063841ea1155e73e23354e4d","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.23.0-canary.e8bac95a.0.tgz","fileCount":13,"unpackedSize":36052,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg+b5tCRA9TVsSAnZWagAABrUQAInkLzAJvPPxPBnGUvgf\ndUMBSZjc9oxQYHQ/gxDXXQArKyPZWTMHVB4FfD2oG4dafPMbbx3HOyrh2yk6\nsTe5ZQLboqDihP4uIMfr0t34KK+ktbK9AT4v9yDEDfWf6A9G5oc1f7Z6rgy1\nIJtBqLoo2eopYgN8HolRIjra4+cyEqv2Tjd4D6Q7CxPoWEnBM5dVWmI7JR0q\nW3GFUod8pKKoT966xq96zAM7IljfW2pviZaiTniREGMNr+k0kf/g1t7Oz+M8\nyp1SNKbQyq+nQNAb3EDIWM4UeaLgyujm+o3YAumqE5TwONXYT7o5ythQwIlL\nYwkINEZdCY8mggJXSwgOnQC0AXnCrJwTVj1poHACrlGUabmqMx/mjnrN25h5\n/i5kEcDka5U4f4Saly3VaVH+YCz1zajwH5B+COSSPL6Z+UPV18Z1snU1uJ6u\nha70x3MO3aXaJ30atzoi8IlvD84jHIueeams/sWLm0Fs+ckBvUSdvGAikd+R\naQfHv9Y0tMxvTWe463xjzNAl5zeEcDx/oHof9fZ5P2pQQWoK4a5yDlv4xXhU\nlzk2f5hUSmqJAXf3i1zx/s/2nrrDNlj2/tZYXS3kbQJ/G7OxmFZC6AB1/tke\noqBvT4jVpTv0H05xyCm87oV+J2viPiE+0CFWAPHigoFsC/cfmymVCyKJ8lJk\nzKw+\r\n=qncp\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIB8/MiTCozKyH3KJAbZdYra1PqmWcRxwYK//7l9eG8XSAiA/BtmD1DwSfIt4JiuByV0xVJ0P5uMaxs2noGKKHvgDcQ=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"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"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-formfield_0.23.0-canary.e8bac95a.0_1626979948846_0.9338989164857616"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.38f29f8f.0":{"name":"@material/mwc-formfield","version":"0.23.0-canary.38f29f8f.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=12.0.0-canary.90e08fc6b.0","@material/mwc-base":"0.23.0-canary.38f29f8f.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-checkbox":"0.23.0-canary.38f29f8f.0","@material/mwc-radio":"0.23.0-canary.38f29f8f.0","@material/mwc-switch":"0.23.0-canary.38f29f8f.0","@material/rtl":"=12.0.0-canary.90e08fc6b.0","@material/theme":"=12.0.0-canary.90e08fc6b.0","@material/typography":"=12.0.0-canary.90e08fc6b.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-formfield.scss"},"publishConfig":{"access":"public"},"gitHead":"484fc84b540f757ad561dbea442c8566694496a9","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/484fc84b540f757ad561dbea442c8566694496a9/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/484fc84b540f757ad561dbea442c8566694496a9/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/484fc84b540f757ad561dbea442c8566694496a9/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/484fc84b540f757ad561dbea442c8566694496a9/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n|----  | -----------\n| `--mdc-typography-body2-<PROPERTY>` | Styles the typography of the formfield.\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.23.0-canary.38f29f8f.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-gsc2iXJRpbAF32l0DNGKJISHH7FvJ14ogtcyvNlxDPXNEATruwU1zRc9ikVmLMWDFfzvPjDE9/1AbL9zVZstJQ==","shasum":"fe1b9507a6766284980d47d449aa4d84e44c5053","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.23.0-canary.38f29f8f.0.tgz","fileCount":13,"unpackedSize":36052,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg+wdJCRA9TVsSAnZWagAA278P/jpYxcDfrn7StCK3BxNP\n3UlUKr9BQi25qYkmeSgH494Exbh/ZUb8q2kl3ZBZVk6wtVk2rkvbSaseJoG+\ntmdPMD/+4jmk7jFQK94XH2y6QptMCDHp725GklFg/IuyGABvXNLkEDTI9t3l\nhyQSL0/bQwwV0Rhzb8Yw/Hp4KOPkMcJi8U2pi32aA9+toqJr592l2Uix/fZS\nothbK0EODrTA7YncK6DUJi/vbGVVFfbqfNMIML17wQexd0CEVrrvHqDmiDHJ\nTptSWlfdzY4v3k4jST2S/E/AcNsLPfIZoAP3xd5vJufILIuZnL+4cTyc7QAA\nYdzSyn+d8VheL3s112+lz+9jkOdY/SV5y9hkaSqDvdXafTXNsDI6xybV7m3l\n1usqmNvFFkd+ky1t5Cf9EnP7HKK9x4wnv4lgaeZa/f/6qxRKW0qXY/j36dUn\n2ygyvadBKGe0qzTSZW1s5H835RDvX1njOO5TYkYY6XGmgyFStMyn9LpEYpoc\nrjChdhy2Hf7MJGCTDXKclcfkBj3zfuckfE+UjdB++2VH49D8lwH4OIxbzd4D\n3MmvHRAoNDYGtLG/0ngNL8toRTIwHeUG4nlkX6QLn2tzZTiZuwaHl0LDSUXy\nFMzJAtLjhP/lFXXyIStibqcsjbVr82F/85yztgKMZJe5r+iKBhGHDzzmzheb\nZDjh\r\n=Z0gV\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDW0zC3QwAMGDnUx7JzmHF4CA/zoJHl5jOInXJJq2mnVAiEAnOw6E+keGVWjLfaaLf1czK9vzqgicOLJWdlapu5SSa4="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"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"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-formfield_0.23.0-canary.38f29f8f.0_1627064137563_0.33897404892202565"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.e0693475.0":{"name":"@material/mwc-formfield","version":"0.23.0-canary.e0693475.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=12.0.0-canary.90e08fc6b.0","@material/mwc-base":"0.23.0-canary.e0693475.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-checkbox":"0.23.0-canary.e0693475.0","@material/mwc-radio":"0.23.0-canary.e0693475.0","@material/mwc-switch":"0.23.0-canary.e0693475.0","@material/rtl":"=12.0.0-canary.90e08fc6b.0","@material/theme":"=12.0.0-canary.90e08fc6b.0","@material/typography":"=12.0.0-canary.90e08fc6b.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-formfield.scss"},"publishConfig":{"access":"public"},"gitHead":"dcaa39c4b4b0d5d5bda85df7a11ac1205f2fd669","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/dcaa39c4b4b0d5d5bda85df7a11ac1205f2fd669/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/dcaa39c4b4b0d5d5bda85df7a11ac1205f2fd669/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/dcaa39c4b4b0d5d5bda85df7a11ac1205f2fd669/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/dcaa39c4b4b0d5d5bda85df7a11ac1205f2fd669/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n|----  | -----------\n| `--mdc-typography-body2-<PROPERTY>` | Styles the typography of the formfield.\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.23.0-canary.e0693475.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-HxqlSYTnEUGBzB5+ylNfWrVNEMlbEPt8r3gHGdcP/TsSQUY9MzTCnl6HxVjiOLDkYewEo47tQ9899v/Cgx7qdQ==","shasum":"14036045bbcb57b29df908f38f4ed7bb98cf3f87","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.23.0-canary.e0693475.0.tgz","fileCount":13,"unpackedSize":36052,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg+xCvCRA9TVsSAnZWagAA9lwP/1j4Ihu7mphOW6/B4kk0\n16pn6pt9OYGG1n7Zlp+yxxdgmDQoGxODK4Vd4j+jz/CI+2kQrRdOfAyx8rYC\nP9XBCtHaa8meCYtT5zYMYK2MLKxwpiuPmQEku/8gHckU+1S9aSe59DCISFt5\ng8APBxAwhE+fYvxYjJcy/ZPGrCNpCKLf1vPI2nI0M2H/WbOXmcD0ywCP0bSm\nt+vdVmv7IbuIncGRiVmIkuCVJfOxAD4ulP3tMFpb5DCJlYMPUOcKqgu/NDvs\nJWmKYfcvylcHwwm29MHKWBV1XS78rPDz7AfN5KbmMe6V+h/ll9zMGhrEi2cz\nrb+mnbBMtD5bSjcMa9nMxeE80WrRlGHFXGWgFDrKO9kJRy1byRJwmCn4hZXd\n/bompgvQXPBCeFy0cVGGjggLNX/5aqqkNEdrQta4Ztlrq6d6wVCGBho91FvO\ncL/9vLvS4SAif99H3fQC1MAKpSoh9yefAjcuzFF/vTNgytgNYK/4zBWcXqAI\nqqUCyOyeAFRw2WpV9wsIoK17QFhO7PXJYRpcguDKlA+svcP0oloCVwCgglM9\nrpSpFcK8YZLGWD0JredIQMWSOLgRxVI7dQwYOqYIxG4NOU1frXYqDrZ+toit\n2YEPydAHB4d6XkUI0KfygkTFW3pYnH0xPD8OjAoX0qts8k0pUeZyKTDCG07n\nMG3V\r\n=Rowy\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCwBcTCB1Ais8ilBHV52AmdEIypq2UPISLk+UWBKEjdxwIhAMG64QlSTbEHsqt733fxcHgSuBMWfk/mA96MQlHDl/EN"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"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"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-formfield_0.23.0-canary.e0693475.0_1627066543685_0.7367367161834955"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.d595e030.0":{"name":"@material/mwc-formfield","version":"0.23.0-canary.d595e030.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=12.0.0-canary.90e08fc6b.0","@material/mwc-base":"0.23.0-canary.d595e030.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-checkbox":"0.23.0-canary.d595e030.0","@material/mwc-radio":"0.23.0-canary.d595e030.0","@material/mwc-switch":"0.23.0-canary.d595e030.0","@material/rtl":"=12.0.0-canary.90e08fc6b.0","@material/theme":"=12.0.0-canary.90e08fc6b.0","@material/typography":"=12.0.0-canary.90e08fc6b.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-formfield.scss"},"publishConfig":{"access":"public"},"gitHead":"7c8056c080cfa8a28ca6e2a5511b4db50a604a87","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7c8056c080cfa8a28ca6e2a5511b4db50a604a87/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7c8056c080cfa8a28ca6e2a5511b4db50a604a87/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7c8056c080cfa8a28ca6e2a5511b4db50a604a87/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7c8056c080cfa8a28ca6e2a5511b4db50a604a87/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n|----  | -----------\n| `--mdc-typography-body2-<PROPERTY>` | Styles the typography of the formfield.\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.23.0-canary.d595e030.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-um7BZZYKbLlovv3MV7S1NbDGDf8xdpiBIfgvtqbTF6gQWGJRgljA7co2Yhc83UGyBLVd+p5OK9UUfZTPl8C12w==","shasum":"f0fb6341d40ea896c8f22524d3aa2d1169f48dfc","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.23.0-canary.d595e030.0.tgz","fileCount":13,"unpackedSize":36052,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg+yweCRA9TVsSAnZWagAAMVsP/j7a7SApXVLJTI95bbAI\nXE8u2xf9VwGH7jBeN0FCU+3QXuvfc4Mf8UH67Sl1o1K0+9LZG35HfdI72aSP\ngJ5A+amPqK5P/Ba3xhF0V4LWKj7ycGcgWDbSrF6tRysgaFfwH8zL4R3TO3Wq\n5gJ1AJdbECTWh7AYipjKi4fMt+XtQJBnvwdsSLjyePnD1JyVKvPm5454+BOD\nNGjc2o5YlIcK7S1tWZqx/IuPlDto4p+i9RzLf7+zz0suZklVHWLIcPEFSOk4\n175+Rf6nUAYlMxXp1U1pQhAi+Xb7SRPzNFRARwIElmMi69/kZ1BDQMc81j6h\nCVSOb5wxitxBQXwXx6TwRH8DrMKhGw7hJgt9dteQSeu1zZkjm9Gb/7CrOb1d\nD8I7bSy7uv0swyj8nUsmTjFJHW0fmlnNUMrHlGQShxROScPlB+XPlF5q2an/\nr2d2Q0NBSAlEfbLjuiQs/fI7xHKGu//jjH6rLIQN1IL0snMlvwWrX1G6lofL\n+BTGm+TSTauB3RpCWFLAUvcXLYXJEGS+yvLEG3SFP+06h84CB+5hWxACVL2Y\nxyEAqClfUNCmHkEm8Xy9XBS0ONGlydAHJSD8Q5jhW2DZvdyI09EDlIblwc4U\n3Gk3HSWj0IusY0X/MEZVvjtDwM/wPmMZMzJnU2nf5BcthyKs1/yJJok7GN8d\n6hdG\r\n=+otd\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICgVPnIj6naNbkzN3yp4YjHJKuwaozJljN7cyGymaf8eAiAwfJxpYOe5gio1LOURwF+h8f+pBriZwyr6qecZEny+cA=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"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"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-formfield_0.23.0-canary.d595e030.0_1627073566779_0.6783134641510871"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.fe7cca31.0":{"name":"@material/mwc-formfield","version":"0.23.0-canary.fe7cca31.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=12.0.0-canary.3f36ac75c.0","@material/mwc-base":"0.23.0-canary.fe7cca31.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-checkbox":"0.23.0-canary.fe7cca31.0","@material/mwc-radio":"0.23.0-canary.fe7cca31.0","@material/mwc-switch":"0.23.0-canary.fe7cca31.0","@material/rtl":"=12.0.0-canary.3f36ac75c.0","@material/theme":"=12.0.0-canary.3f36ac75c.0","@material/typography":"=12.0.0-canary.3f36ac75c.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-formfield.scss"},"publishConfig":{"access":"public"},"gitHead":"45bb0797db4a64851859f8894864015974863643","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/45bb0797db4a64851859f8894864015974863643/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/45bb0797db4a64851859f8894864015974863643/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/45bb0797db4a64851859f8894864015974863643/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/45bb0797db4a64851859f8894864015974863643/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n|----  | -----------\n| `--mdc-typography-body2-<PROPERTY>` | Styles the typography of the formfield.\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.23.0-canary.fe7cca31.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-N8KybQvMKfSe42VakDgZsDPLNUSjLdLkDyvHWM9k6PvIt4Xkgzh3vZzE/OWslPq/e8aUvae9RQroX9k7vaLJZA==","shasum":"a42be336a5540cb399df52b1d32f656d9db54554","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.23.0-canary.fe7cca31.0.tgz","fileCount":13,"unpackedSize":36052,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg+zsGCRA9TVsSAnZWagAAInEP/22ZrC6iDkwPdWJQxLYc\n0efSfWwXxTBTb/hvX9CQooVdMxLAN9pTTm523iDQLQrL0z+/makG0pTfOYxK\n0eqS3v4IKavWUXzvFZFujBpGhwg+m7x2kzhs5NDi/9skIeup3y3MTMBpyAWQ\nJ6O0DBtcYXeCBF1BWelLmrO7vU+Mv3um1ZhxC8EZuiQ1LjdnZ6D8GZl5iXYf\ndcTu+GRDAWWW2cG0hRBop/qw/WZz6MXo8F6mzzuqV6z7U+8V8xid7xAYhdCH\nEV/uavGFwfqU2Nhbz+79K6lscSupltc8OgwnuNiC5c+/CnFKTKPoTSQ943wq\nde4FZI1EfTfpNq/UaUQjNBWxHlBRgy1tU8/gsmg+DPkgDqbH6KmWj50uOyDI\nVRZ3pXqyXAMzQDGtSM2AULFnmwzHdROkkzw09K4MlxVkSsVqMugzVdm1iXju\nY7076H4CgW7tyqr0BdKb9PEl54fcRSUb2zeDvhqJzjwVXjTe+EvwvxXTRbvg\n+I9T9tjzeEyrr2vie1Ipl2HBEJYQM6j7PIFxB9XPOrKmR5QnX3kdRKndHvqr\nsKN4OS48/wbaZGSlrq5u0gQkA4Tyij3EJRLCw5qW/vO/0R2HhCh7is2E/uNm\nrPew9dGAvdXAZ77pi4DOl+KCHjeIrR+TAST8kBCL2JEGF+3JAXswqEuJ+9MU\na2NY\r\n=pRhz\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDeexxcgpy0UB3VQ1kLTPsQK8S4QbgHlMHkBJ/l4pNI9gIhANDYhqatpB8Lsw6yT7SxDP+q0YOY79UsHEdHNac/8zvj"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"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"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-formfield_0.23.0-canary.fe7cca31.0_1627077382327_0.6489598672533881"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.fd9da483.0":{"name":"@material/mwc-formfield","version":"0.23.0-canary.fd9da483.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=12.0.0-canary.3f36ac75c.0","@material/mwc-base":"0.23.0-canary.fd9da483.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-checkbox":"0.23.0-canary.fd9da483.0","@material/mwc-radio":"0.23.0-canary.fd9da483.0","@material/mwc-switch":"0.23.0-canary.fd9da483.0","@material/rtl":"=12.0.0-canary.3f36ac75c.0","@material/theme":"=12.0.0-canary.3f36ac75c.0","@material/typography":"=12.0.0-canary.3f36ac75c.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-formfield.scss"},"publishConfig":{"access":"public"},"gitHead":"fbed5ae8e9a1f66ef1cd5e83dcb0db11c6ea3c01","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/fbed5ae8e9a1f66ef1cd5e83dcb0db11c6ea3c01/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/fbed5ae8e9a1f66ef1cd5e83dcb0db11c6ea3c01/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/fbed5ae8e9a1f66ef1cd5e83dcb0db11c6ea3c01/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/fbed5ae8e9a1f66ef1cd5e83dcb0db11c6ea3c01/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n|----  | -----------\n| `--mdc-typography-body2-<PROPERTY>` | Styles the typography of the formfield.\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.23.0-canary.fd9da483.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-qL5YNuw3HV3e4Pxu7m6rzOc0VUxrJ/GiimYu3LgSfAxTaPxkXHK9G1QtctsiV80HhlCQSC954k1asLSLNmjAug==","shasum":"868f7cbcdae34658f133703c104d0553a2105511","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.23.0-canary.fd9da483.0.tgz","fileCount":13,"unpackedSize":36052,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg/ygGCRA9TVsSAnZWagAAa0wQAJpfYY1AOi78b0M8bLTu\ny918i/Ws3FI8Sh5wCqYXIjDAPvfEQLx/zfxMa1xLRDsFTm6epZ1BiQte3yf7\nU2Hp8a+cIOcdEeDjXqU78wCQhoPG+ID9gMOm0LYv3pf9vot3QyL706IEOX4j\nW3B2nW53ADiZwDMi2TXkujDG4NkVDfvPoZhUAZqbIoYcqSNCDNPSfqe7nwN6\nbFVsEx+zkx49G4eID4B0OLFT0enlJXUYKwjCn6iuIq7ZneyKWi6oPdmfSIMn\nevnVtcgr4STPfkB+WDbvLTFn6qKJJT8lB1MEoCx4ZUyYtl/vj/4tJeefJUBs\nkp2s40qqfM98oEGFoHagerq/UZjZTeBIusBxaWl+7IaxI/T4eUBk0b0upr/H\nuhpOJ+3iahXHCftR73IB7qMhbe2tEX+ctwiEU7AM5cAv9sqfB/Za+5yrOfX/\ns4QaLNiN3zfgkeCk9yjzqyPgtY3hnhCmCEjEan06Vzjm4+QKlNEByr9gxBg6\nYF1e5Xk0zOmUYT8hwdRoaNOVQV2fJR5rAUjQhDD01GpFl56JTuuUErqXXf5n\nBqyvQWb2qKMOlrN5jjwAJPFCO6i7zIxLoguZnaaBftI7dF57uuFpymdz5v40\n5dQ7xj+kObZAFWzCVesCnv7oREs7aeJHr6rwim5OzncZY3dz2W+QUrpL/l1s\n/flx\r\n=7Ty7\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDx5pb6o7p4upP89cPxDnKWpAtkSSwuDBpA/lZWYQqHPAiBahYomzwqKt9jfHkIacXosMRy4VK7XK4yhyNap0HYr4w=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"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"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-formfield_0.23.0-canary.fd9da483.0_1627334662358_0.6382696289633771"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.8a4c7e06.0":{"name":"@material/mwc-formfield","version":"0.23.0-canary.8a4c7e06.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=12.0.0-canary.3f36ac75c.0","@material/mwc-base":"0.23.0-canary.8a4c7e06.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-checkbox":"0.23.0-canary.8a4c7e06.0","@material/mwc-radio":"0.23.0-canary.8a4c7e06.0","@material/mwc-switch":"0.23.0-canary.8a4c7e06.0","@material/rtl":"=12.0.0-canary.3f36ac75c.0","@material/theme":"=12.0.0-canary.3f36ac75c.0","@material/typography":"=12.0.0-canary.3f36ac75c.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-formfield.scss"},"publishConfig":{"access":"public"},"gitHead":"4c98d35e959f2149e2a4ca8c8a4c5a7ad3070670","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4c98d35e959f2149e2a4ca8c8a4c5a7ad3070670/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4c98d35e959f2149e2a4ca8c8a4c5a7ad3070670/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4c98d35e959f2149e2a4ca8c8a4c5a7ad3070670/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4c98d35e959f2149e2a4ca8c8a4c5a7ad3070670/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n|----  | -----------\n| `--mdc-typography-body2-<PROPERTY>` | Styles the typography of the formfield.\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.23.0-canary.8a4c7e06.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-VSfWWjPpKHSV+8pq0elqeXRORmLidEB90iNftfr8YNCktfmF0XP/CNvUCNsMoH7tDodY29U1nXsEZaWpu02iug==","shasum":"8156c8a499bf3499ced964230c8f4e3c9a56db67","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.23.0-canary.8a4c7e06.0.tgz","fileCount":13,"unpackedSize":36052,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg/zqcCRA9TVsSAnZWagAAfvkP/1EKZEAJpsO0YpqoYP4Q\nPqrAwkbAdZamSS8avkNxl/EbUvBVvlSacDvhPUq9d7mf0H0r+pZG/Puim5ty\nPBQT+R6MraV2nEumJu56t7y7k6aXzxgNGd/HXMaCHt0XuLj/zF0wqxxHY0Gd\nleSJLEn7tdpzZtYutwNwBqKmTA1ITTaB9wO27G2+kESDRvgP9TxTwTdxwgwG\n8+/eE3A7FllEyb0jYQVKh0k517rbiTgUkI0jOMDRZ73IWxZU6ZnibwXJ4rBq\nSTsYZDJuE3zWBfm2KK4YQGJDm7SX+7VU6g8i2YqNcE98NRHxva2SJuATDwEB\nKnWOIEySfAd0Gbk41h6TC5KcNJDM5mDgLnsBKQX15Yh/r2KOK+nwD+iEgIYt\nDtNF57Lh9GVyIXZ9qSG0fiCx6Ra3hNuPuXB+prKIrkwa5st4vKqGCWjtF2RW\nDnv3z9AP0Wb1OHCNiX+SHHAOIevdXjghbddBN/pyO/YXA8bGFQq1hGHuVQWs\n1rcslPPtQW4ZhfRNS3q1RtNTGCs1iYZPiE9F+z6GHFLmYKOwlzPQ+bp5vS6l\n2/FLjwPCUlKyhlJxkLAkv3/RDAJoxy6Ek1LIWheAjiC1Wv2o3iLw7dPaBY1c\n5lu+rK/fx8t1hMSHjomjR6nAkv+Rid+oseZRl3UnAwecpYVpbgpxV4tiqnXn\nCSdk\r\n=LFTr\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCbfYQzIYoS60F0t+XH3qd5YqYhXziGMLj3yDZhVT+tvgIgQejYOes5Jo9aOpT09wxITYKJjJT9zjcBeAuu0cfE6zE="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"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"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-formfield_0.23.0-canary.8a4c7e06.0_1627339420645_0.43466738647009895"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.5b395fd1.0":{"name":"@material/mwc-formfield","version":"0.23.0-canary.5b395fd1.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=12.0.0-canary.3f36ac75c.0","@material/mwc-base":"0.23.0-canary.5b395fd1.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-checkbox":"0.23.0-canary.5b395fd1.0","@material/mwc-radio":"0.23.0-canary.5b395fd1.0","@material/mwc-switch":"0.23.0-canary.5b395fd1.0","@material/rtl":"=12.0.0-canary.3f36ac75c.0","@material/theme":"=12.0.0-canary.3f36ac75c.0","@material/typography":"=12.0.0-canary.3f36ac75c.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-formfield.scss"},"publishConfig":{"access":"public"},"gitHead":"49947c20a93de615b923efcb7d30a23250ea6dbf","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/49947c20a93de615b923efcb7d30a23250ea6dbf/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/49947c20a93de615b923efcb7d30a23250ea6dbf/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/49947c20a93de615b923efcb7d30a23250ea6dbf/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/49947c20a93de615b923efcb7d30a23250ea6dbf/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n|----  | -----------\n| `--mdc-typography-body2-<PROPERTY>` | Styles the typography of the formfield.\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.23.0-canary.5b395fd1.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-rPeWNQOIyymkiSjLrgcRyFHTt7MmPNW1IvlhP3zbnNu95tdO4Y09yYAaFJXtcBTd8MTJ5CufX/W49LXLOymw1g==","shasum":"1f4a5d1f9dd5fd4f8c4e35e0c2b4e5492e458120","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.23.0-canary.5b395fd1.0.tgz","fileCount":13,"unpackedSize":36052,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhAI45CRA9TVsSAnZWagAAk1QP/1tA5/q+88kukpuBbCqU\nx1L1KZNZTxKXoli9sjxM4op2A/wFHaDAQqC06AsTgyr92xoIZ3g74HDJkq5E\nJCE7AWulQKOgLFAE9KzDDGwl0aSvQ1p9s5WFLk8Ek9YAMEMfaJCgrLn32ATw\nJPdTl/sGgWQvGUBRt1msN5OvCjncUHIwTp+Pn3BwA7lvHF22eNAIycH9hNgl\nNhVPGw8dpxbkUB65o6ZTLYhbWuIJIMISeYq0MHlFb5uUlCCY36wSumRLkEv+\nn0/K3Y1YR+eoN3ph4jcs2ZddxHF80/nD4jxOLzUSedOpZLFLvDQAkZ5K1kPB\njd21WRu7C35GHnjxL5wExqk/TjzzQqrbMR+TyfD4mP3tIUJYzEaEZC4UByp7\nVWRU3zc8ttuFzwV335Jlq90F0guqH3tRhnGL8kSId60W8R6/c1QQiMOmHN60\nYN7DIZ3b3TPvkubwTAPLtApdg/tt5Pju9uhBTqrBZH5gcmytih4A2NqYDaK0\ni/y+wp6U2axAgDRP++6gS6qkkezHZqsXQhWVWaSxA4RveL2MIwttu9nTkzhy\ncM8NfDBIPrXDrAUjAACR4L7GRZH3mvRzG6QA0sy9RPcmL/MWxyNX+2K/26FR\nkfAxpGJ4MRE0uApmeTv3yyLLGiDayMrQJUdCee9dBs4BO9soi7y+3/DpxoGW\nL7l3\r\n=8XLB\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCBEGtSlcmfi1LdGFBXcRWHY2JrsYcOfaWC/0YvE2wHugIgP1ne6sLDGolRWrrUaVnaWrg7d5DyDgW/xyDYwVWCA8g="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"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"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-formfield_0.23.0-canary.5b395fd1.0_1627426361443_0.5167891836411065"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.e5efdcc0.0":{"name":"@material/mwc-formfield","version":"0.23.0-canary.e5efdcc0.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=12.0.0-canary.3f36ac75c.0","@material/mwc-base":"0.23.0-canary.e5efdcc0.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-checkbox":"0.23.0-canary.e5efdcc0.0","@material/mwc-radio":"0.23.0-canary.e5efdcc0.0","@material/mwc-switch":"0.23.0-canary.e5efdcc0.0","@material/rtl":"=12.0.0-canary.3f36ac75c.0","@material/theme":"=12.0.0-canary.3f36ac75c.0","@material/typography":"=12.0.0-canary.3f36ac75c.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-formfield.scss"},"publishConfig":{"access":"public"},"gitHead":"6ce7c9ba42d6630a9af68bb580b94e6fec508bdf","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6ce7c9ba42d6630a9af68bb580b94e6fec508bdf/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6ce7c9ba42d6630a9af68bb580b94e6fec508bdf/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6ce7c9ba42d6630a9af68bb580b94e6fec508bdf/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6ce7c9ba42d6630a9af68bb580b94e6fec508bdf/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n|----  | -----------\n| `--mdc-typography-body2-<PROPERTY>` | Styles the typography of the formfield.\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.23.0-canary.e5efdcc0.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-TnfclrNOgRGXbN+PoD6By3h/H/XOnciMgC96m9FtNa80RvyNuAlqz8noiZYxYsNcofGA5Hmokary8bMt4ab4Dw==","shasum":"83a6cd057954691ba749374b334ccabb8d086462","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.23.0-canary.e5efdcc0.0.tgz","fileCount":13,"unpackedSize":36052,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhAZIxCRA9TVsSAnZWagAAqmkP/3Ri/plYdtjZNiv8kxVP\nxVO66lgRCVlAKurp7fzzdaQ63bzR2qxdzb6/n74JBOdMfoRPlDWiOlZPN7Gc\nHyVuLkzFTrjt4d+tFCZgSkWb8QDfKGWtHLl0apXMGQos5JSEWuxG2A4XpyTd\n0qsj8q4n1ftyhNaA6xFeyQL8Lpk6oT6lsgXJuliO9ZE8Yro+2p86nlsjpVkr\nP80WXdfpy45LuONpsFBrf4kru+yI2GrU/OC+XJJ6u7t+EZ3ACs9HmAPgfbK9\nEONpd4ikOW4fMkmK5+yCdcdLPkPhGWIYWDSRLt+679e1oqnMO4WV2bE/kfFJ\nHgithDWzme5rddwcPmrrYGik1HdoLifcWyyQsPQmcB21tDwonU0GWm7pFBQf\n6UFa4Ln6kQLGCUlw13XlCuRyr3eomDdQU0VXhJAo8E2YT20c90fRKtk3IUIM\nfEUDUb89IikbLbSVJ79pDxNL9MDnjnsHd3PWVnktTLX0hmepNg7C4L472l5O\njFpv+g3N3cAgscBRj9424kgB9L/ze+O6w6JFy5zSeIHFoPnxjyTt0gOsF3Dp\nacRW8+O8jXdSryknoBxnA8cm64tZUzySl3Tqn7QxfGdKjTZNnC9ifGYdVPIf\niuNXh/F2AEixtIUIPzpCxb/Q6E733Ghv946D0pbc5Cm0ahNaz7/YwEF/4LbD\n4bw5\r\n=Nup8\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFfIXbIyjRNE8Y+azFqVOjC46sgqz0ikzFDOpwEB6HLpAiEAk/J/ca0ZAzIAH+o9bdX8eJDeKbolU1siHcqAiN/SCcU="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"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"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-formfield_0.23.0-canary.e5efdcc0.0_1627492913083_0.18515434551473042"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.ab310900.0":{"name":"@material/mwc-formfield","version":"0.23.0-canary.ab310900.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=13.0.0-canary.ae85f7eba.0","@material/mwc-base":"0.23.0-canary.ab310900.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-checkbox":"0.23.0-canary.ab310900.0","@material/mwc-radio":"0.23.0-canary.ab310900.0","@material/mwc-switch":"0.23.0-canary.ab310900.0","@material/rtl":"=13.0.0-canary.ae85f7eba.0","@material/theme":"=13.0.0-canary.ae85f7eba.0","@material/typography":"=13.0.0-canary.ae85f7eba.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-formfield.scss"},"publishConfig":{"access":"public"},"gitHead":"e3a3d97dc865cef9b5eee17c8842c3ef9be90dca","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e3a3d97dc865cef9b5eee17c8842c3ef9be90dca/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e3a3d97dc865cef9b5eee17c8842c3ef9be90dca/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e3a3d97dc865cef9b5eee17c8842c3ef9be90dca/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e3a3d97dc865cef9b5eee17c8842c3ef9be90dca/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n|----  | -----------\n| `--mdc-typography-body2-<PROPERTY>` | Styles the typography of the formfield.\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.23.0-canary.ab310900.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-Gygcq5eBTW2pdzNPsXXtRz8NTz+c9MLJUCYyCzTbNsgWr8WobhE0Lzd6zCugVm5m2IGaAD6Dfl5CT1mjHK+ZiA==","shasum":"ee6a292f683a895722e1d9acd86daf0e76890ddb","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.23.0-canary.ab310900.0.tgz","fileCount":13,"unpackedSize":36052,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhAbwrCRA9TVsSAnZWagAA5n8P/1ZqVs0Y1uT/um1klX4z\n+JiCOuC0KaNsXms0ZOjuHJXis+nmoAizZTJpFofUmr/J7CNN5gcGhCOzmzPP\np1oV3ozaC7VJtfxfvB7M5+QPXUb532dFvWIkT18WL2aOuXK6GbiK/9R7+TKi\nA0QI6A3W6oGnxI0/sGK99L0Kg7IdNgl6qHyTr4/VII014r/Eg0dcNdBx780r\nDJL3MhshMd+S2jd1wteGYeTg+s1LxejyPqNWGDJA3jKlY5KeBBXmEdAV2A0L\nUtjjpuYnTfBknOa6OG39jC1TkEJEGwzfhYWHfgnNiWXJ+gOTK214OYNxxzu3\nOCWktH3T6deDwbJwSBqm3TTfWSf00X0GvOcHR6aoLYPsVlE2feMXcuab0h4C\nckkN1P04bYwdUW3Tfc7JVxoSYfuf8CggCPuP28PfB7c9ZQQmN5xHPHrDZWo8\nmmR2yGwtH1CkgdzZEtNUG+N/Tr8N1sO5AH9y6LC3Za0WZfZFWw3daUj5TyQa\nrlntAUgHY8ldp3Eq+iBkT/iKtM3jFlKT1GqUMbceDO+BSdDaCvOdZxNaW1nY\neDKOh5BqnsSo1hBPeAB40aZ7GuG9c4HuV/yb7Yb6v4wFRe9O4f7qIdmjP1DC\n4dRZr2FRAPDaQcPZYKHlVNStDRKLlPAxZ78ABMN962XgFJVQfhMD1wybFSAQ\n+O7d\r\n=TJgI\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDL0ly4K8SV87wqTGetYKBfZpz4tAjfJcWfwlGZjTT8LAiAC8fIyybUnEtSjhSveefv38ULKsrJ8QZXn+k+RMbQ41Q=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"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"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-formfield_0.23.0-canary.ab310900.0_1627503659563_0.24173688095649415"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.21dc9bc5.0":{"name":"@material/mwc-formfield","version":"0.23.0-canary.21dc9bc5.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=13.0.0-canary.ae85f7eba.0","@material/mwc-base":"0.23.0-canary.21dc9bc5.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-checkbox":"0.23.0-canary.21dc9bc5.0","@material/mwc-radio":"0.23.0-canary.21dc9bc5.0","@material/mwc-switch":"0.23.0-canary.21dc9bc5.0","@material/rtl":"=13.0.0-canary.ae85f7eba.0","@material/theme":"=13.0.0-canary.ae85f7eba.0","@material/typography":"=13.0.0-canary.ae85f7eba.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-formfield.scss"},"publishConfig":{"access":"public"},"gitHead":"cfae2d30a40b9717e93cc7842d29f51de61c497f","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/cfae2d30a40b9717e93cc7842d29f51de61c497f/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/cfae2d30a40b9717e93cc7842d29f51de61c497f/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/cfae2d30a40b9717e93cc7842d29f51de61c497f/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/cfae2d30a40b9717e93cc7842d29f51de61c497f/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n|----  | -----------\n| `--mdc-typography-body2-<PROPERTY>` | Styles the typography of the formfield.\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.23.0-canary.21dc9bc5.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-xs7SrebRH9YMDSQY0djRxoqkQWlIm7mI5yewMunQu3OCpmaX5O0JunRPbsMirWbtoV6GC5BGEyJdbjU2VBAUEg==","shasum":"2f97b6c56a820762c91730408cfc8d349dba39c2","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.23.0-canary.21dc9bc5.0.tgz","fileCount":13,"unpackedSize":36052,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhAb1FCRA9TVsSAnZWagAA+yMP/2Wyzx/2u53jBFdsNuF/\nvTQml9HVZKkRPdyDoPVsKGKbvKWjhgkCDrLaSOC8iUN1YWKZwCFqS3G6S5GS\nBn9a6ZAfOMXLPWko+j/wcbsukx3HSTdClVsU5qrcWU1elh0b7rMwCk2SqgKe\nxCaAEmUSdV3oZ2Xmses/uh1HgYd/XG0j/YQL33vHX0CsLNzU2xAexQWRZlyB\nMxOuIOnLULL0JBBOUFRBE42qOFSRNXY/UHc0zy+sbHN4VNVC1GaQsgYTiOxQ\nhuE1Fjqp/tSqSwl+/5KOKdE2tEhTmQsBp5VAMgZXkV2U1o3PNjmwINiHL1Rc\nb0b0Wf6w5pqen8jUzrUsnHVLpUUsXDpUl669AIZiUkT3+4YLd8bgPuDbczM3\nRamABUG7ibYLYp7/uA/mOJDbClUUq79VnCNAS3+2u/CKx01MCzha+L8y5lxA\n27wzaXlE1GCyqRFhy6VAI6JMAFglH8An2ULt1Sd3O7O2PbfkFyFmJPiBI+FX\n2kTVZJTgK2KtG3Gvc3x/c45cMmne2jv47kEXjUk1p4bFrWYjpvBDN250FlxB\niw5c7Pd45QBwLqN3Ncz+25/x6bRtQCtC0xCbRo9tKgEfJh9fjw24r1d6vu8t\nA26018tXL1WWxs0D8CtIkDcKXloqYEZsoES/rVhDs4J8wakETSuVyI+J/kaZ\nASff\r\n=ZJXv\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDVMEQtXNCKNn4dWCUVAJR0dh3t0wOg8kVXv9x4fCf3swIgFaIGA2NEHVrzWzLeoFIbL4MTj4p8wWxO0GOOCV/wAeA="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"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"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-formfield_0.23.0-canary.21dc9bc5.0_1627503941836_0.8606262653099213"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.68c7fe5c.0":{"name":"@material/mwc-formfield","version":"0.23.0-canary.68c7fe5c.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=13.0.0-canary.ae85f7eba.0","@material/mwc-base":"0.23.0-canary.68c7fe5c.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-checkbox":"0.23.0-canary.68c7fe5c.0","@material/mwc-radio":"0.23.0-canary.68c7fe5c.0","@material/mwc-switch":"0.23.0-canary.68c7fe5c.0","@material/rtl":"=13.0.0-canary.ae85f7eba.0","@material/theme":"=13.0.0-canary.ae85f7eba.0","@material/typography":"=13.0.0-canary.ae85f7eba.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-formfield.scss"},"publishConfig":{"access":"public"},"gitHead":"d14f788b501a8e9e77ec19d160f45c10e76e3a31","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d14f788b501a8e9e77ec19d160f45c10e76e3a31/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d14f788b501a8e9e77ec19d160f45c10e76e3a31/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d14f788b501a8e9e77ec19d160f45c10e76e3a31/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d14f788b501a8e9e77ec19d160f45c10e76e3a31/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n|----  | -----------\n| `--mdc-typography-body2-<PROPERTY>` | Styles the typography of the formfield.\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.23.0-canary.68c7fe5c.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-lsTQXeJXn/YoKN+Sf5NaVJx48oRQwwq2cZWrAkzdl/mdu6AMiwOGAUcE84V6M4ujZneB3opkPbZydTypRgUFbA==","shasum":"4b0e37c4b27d0256e384684e002fefafc4403667","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.23.0-canary.68c7fe5c.0.tgz","fileCount":13,"unpackedSize":36052,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhAvPxCRA9TVsSAnZWagAAvkEP/iJghQ2pDYTgBL3nsfDc\nOcwe+TBddAXMGMO/Zf1iEh5z8ge6WyTM5TwEzZC6Rf/ZaqFG2cGV+yQhpu+c\n37q0fy1GYMPQwXsV5sRzg7Q9fX/4ZMarRJS8JI5F5CeOIQah9cEBOe9t5Euf\nXsTdExDMLPdBM8DHjV+ZzyJKMNzkAn/wcJDeo5F30OTxRqhm0rMsPFjrWPGx\nkJCKbiNe5ixup/b2yCu15xO0ynNTsRBC75YXW7gmaXQXt33LqC9ix8VO4xmX\nPOW5/EDuldAYLc/vCuvbUIJbNJgWI7rNdlyzc5cQwATBbgI4zuufOM7A9LJZ\na2/YM9ljBxYaUN57rVsB08SEuFZgXb+MLFILdKdJt+UKQ/Ixr4gmaGfVoqc/\nJLqXCCg/CGpXh4zbxkOAuKbT5mDgQKxiWVA1OL2taBDtU15/kAJqM4Q4F0/h\nJ3WPFviBNv4CavBi83DkTaGilOi6tVSINXhpQce0JzsBftXlDq4dLosjzFVm\noeeU4JjojyrtDJ+08cqT9tA8O7qArPfW6qsfM1gOZZCLUZUMnPKjzMK/6m/0\nlrmztYrDlEBu+HxWvs1LShleG4PmexoUlApV/AMyVqItgcMTDt75ZRrEtITd\nLFgc8BEYHsN0bI9ulOhV6s8xkYY9HL3lsAdSJFBR4onqkqHd2EKKtOx+4j6e\numsn\r\n=93PD\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGjwVP1XmfqqlgE/pbnl9jj0h1qDZykfHlmwPXFQhuC3AiEAhh422f/6vvs5y6VABVLVUv5XXZAoUBhxBkDStY4hReQ="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"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"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-formfield_0.23.0-canary.68c7fe5c.0_1627583473345_0.27027975529229376"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.aebe39e8.0":{"name":"@material/mwc-formfield","version":"0.23.0-canary.aebe39e8.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=13.0.0-canary.ae85f7eba.0","@material/mwc-base":"0.23.0-canary.aebe39e8.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-checkbox":"0.23.0-canary.aebe39e8.0","@material/mwc-radio":"0.23.0-canary.aebe39e8.0","@material/mwc-switch":"0.23.0-canary.aebe39e8.0","@material/rtl":"=13.0.0-canary.ae85f7eba.0","@material/theme":"=13.0.0-canary.ae85f7eba.0","@material/typography":"=13.0.0-canary.ae85f7eba.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-formfield.scss"},"publishConfig":{"access":"public"},"gitHead":"d28ef9fbd1251f2664f6385efd6cd33d59bd5a19","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d28ef9fbd1251f2664f6385efd6cd33d59bd5a19/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d28ef9fbd1251f2664f6385efd6cd33d59bd5a19/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d28ef9fbd1251f2664f6385efd6cd33d59bd5a19/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d28ef9fbd1251f2664f6385efd6cd33d59bd5a19/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n|----  | -----------\n| `--mdc-typography-body2-<PROPERTY>` | Styles the typography of the formfield.\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.23.0-canary.aebe39e8.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-ill7zJRyBm1JMulUpG+ePpb/GNI3LilnVw/bJt8QLJVoUpjzdHqmrAkxVUH06LapdgRVJyVPtbfXXnu8Md5j+g==","shasum":"593986c093b6148638e137556eff28d6e4cad101","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.23.0-canary.aebe39e8.0.tgz","fileCount":13,"unpackedSize":36052,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhBE9OCRA9TVsSAnZWagAATNwQAJ3k4Mp3Mpb6Qj1+U0in\n7IubAHCto0Vty+JOBoQqXQLvc9KgtzHEJKoE5bZJ70s5AWGJNfr/Ed6xEMhM\n3nsQ8y2wRZUeCPpTSmfJ+TiqdpPFjpMz3Z/TR0qrSTqClSymytwgMPT2AN/+\nb9ahxnIODj5XllRceVQq3FPdZvTp8i776Zl4VQfzv6J5klS1QK20HcNb2eB7\nEApl34xz78tgkzxD4Tu0n9qVvjfPSgz/cnxXlNhvWljVxCXk6wJYcxRyIYKr\nVix4XO6m/kjxB28TUmnXtZya/imkWXdCZ0K5cboY+IobxVcX/NZfmI7c9ovU\nzTvEGNDi7qs9ig1Dhk5+4S7nOpo0CgVebU4NOQSx2wIgL/9XQ2VaFQP2zH8H\nVEDAoo2Fc2HCSre2KiHnW9FtAU/K1B9DhQ3VbYegvJrf8XiS2Bl21qifL8nb\n//XOZqUcqB3BKEwXZrwoZg9QPLija3VnCuY+WmWiEG3oyU5fTGjvhWAshEux\nMegPpe7sms1cw/ABn+WWg1UoiqoXwR/LDIJmhhjSQhgHZw1y2v8hfnFlnJz6\ncuI6fbu9BUWx00tfaPqYspINnjbmCCW/wDyMTekX6S151BKv7hhezJPIv409\nxGfj8a7qYD3vUetfI/cujCeZr5xM+3fgyL4UrDAHRXbARIauvcclBaloTXJY\nSguG\r\n=tDGQ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC7I6Jks74KxTGIATXZEuOjl+bhUwK0DSZfH06hoioRMQIgF8zxPVWhdrs6Mu/++9R7y/5o5gOJH8C7EQUcExCRUYY="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"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"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-formfield_0.23.0-canary.aebe39e8.0_1627672398232_0.9752251011946309"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.ea889c69.0":{"name":"@material/mwc-formfield","version":"0.23.0-canary.ea889c69.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=13.0.0-canary.cc5377458.0","@material/mwc-base":"0.23.0-canary.ea889c69.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-checkbox":"0.23.0-canary.ea889c69.0","@material/mwc-radio":"0.23.0-canary.ea889c69.0","@material/mwc-switch":"0.23.0-canary.ea889c69.0","@material/rtl":"=13.0.0-canary.cc5377458.0","@material/theme":"=13.0.0-canary.cc5377458.0","@material/typography":"=13.0.0-canary.cc5377458.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-formfield.scss"},"publishConfig":{"access":"public"},"gitHead":"29d32f8e88155014cd9963c5b4fa346d8e3d28d1","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/29d32f8e88155014cd9963c5b4fa346d8e3d28d1/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/29d32f8e88155014cd9963c5b4fa346d8e3d28d1/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/29d32f8e88155014cd9963c5b4fa346d8e3d28d1/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/29d32f8e88155014cd9963c5b4fa346d8e3d28d1/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n|----  | -----------\n| `--mdc-typography-body2-<PROPERTY>` | Styles the typography of the formfield.\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.23.0-canary.ea889c69.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-ZwSJmTxxx4I9eoIC2aRmoYclVZpWhQLQBtWeQacVZzy+z3jImtwkg4Y+9iGh32McWPVFR7BvBRbr7fYoqPcsTg==","shasum":"d93c1d9686fe71fdfea968670f9cdcb249234e2e","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.23.0-canary.ea889c69.0.tgz","fileCount":13,"unpackedSize":36052,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhCY86CRA9TVsSAnZWagAAPlQP/18zZGjK3ORtVIWEakDF\nayd5tZMLDHe0IMfW7+ebL+heoQ6udnM5CscoMWIhz7//JpWRnf4Vw88Pa127\ne+xT80tdTFdstRZigi5D3LmmdAnY3Aqs+IFnMPmnyLvovGJc/vQV1Ar708Mu\nZ+ypaD3q9xq4k67kBftN70GLHBn6M1eqDbQ8Udv3P0ArZpxq+pqJHanFho3z\nu1kks3eZuJfYK7xy55WleCqzakmA3X22c5ldNtMbLFVMnugjzVP8IUED13kW\nGGubE6+JZQNRHw1gcLJXHxemkBp2UPtREo3GEyRp1M4wWSFd07GgPuIDcuME\n3XHGbDf2rvvYmxLBG6KW2OUbcYjo97nuhQa2k2JqwpSf7Z1FQpAsIoWnj8B3\nIpPzwoubqzB1bHWr4pQ6QvKrx1/AwuUK4nkbN1RRqKe/+ScsvqjoA0lQCjYa\nlgj9pO/bwz3t3fd1KdmwSShOyCh8Hlo9APUBGuGRz6eFGIGChAM2arYCRp8E\nOJBCi1kLjszTg7WvT9nOOkOnGxpx1Ld7xxNYe+HO+lVKbGbxG4qudnbrYIGK\nhVhHZuakcBTI6GNGLaSHwc97av/mbioA9bbNJzn1agRrzoUHzaLTL1vjOTKz\nHiMLSiTFFBHTEPJymJW3aC27kh21ohSNk4cx/ZwWOelsMkXNMLOpBHblQMRe\nj+Pz\r\n=j604\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEd5BXohe3pOhaGPAAzc91Q1zbkis5GQV3GoVOw+mzIbAiARCqrv0+wcPUHZnFfoknB4X69j3KbJJC7N+b/mocSdKg=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"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"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-formfield_0.23.0-canary.ea889c69.0_1628016442334_0.4649674056647912"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.21918905.0":{"name":"@material/mwc-formfield","version":"0.23.0-canary.21918905.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=13.0.0-canary.cc5377458.0","@material/mwc-base":"0.23.0-canary.21918905.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-checkbox":"0.23.0-canary.21918905.0","@material/mwc-radio":"0.23.0-canary.21918905.0","@material/mwc-switch":"0.23.0-canary.21918905.0","@material/rtl":"=13.0.0-canary.cc5377458.0","@material/theme":"=13.0.0-canary.cc5377458.0","@material/typography":"=13.0.0-canary.cc5377458.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-formfield.scss"},"publishConfig":{"access":"public"},"gitHead":"b4df0dc9ece9df56af685bbc48963988f2cb45f8","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b4df0dc9ece9df56af685bbc48963988f2cb45f8/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b4df0dc9ece9df56af685bbc48963988f2cb45f8/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b4df0dc9ece9df56af685bbc48963988f2cb45f8/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b4df0dc9ece9df56af685bbc48963988f2cb45f8/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n|----  | -----------\n| `--mdc-typography-body2-<PROPERTY>` | Styles the typography of the formfield.\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.23.0-canary.21918905.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-b3L4M8gd9XETVne9Lloj4Gf0EHSFwkk0BH/PIVqDF2lU4KexARrJYt0SXCDwl2UqE8AtWwlMl6iY+LiQoANVCQ==","shasum":"67b9e55cc67d966d11acf0b58141d8bee147f2eb","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.23.0-canary.21918905.0.tgz","fileCount":13,"unpackedSize":36052,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhCbGZCRA9TVsSAnZWagAAbVUP/3tVE/Vr74PXlG7VSfE/\nzxEpan8o+14Ng3B2qg48ndzCb21PEl7jCT/ul6Jd6gAe8A2pYPYkf8gyGZZw\ntt1Zz6ldnbQrshI84HBCGM+l8mYOZ5ir4PdzOwqBQN+vZ0Tw7aeMEvHnih4z\nW3GyFfgGfMZcr0tjNGek+jN7CUx1giH/HygIOFbBVOWghbr5ZiziXI4AFYFI\n3BnyJpaDrLuElebAixV31E4RaYyONRJyPY+4Ico9kCR/i0CPIAAT7RD8QWlj\nB3MmCugG4DwBKJpV0RTACupfTFiLAfk7JW6d1Z3ndVqtB0BYqR8BynEiwg9z\nQKbIPXvqZ7sTWhNQWRtBbz/7O7xkpn5SZfrGJT0fpakXX9vUlNvJbOF55zyy\n2h/ACqOzKTyLI90jK2yFuVbOk4YW6X/nbxmdOeodL7M4C14VYLx8XhOIj+gV\nxgG+Nq5YyRdOml8dyknzLhdS3sYIhlz4XNEgalqAVP9SF9AG4/tCByBuiy/d\nPV1jmGnL7md87TQaUE+u35GK13lSrf/Pcq/Xp0m364Hr80ubCq7c66CScJgA\n4yXlb3jgV1LvHOAzTIMTyujc6enNBDQ2pmRH68j2Vx7HpL+TF97r9deMPREN\nSJkE89EU6dfylKHk3nYa9BYE1GGJ+6fFi12AciH7Zksl+GKxWgu8wbh4c1fA\nx4RF\r\n=RWyx\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBigs7ExYXdzpf7Vxlkd8gRrRrDO8Pm0gN3NsBi8XXudAiEA9vB+2i5tbC/SdtvPfN/hpvDsQfvfkSKE4Hv21zF/keg="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"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"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-formfield_0.23.0-canary.21918905.0_1628025241003_0.9210350218916035"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.193c87be.0":{"name":"@material/mwc-formfield","version":"0.23.0-canary.193c87be.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=13.0.0-canary.7c96e6b98.0","@material/mwc-base":"0.23.0-canary.193c87be.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-checkbox":"0.23.0-canary.193c87be.0","@material/mwc-radio":"0.23.0-canary.193c87be.0","@material/mwc-switch":"0.23.0-canary.193c87be.0","@material/rtl":"=13.0.0-canary.7c96e6b98.0","@material/theme":"=13.0.0-canary.7c96e6b98.0","@material/typography":"=13.0.0-canary.7c96e6b98.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-formfield.scss"},"publishConfig":{"access":"public"},"gitHead":"62c9e4344bd3aa4983c1eeddc83cc2dbe9ec6644","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/62c9e4344bd3aa4983c1eeddc83cc2dbe9ec6644/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/62c9e4344bd3aa4983c1eeddc83cc2dbe9ec6644/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/62c9e4344bd3aa4983c1eeddc83cc2dbe9ec6644/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/62c9e4344bd3aa4983c1eeddc83cc2dbe9ec6644/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n|----  | -----------\n| `--mdc-typography-body2-<PROPERTY>` | Styles the typography of the formfield.\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.23.0-canary.193c87be.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-UqbyuW42Fw+a+B/Ve5wsuT0/ggGa0Bd5K8R6h/2StkdJEO8kiABKjbQXGMvz1rJTowsySOcX5/ukpiImtmnPKw==","shasum":"8ed6092d01718840c03a084d8ea244412ba124d8","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.23.0-canary.193c87be.0.tgz","fileCount":13,"unpackedSize":36052,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhCtdPCRA9TVsSAnZWagAAVGwP/3F/SuODaTj1AIPV1zId\nLj6YtK2xgcKhTaqIaUVdlEKjzy0Az2orvC1ApP0tDroESr/+sfUYNdxt9z3/\nX8hAr95LmgpfvXeqSSuwU11nxPWhMGN3dk1lXpsJH9HJzt1+5MQGzNprsprl\nHJa+fpjJLknL0LoATfi7hB2jq/9GsomF6G2n4uLN2Y1h1l1wX4RR9A8YP2M1\nq/+wasqDR2EpdnlhqI/XeWdbKCQpXvwfMHd6uoFK/zt34RnAJIa28Bw8JYYl\nZcL7zGTxOBnQ5ebmUGjCFIIErvspVQ6wc7Y+otxOQDEYXxqTXs+YxwoKPZmA\nRvlrl9vr3zUJTfjh3Mmy72GWxcKerz25XqaL7BUvkDq4rIQ6spm48zK7fIiP\n9B2dTBQ3IQ/8oyxxZ/TPkZubAKNSzavXFHAPBaAkM+HjCOcHr7Y0ydfJf3A3\nENLfPrV9z5f4yqN/VT3b+QccVteUm7K4t5B9b/pfUeTYbDXTVP7Eto2kWfBj\nIuGPoC0CvQLdg+9rSIpAwmgqEAXjkvn2BEXZaYIr5lmY7Li+8VF1vN67le7/\n2LvT5cF+wDvD5TNTZmQDq9CyXuRPdxgtMCYJxX4w6Zcf5IWKxUJ6OAEoyeF1\nVpP20jz7iifTzWFYaJmfKsWCeiruYqW1qGFssN3VDyI0U3QodXLtjntWqk8Z\nGyCX\r\n=3R9e\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIH69Afy5aYn3P0UnoU/DaXObEJsZZDANTFWps7bfwnU6AiBPRptBFwLJ+2dOOOd0R9bLBxH4sPGFTrFZIWYvFqKu3A=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"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"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-formfield_0.23.0-canary.193c87be.0_1628100431234_0.34378606654173516"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.6fc52d8b.0":{"name":"@material/mwc-formfield","version":"0.23.0-canary.6fc52d8b.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=13.0.0-canary.3dd611091.0","@material/mwc-base":"0.23.0-canary.6fc52d8b.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-checkbox":"0.23.0-canary.6fc52d8b.0","@material/mwc-radio":"0.23.0-canary.6fc52d8b.0","@material/mwc-switch":"0.23.0-canary.6fc52d8b.0","@material/rtl":"=13.0.0-canary.3dd611091.0","@material/theme":"=13.0.0-canary.3dd611091.0","@material/typography":"=13.0.0-canary.3dd611091.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-formfield.scss"},"publishConfig":{"access":"public"},"gitHead":"d70f6897dfb89d87fb73b1e96c8b4164ca76734a","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d70f6897dfb89d87fb73b1e96c8b4164ca76734a/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d70f6897dfb89d87fb73b1e96c8b4164ca76734a/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d70f6897dfb89d87fb73b1e96c8b4164ca76734a/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d70f6897dfb89d87fb73b1e96c8b4164ca76734a/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n|----  | -----------\n| `--mdc-typography-body2-<PROPERTY>` | Styles the typography of the formfield.\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.23.0-canary.6fc52d8b.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-R2EFw3Jct1ubZjdTPYkXuO7QBR+Di1/3QQ22i4uQ+G/FZTXJayKcRS8U7bK4kLWN3+BbyikbZkciJ7rK8fwyYQ==","shasum":"6e5a611c8615b241d54d76b07bfb25dd3bea9e8f","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.23.0-canary.6fc52d8b.0.tgz","fileCount":13,"unpackedSize":36052,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhDCmUCRA9TVsSAnZWagAAENwP+QBWpTmvPIDyIuE7X+qW\n1ZEtpk3/dVZwUX6QuatfTK0nQdP/WcGVSjhCjGyqkli34Y12Xc9WqtO9ULrV\ndzQ2/9Sdaezc+kyvrt1IXAbxWpP18qeVRpG/HY7Dv4rKCTULkuhdpcAojL4X\nUAGUhxAuz2nDNQK87Ci0xHJ4OhJQfafj8Ewighu/MisDfEWLW7xttdZDO079\ne7tZ57XC7VqbM9a340ZktwuJCpzzDkVnPZIlYcK8srQprq7iEMMnhUj/X0jn\nA2irQurYbI/PRTFaRwu/MkLRuYueIt4154rW1zkzQ3IVXEi5dIYnDVVi9d08\nlQu2zxUSzNenhqn9s0YR9nV3EtU+8JTuPIleGdOMaEhZ/f45Wp215/xz3NAP\nkHXa9Md4kI7WQX/kq8bHSj1CZPtipIiuZREhrfKMY2XzqWh/gwVKxe+PSozO\nXiwKV/qZK/VD0/JJ7lE8myYsZJdWhyW4wgBlQkzRG3CrazElwxGprzbfzukI\nRx1hproRnjDGcJk1+JbIv1pa634RaE6PEOFvfEb4+tfDcI7ItT0dbsml9aBL\nWEI4KNCK2D9aAOp+KZwrbn+fh2aMwDgBxNvTnomNWMahWgI+KKEa94POo+zP\nvXrbe5rmgolpNotLrzVsxie/5AS/R0Sfn8UuClQkEdBoHxydkh10z1hefwUN\nODcA\r\n=ATNJ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDPTlBHKGQgIrcAGPy3yRrVrAs68EU1PMKNc6RsoXemEAiEAyYspkc/8Xw8j6Ff8dWHJX4enGLeNcZJGDt8C70/C+uQ="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"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"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-formfield_0.23.0-canary.6fc52d8b.0_1628187028119_0.3309897366346286"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.e2e9777d.0":{"name":"@material/mwc-formfield","version":"0.23.0-canary.e2e9777d.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=13.0.0-canary.b47dd37a6.0","@material/mwc-base":"0.23.0-canary.e2e9777d.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-checkbox":"0.23.0-canary.e2e9777d.0","@material/mwc-radio":"0.23.0-canary.e2e9777d.0","@material/mwc-switch":"0.23.0-canary.e2e9777d.0","@material/rtl":"=13.0.0-canary.b47dd37a6.0","@material/theme":"=13.0.0-canary.b47dd37a6.0","@material/typography":"=13.0.0-canary.b47dd37a6.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-formfield.scss"},"publishConfig":{"access":"public"},"gitHead":"cdfa31e7045c5004a0ebd645c1096ddc7724ba28","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/cdfa31e7045c5004a0ebd645c1096ddc7724ba28/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/cdfa31e7045c5004a0ebd645c1096ddc7724ba28/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/cdfa31e7045c5004a0ebd645c1096ddc7724ba28/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/cdfa31e7045c5004a0ebd645c1096ddc7724ba28/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n|----  | -----------\n| `--mdc-typography-body2-<PROPERTY>` | Styles the typography of the formfield.\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.23.0-canary.e2e9777d.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-2Omwp+6Oco1l6W5yR3wHgsV2oLxkhbxFOIJYqxrtUGN8YRr1ObcSoPGYXDx4JzUAz3DCZG6A34nCtzqlLAvQlQ==","shasum":"d3eff3dcd123198510d2a1b36f1a568e5915903a","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.23.0-canary.e2e9777d.0.tgz","fileCount":13,"unpackedSize":36052,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhDGpmCRA9TVsSAnZWagAAwOAP/2BdjlhmJ/+Pr5dxV2jG\nFefOI/ocU+HR0yK7+G4si+1BA4HmPJzVTGbNSb6RQeIyGzgjcEkP8RVWvdSJ\nDegAFhsXYqhkCao0nahUZNYb8rCGJOmXbXVPYrIl9W50ppLTN9PA22cmKFtm\nX61REFfoACJrMjVg3D/+k3jeNaxLDT8y8LoQpQbvNZctT/2JX+XQL07fz88k\nyQR/fy4QHzIg1gwte9d554NEKBXqSou8bFEkAu/rce/LLstKxXqd6HD8gJW2\nL1oPvbGalxqcNFnkgnqVE0J1bjAoB+iFLr6S5SMolW9Czm0QH7Cto4LT7jUb\neIl8ohh02t37kmVBytXsM/u5nmiTgPlrqH127mtJVeEk9rkXdqRec7Gqdf8A\nFnw/F78O/0ZGdhTyvAQjvVgxFmfPkPp8nY9XeD+EvrHhc94EzzzGsjA6j61n\nn7OHuOKZWMrIQtbBrBxh5LvVcN8eA2q9GG7se3EBDE68qylDVjeGEAt4lAUo\n513w7HDzeByar5RV7RDZSy6A9yHP9XSHkjRXvNAT9wJfKolwuQ9ozf/0jIQs\nYK/dByybm7YQ0Ku0F0wtWpK3Je5cR4r0pHFBH6wRKbU8DYQehGmRRg7nTofO\nzF0fw27koggzQdFw2s/2BwTaKqTreytWYY7Z5MyZUzyzHT5lo2Vg/KhNIbek\nd4G2\r\n=suGy\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDELQCfr787nK9LwNbidyTvmxDaGdgUpcNEI7Ug1Cwz/AiEA6CQfz0td1KplMj02meox7K6zb2s0e64WHCITM4lDA1k="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"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"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-formfield_0.23.0-canary.e2e9777d.0_1628203622018_0.9354610023741947"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.72ff1e68.0":{"name":"@material/mwc-formfield","version":"0.23.0-canary.72ff1e68.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=13.0.0-canary.b47dd37a6.0","@material/mwc-base":"0.23.0-canary.72ff1e68.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-checkbox":"0.23.0-canary.72ff1e68.0","@material/mwc-radio":"0.23.0-canary.72ff1e68.0","@material/mwc-switch":"0.23.0-canary.72ff1e68.0","@material/rtl":"=13.0.0-canary.b47dd37a6.0","@material/theme":"=13.0.0-canary.b47dd37a6.0","@material/typography":"=13.0.0-canary.b47dd37a6.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-formfield.scss"},"publishConfig":{"access":"public"},"gitHead":"efaa4c0f4dc1cfea004a7f4dca613ec666b1106a","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/efaa4c0f4dc1cfea004a7f4dca613ec666b1106a/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/efaa4c0f4dc1cfea004a7f4dca613ec666b1106a/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/efaa4c0f4dc1cfea004a7f4dca613ec666b1106a/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/efaa4c0f4dc1cfea004a7f4dca613ec666b1106a/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n|----  | -----------\n| `--mdc-typography-body2-<PROPERTY>` | Styles the typography of the formfield.\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.23.0-canary.72ff1e68.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-1gfInp7G+OVtOpncjv5WtbhYhf7u8Pku/M6l/SHlBDrW/uzKGRIITFpK1cSCH6jVVXeeGYLruzfVGEDY5bg12w==","shasum":"4ccec16dac3864aac8335a95def7bc8ebda5f46b","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.23.0-canary.72ff1e68.0.tgz","fileCount":13,"unpackedSize":36052,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhDaAZCRA9TVsSAnZWagAAGYwP/jMHHLd848m2Jqy5d2Xv\n47n4ycSa6VGAkGnlAh96DrYPREonOqOcAOxL+i5NpEhUQ8gPtVTy/4Vybz6A\n2JbMnolhnZvYUsnmFB6PwrBRWvSA462vVJCZsbjvMcV0ANOULBBc1vZUoaBM\nrRqL69gNegEpopKlmlm7F3rCMO1qA0Ny04lSvc130rkuuM7dCM7PL1C4L178\nEJi/LH1mNzHBVOGzgTrC/sg87M02Xg0Eo7RLLaXNO4hO77vvFgFQPAIl/I7Q\nNE4AcxqTx1ONu4yAjMtjXSa4uGMI8oABxPENa4M56AFRJp404xsTBs07pY0T\nWZo6rNItXBGXnqtTOu/Sgv6F0IKH19/QULcbLDjP4EKuFG9ttgEAa0kJI1Ne\n8Dixt4nvIarQne5FB7L68cK9GYYeIfsWPQez9E03d8I3LYaCM898DmsXTGQj\nGZsXwE8CTsEbRTcDQMit5ex5erQR8qWRTBEBdJuhoVZo0QlPo7Q3LYB61p76\nf/HV3omTwj4rR2PPnQ8AyzYlSnMhx3/MLDDjx8qlU7XFp526J+xi8mas8jNv\nIE9LFAG23neMa0MmCcJUfP0iBX0E/5aH7exdYG5b1fkeDLfDdbRxgxi8L0/m\n4eEWNIxkpy+r7/jdh6bdSdext/rniUuDM0GeyCzkmFZK0ud0n2Iu+dl5k+vA\n/iMS\r\n=LL/r\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDKKpwsD2c/ozmZ818NPsmMBNiOFHUKX3bTQIyUhp4FwwIhAKnNfkSfMpiTDLYXzYjqr/auy27FjGIROCiHbcw/0x59"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"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"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-formfield_0.23.0-canary.72ff1e68.0_1628282905749_0.19939533100564266"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.c527e93b.0":{"name":"@material/mwc-formfield","version":"0.23.0-canary.c527e93b.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=13.0.0-canary.b47dd37a6.0","@material/mwc-base":"0.23.0-canary.c527e93b.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-checkbox":"0.23.0-canary.c527e93b.0","@material/mwc-radio":"0.23.0-canary.c527e93b.0","@material/mwc-switch":"0.23.0-canary.c527e93b.0","@material/rtl":"=13.0.0-canary.b47dd37a6.0","@material/theme":"=13.0.0-canary.b47dd37a6.0","@material/typography":"=13.0.0-canary.b47dd37a6.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-formfield.scss"},"publishConfig":{"access":"public"},"gitHead":"5f7d2f863731a86414f3b6d188833c46053b72c5","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5f7d2f863731a86414f3b6d188833c46053b72c5/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5f7d2f863731a86414f3b6d188833c46053b72c5/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5f7d2f863731a86414f3b6d188833c46053b72c5/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5f7d2f863731a86414f3b6d188833c46053b72c5/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n|----  | -----------\n| `--mdc-typography-body2-<PROPERTY>` | Styles the typography of the formfield.\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.23.0-canary.c527e93b.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-4DMx6fY94vMAvNksSGbRtWIejK6kEtLDSM60VJiH/GDtWF3lrKxABNc2AoKKh7t3LHIglTNr0HaJb7mJLAEpIQ==","shasum":"ef67c5720e221603f60dd709eaae5e32edbb113d","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.23.0-canary.c527e93b.0.tgz","fileCount":13,"unpackedSize":36052,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhDaUpCRA9TVsSAnZWagAAdfAQAJbp4KkGDq0gPWo+eYZh\nTXFBcmyyH2o+cJI2kqqksnSiX1VEUB2Swz2jpTF4hBYxiyY8pZd2foROz1nv\nWoWFSZHMO/AryAFHlvufHZ9yd2o/Qyp4uTAb+qYJ5kjwxG3mpncPwX3Ysqhc\nMWrBf3W1qRBBlXsQg/9yO7lySIl23iJKUln9ODeA6IhhqHa9P7r5mMYhCqJI\npTeU4LuC3Zi2PhYVkzdyC0mRHVfefWl/NK97hUgNV0wrsu+gslOrAIAQ3Ptn\n8rqpC/xzGXTRsLDNCzu4csetQ+MAidsSZcDTLEhurS8Necvn/1n09suY2He1\nTO3CDolkqiQ2gHCEgib3qpoiMSU6Q6MdnQqu/aMrKWKjSZE7PGh+R36lYqWq\nKyY4HWntHFEzw/O3/Ixb6ZBmp5Bgp95EFhoN5QedbLOcNRfDgum69p3FlMq6\noq/AG6HPRu4XlwdXhimGOnjuOTb4+KOcVjdYzgH3AvNi0OLjexby5l5wla9q\n6ZTxHZbbfO+FhgIqqx8qhl0t7+XNUdVd7ALGwDWs5cWna7sV4dnAULfddS/8\njE3u9n7/q7vL7ZmxqzYRHj2zfvCtpntGsra4xe+2oR8PyIOBMn55C+LOTc+n\nbHt6AY9GLmGCVOBIZ/UQX5eP/f5nqsE2VXqaJuN9Hu0RFnfuDjWBhojc4t3a\nF2Bl\r\n=O7ee\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDYcZJ8WzK2cJU+wur5dvjKqt4uZwfBzwl1JEDEXUnKJwIgE0enG5+imk354PEO/I8ccztRwaSQQaVHCZLauXczS48="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"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"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-formfield_0.23.0-canary.c527e93b.0_1628284201292_0.5165847391215437"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.78b1eaac.0":{"name":"@material/mwc-formfield","version":"0.23.0-canary.78b1eaac.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=13.0.0-canary.b47dd37a6.0","@material/mwc-base":"0.23.0-canary.78b1eaac.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-checkbox":"0.23.0-canary.78b1eaac.0","@material/mwc-radio":"0.23.0-canary.78b1eaac.0","@material/mwc-switch":"0.23.0-canary.78b1eaac.0","@material/rtl":"=13.0.0-canary.b47dd37a6.0","@material/theme":"=13.0.0-canary.b47dd37a6.0","@material/typography":"=13.0.0-canary.b47dd37a6.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-formfield.scss"},"publishConfig":{"access":"public"},"gitHead":"6052db26d383ccd469e4c4f6cca3c1d2e4533696","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6052db26d383ccd469e4c4f6cca3c1d2e4533696/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6052db26d383ccd469e4c4f6cca3c1d2e4533696/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6052db26d383ccd469e4c4f6cca3c1d2e4533696/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6052db26d383ccd469e4c4f6cca3c1d2e4533696/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n|----  | -----------\n| `--mdc-typography-body2-<PROPERTY>` | Styles the typography of the formfield.\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.23.0-canary.78b1eaac.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-PYcxFgxCu9yCMeXAEjlo30fHOqcDO+DZS1YhSiCmKtAPu2uEV4LguT3r2Zmf+kFo+ksozsESl83ciAB/TAd5Ww==","shasum":"063f2cba6cf3e78c6d02839c7ee754b9754bda72","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.23.0-canary.78b1eaac.0.tgz","fileCount":13,"unpackedSize":36052,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhEW3tCRA9TVsSAnZWagAAkUUP/iUdApjl+v6JJZCUrmrM\nK+8BMh4Yj4/F0wGR68ZI7aQE0ySF5/hnNM9mEh8V/AVTnRSeYBv0d9T6Oq0/\nd3XN3U96Jli5B5oIkW4ClMCdppGLQFy/VKZy5P/Us0/F42go96QjEKHE9oTd\nWUkzsa2F5+YQdqyZxLg8BTeBD56UrhMT8mMyjMzyv/llCVX/3rSkq9v3NwYR\nfpCJetSiXsGs3e/pFCm8ahk39/tLcp+wb9M0hknGR8nVkQOouqJPx7QB51t2\nLFk/Y51se0jdfp6aWSCSZPgs8kuHB1FUZNCKmxKW9D+wFdK+/ymsCgVM1TVA\nyqURk8spIG7GzjGKBSwxh3ZuRbdGQmIxyNj1B3NirI3vmpYS0+T6IIsCGhNB\nLvWc3lNJvjSlfvHqNrRXxt3ZEnRK0sl+hCS7KkznvxR6enSP/IpTU1STdd3C\ntJIGwC03BdoX2Cfatsj1hdd5SUc9riLDNAatlkvk3gl38cx2YVlrqrCgl8w9\nyrxyXp1Qo0LS4n+hSyk/Fxn2vKEVUMbw1Bu7/3TE08k53KK3e8VMptk5af6d\n1bHbC9/i5DbNn894K4bzzZtufyvF0GVAux2dPf1h+iZbTKHDY06cdhBW9rMs\nwPgRmssOX2HigPsbePo6/g8osbdglrDtMP1WebCBUeDDYjX62mGS2Vo5rxio\n0EBB\r\n=fO3i\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCWnTzAzg6YyUvTpygySzrc+yfwJJcTI1ilE4m4C15dBAIhAIrPaR80/Z+Emo/S9xnwatVMxif+QDX8IbNpN+CmiFqe"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"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"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-formfield_0.23.0-canary.78b1eaac.0_1628532205577_0.6752529793032422"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.a8a4ddc9.0":{"name":"@material/mwc-formfield","version":"0.23.0-canary.a8a4ddc9.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=13.0.0-canary.7249a3060.0","@material/mwc-base":"0.23.0-canary.a8a4ddc9.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-checkbox":"0.23.0-canary.a8a4ddc9.0","@material/mwc-radio":"0.23.0-canary.a8a4ddc9.0","@material/mwc-switch":"0.23.0-canary.a8a4ddc9.0","@material/rtl":"=13.0.0-canary.7249a3060.0","@material/theme":"=13.0.0-canary.7249a3060.0","@material/typography":"=13.0.0-canary.7249a3060.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-formfield.scss"},"publishConfig":{"access":"public"},"gitHead":"d9658c00d9d10361ed16fd976b03d6652cda9ef6","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d9658c00d9d10361ed16fd976b03d6652cda9ef6/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d9658c00d9d10361ed16fd976b03d6652cda9ef6/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d9658c00d9d10361ed16fd976b03d6652cda9ef6/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d9658c00d9d10361ed16fd976b03d6652cda9ef6/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n|----  | -----------\n| `--mdc-typography-body2-<PROPERTY>` | Styles the typography of the formfield.\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.23.0-canary.a8a4ddc9.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-DhbcsUdvjqqMwugE7w5NJs9B0YXE8/lS+PXzUufYjglxR/rHwFPIchHjHNrqNbaZeYkNS4AMBkJudBM4098PKg==","shasum":"ab864796f98939ceb9f4a75631fb8b9d6e226d8c","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.23.0-canary.a8a4ddc9.0.tgz","fileCount":13,"unpackedSize":36052,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhEsmLCRA9TVsSAnZWagAAqbUP/jSiOEVuCJYllWhaFlik\nSOWthUiKnoYkusk6ew4xuAx/wRkcui7SlO38rhAc6li/LjfdFec/RIOfOGVO\nJc+WD0VzZ/jdQaDFyj8fDcl2p4lpoadUgTvd2L9Rf/ENO5SPUrcA/9SOxctg\n3iWG3LdJSsgd/u8CzDz8+7Hro3UXpJXDO5cQWnAje1Rt+NSy4L3OpqBl/OIJ\nJfYCKksSN99ynCV9ALMhQ1tW+JO7J8xz8MFR37bFc9nZVdeL1vvH69lJQrlg\ncBv6S+G7Sa95dzarSe6GGl4+fhCfpNBFN5BMVcU+UACrkPO1ZnNmeIexy6yQ\n7tcdkObZ+SRcM9VWyJiXnY12hysF81QtuvNHvpnckbQWgdCUkfz6sjWAUqlX\nEnK0R0tdg/VPNGYrmzloN7iYFX0f/wh/ZUg95V+ZYiH5zI8RXdTXW4eCUo/J\nnIFINxX1pqD6XaCRq27X7UicCgWl1HtmVXQTAMtg+/GdHDvKWOPd/6TEfD+N\n/hChg+uBZuZJHtpXFG7VqIgk3ezQsNDJNRk/X+rRyLivcMpctCdFXRB5yI2m\n0WgILx4/sxjwzaFIqxNDlJtQyMyZlQfMDmchMM8KHbWIRCQeACpU6bTE67ce\nmRN4c3VvIsxLlyeY8a8eVtcNy9T5ie7DEQWaFD7oDXEJD8a04O0QrY0JYNxp\npqbQ\r\n=MkDQ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIG9YZUCLi1Rh9ybKjpUij8PNMxXR6I6A1AB4AIzS493aAiEAr9m9fWNab3gFlJIMss/Bo70YgNwuBwOoG4NACfX1mIM="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"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"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-formfield_0.23.0-canary.a8a4ddc9.0_1628621195214_0.4898431628736002"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.99fc0632.0":{"name":"@material/mwc-formfield","version":"0.23.0-canary.99fc0632.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=13.0.0-canary.f4241a42a.0","@material/mwc-base":"0.23.0-canary.99fc0632.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-checkbox":"0.23.0-canary.99fc0632.0","@material/mwc-radio":"0.23.0-canary.99fc0632.0","@material/mwc-switch":"0.23.0-canary.99fc0632.0","@material/rtl":"=13.0.0-canary.f4241a42a.0","@material/theme":"=13.0.0-canary.f4241a42a.0","@material/typography":"=13.0.0-canary.f4241a42a.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-formfield.scss"},"publishConfig":{"access":"public"},"gitHead":"1182c7b11008cbaa2e6a052092cde8c856306942","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1182c7b11008cbaa2e6a052092cde8c856306942/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1182c7b11008cbaa2e6a052092cde8c856306942/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1182c7b11008cbaa2e6a052092cde8c856306942/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1182c7b11008cbaa2e6a052092cde8c856306942/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n|----  | -----------\n| `--mdc-typography-body2-<PROPERTY>` | Styles the typography of the formfield.\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.23.0-canary.99fc0632.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-sn2Y/G3VdyuywjHMgpckc9YjWJsWD+ta198hRbefMcN2XKzgCEAHfoTFcl9ToEN5PcVbJC1LOt6dOiwXiUs0Lw==","shasum":"7a30c6da7da4dd3414530a40eaf658d9c9da492b","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.23.0-canary.99fc0632.0.tgz","fileCount":13,"unpackedSize":36052,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhFE1cCRA9TVsSAnZWagAAyy4QAJYUjTgRaRQmKPTguuVr\ntcU1LhT21hintxswDLAKN4CFBK/UZUz5v+6jjDo2Hd4X6Uwp4wLQMUBylQDd\n/UuiCzAMABUd+FbgeCfuaYpMULmg7QTF2JZ5EqllTLaueyI/l0TB9cvk6ENI\nb4qitSaHz1lMwCEGMt/EXTgDNSHLhZ0xgB55CORe0avo4YyUF8IlJaQfXDBz\nVtEVmHTZOAi3mxmdrY4MK//ytfKrLN6TUqkpQGryoRf33k4LwptjQCB08C5a\noCIhrL1qNXqaqcslJYmU+iXCxiEjLQSj/HFoHflcY6lYlQnhNkBMRWiBXmIA\nIV7aa1lztgSJfFZduEH54NjITqiKcMs0jGI4MD2Zp/9isjcjwGGzfKT3xpeC\nv2Dwt3KczfzHItOmZYgswdfc2WbXYxRCdWU5GdMhObg6v5YiHJePVy5cauGv\nlg2gDiAiUz04oFuqB6U0zXlnX+sAgKSw8y146va9Q40Er7ujTghvJ3017Vcz\nWJoQI11mAJ8HwffZuSScgtkyyLnPJbk+OtuKcJDQarSl5e/7wlwEV09VTtBY\nHsKGZz0zXPB1wHgnPMTIFT3fkTd6dyn6jMtnEadepoBKQFGl+jIzESrqCAVc\nEWKn0lY5y8VK/z2RGEc31O5oe7HlRvygSSFUMonClLrPjvxnp+pXVB0EseML\n1NvD\r\n=QUU/\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHuGXNigk4vHPX4uX7g874oeDNjLY3l5E6p0RDF/aROcAiBe5RL3fUEKjNJl8+EYiUZ1TIM2qLtdBRao8cyanY+7cA=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"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"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-formfield_0.23.0-canary.99fc0632.0_1628720476144_0.3896092093329113"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.3f47ae57.0":{"name":"@material/mwc-formfield","version":"0.23.0-canary.3f47ae57.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=13.0.0-canary.0ad12ed3c.0","@material/mwc-base":"0.23.0-canary.3f47ae57.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-checkbox":"0.23.0-canary.3f47ae57.0","@material/mwc-radio":"0.23.0-canary.3f47ae57.0","@material/mwc-switch":"0.23.0-canary.3f47ae57.0","@material/rtl":"=13.0.0-canary.0ad12ed3c.0","@material/theme":"=13.0.0-canary.0ad12ed3c.0","@material/typography":"=13.0.0-canary.0ad12ed3c.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-formfield.scss"},"publishConfig":{"access":"public"},"gitHead":"edf4f3bc9066a2b36444c8a434994a5482e8b500","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/edf4f3bc9066a2b36444c8a434994a5482e8b500/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/edf4f3bc9066a2b36444c8a434994a5482e8b500/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/edf4f3bc9066a2b36444c8a434994a5482e8b500/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/edf4f3bc9066a2b36444c8a434994a5482e8b500/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n|----  | -----------\n| `--mdc-typography-body2-<PROPERTY>` | Styles the typography of the formfield.\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.23.0-canary.3f47ae57.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-QSnkDooY4cEaNdW0rQQrBtm+qkid9+SDEjWTKOKUZ0AWC4jn78TqYxr2H+fb0zjFwEhCL0qYw8qo8XAk6QT5Ow==","shasum":"9a454066c68deefb194f8074e0849b06472fb07e","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.23.0-canary.3f47ae57.0.tgz","fileCount":13,"unpackedSize":36052,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhFWGKCRA9TVsSAnZWagAAXu4P/0NzALNfOVmRtNJ7SfPk\nkCV9SBCXdneWtMCLNt1zVYjXdCAggwlV3nue3ZeG3r0sTAE4juKWKwU06Prx\nURkaxq7BUX62nSBF6YSaa8KnLyM3c9CJhQpzAOy/dqVujBPLodJMY6cYwk+3\nuv98sYktIs1S+ISAVP0IrxobGKqH9dzYOnpHgaqhcy8R6tlpx4FfWFowoV3Z\nT4BKe1gYnOBU2SNFcRWinAP38AS1MefnauS19FgWPoCwUsstqROV0IAD2h/q\neOIHtSkR8yFifb7L9rTjaOIaSa+5Hz6EsfHA4iDTblji4I7w48tqWux7kltc\nKT4ZWMEwyELut+MQ73sxAqIFWhXiTWMfvnDUMY0m+obKOpBvtZWt/kZo2S14\nbC+EGM81hoi2SXOOZFoYfRvZFXg1CHrZUGWvW6M3hBtiYePyC3MYgk6A2k6l\nydF6+LnH/tXIf48Nijmy4OD43D++jZ845VKQNviIQvNzmUQl2KHd+89Mkigh\n7B5BWq3dH4qCosKf1eRp04F1PAb2rjkOByEBB/2rajQN1z2aQxQHEN2HoS74\nZv0xwzR21WuEI5njjEyRtl44fnBVoWhFe6po6NmpyHnwCAkh9L2BdpJx6gMZ\nnYdXo4Eai6+ddAsoS+bMgDWRaug9FPQvji/TXr7z9AmMzysqnh4hTVTUFtvi\ni8PQ\r\n=0QjJ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDNqB90pbdU4FWJUzZU9GL0J+cqSYIkWZW70B29/PDh9AiEAokUVizoVAzdRQVzeK+JbDFdleB+ryAmgbc7fza3DIm8="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"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"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-formfield_0.23.0-canary.3f47ae57.0_1628791178093_0.8911351350179608"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.6b9bfc32.0":{"name":"@material/mwc-formfield","version":"0.23.0-canary.6b9bfc32.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=13.0.0-canary.077dcfcfe.0","@material/mwc-base":"0.23.0-canary.6b9bfc32.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-checkbox":"0.23.0-canary.6b9bfc32.0","@material/mwc-radio":"0.23.0-canary.6b9bfc32.0","@material/mwc-switch":"0.23.0-canary.6b9bfc32.0","@material/rtl":"=13.0.0-canary.077dcfcfe.0","@material/theme":"=13.0.0-canary.077dcfcfe.0","@material/typography":"=13.0.0-canary.077dcfcfe.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-formfield.scss"},"publishConfig":{"access":"public"},"gitHead":"2479bbd88c9e53b974ec7671345a52cd8ac0e907","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2479bbd88c9e53b974ec7671345a52cd8ac0e907/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2479bbd88c9e53b974ec7671345a52cd8ac0e907/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2479bbd88c9e53b974ec7671345a52cd8ac0e907/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2479bbd88c9e53b974ec7671345a52cd8ac0e907/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n|----  | -----------\n| `--mdc-typography-body2-<PROPERTY>` | Styles the typography of the formfield.\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.23.0-canary.6b9bfc32.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-sUr93ZV0hRU52Qe+GZa58sY8C2PiXWfYLeN0Rgh5JrrFm8CJGoSV0Yz4XvXr42ELwc3ymhc3R8ITq/7zF+8F6g==","shasum":"30362230ef18b47599cde5d9d9d57264c1872175","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.23.0-canary.6b9bfc32.0.tgz","fileCount":13,"unpackedSize":36052,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhFWc1CRA9TVsSAnZWagAAHz8P/1n79GM/M5Yj0N57i4bg\nXI/eV99vtCWTA1/A8e15DvsouD+OF8vGDidBrahJxuyUjy+8nTRqoWJOsMgz\n0WEUbdWg+b+rN9VHdX2fRD3qBFKYMmvqr5fdDeWrfdell7RsylOcQOhIqmnI\ngRD7UIRJ6ri7HF+vGgpB1YKMvLidPz5vr0P4cGPzzL8stZm/hxkDv04h/I+/\njzjl+CIc2FLW+mbm4oSVLBxdkvtfiqwOsRWin7hZZF1xoNLO0sYKbFkgdGsE\nix54zuNqVWaFBtrfHvnYnnnnTuJ1M5mkf0+KBWLivLc9dNucOAhOryoO3mjb\n/7QlnuYuCQP/SV/lpXnE4JStDKRD/iU9Hd4RA7Zr6LUOhSu/865bga7fraJW\nLK/ZMuF5/Gf/7ZCFJydlq4luJ23+UsMoipBq6u/lNcY2FwjRNwIG3hJ+PMLJ\n8DL7DFMvSr7x91gkcxJtZW7AaPA7OG5luMjZWCry6tHmu4YdlJtiqh07tAJV\nDQys5g10TDMdgqN4ssgDOnZLxIK6ZnkxFhJFWM7web2JeDTaGfyW2/NGfedP\nUo+ugjqq7SbyvgwD2RPfSI7rfXGs1XdiwQS9ltWKGno3UttbbTQXX4+m1+rq\ntf6lVq8/gXg3XY9h9TQBngaYxJYOR5Oy2De7LUwytUebEjCBLb0xSEiGHpji\ng7qx\r\n=mvgg\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDZmSLG6/yK0AjSvHiXwUub8xu1Plvb27hsC1LVxrSDZgIgQZ/pKp6wIG2fd4V+AxNds7y6hH+s/fIwjBOPbGgv+SA="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"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"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-formfield_0.23.0-canary.6b9bfc32.0_1628792629685_0.5823091553446096"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.c89ecc63.0":{"name":"@material/mwc-formfield","version":"0.23.0-canary.c89ecc63.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=13.0.0-canary.2fb068fb0.0","@material/mwc-base":"0.23.0-canary.c89ecc63.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-checkbox":"0.23.0-canary.c89ecc63.0","@material/mwc-radio":"0.23.0-canary.c89ecc63.0","@material/mwc-switch":"0.23.0-canary.c89ecc63.0","@material/rtl":"=13.0.0-canary.2fb068fb0.0","@material/theme":"=13.0.0-canary.2fb068fb0.0","@material/typography":"=13.0.0-canary.2fb068fb0.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-formfield.scss"},"publishConfig":{"access":"public"},"gitHead":"aaa5bd89f698007e7af19bbeeea7c1212b851c35","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-web/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/aaa5bd89f698007e7af19bbeeea7c1212b851c35/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/aaa5bd89f698007e7af19bbeeea7c1212b851c35/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/aaa5bd89f698007e7af19bbeeea7c1212b851c35/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/aaa5bd89f698007e7af19bbeeea7c1212b851c35/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n|----  | -----------\n| `--mdc-typography-body2-<PROPERTY>` | Styles the typography of the formfield.\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.23.0-canary.c89ecc63.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-RR2M4vBlnmQJzzXUaMhh1C3ApvSXcjNxDVBa6gVERi3nNU+/91VcfpRmCFtOdYKWlnKTiLl2Vg2rKfc74LsWcg==","shasum":"c5e3ece457932a3ebdb07d007e9700906a80fcb1","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.23.0-canary.c89ecc63.0.tgz","fileCount":13,"unpackedSize":36030,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhGp1yCRA9TVsSAnZWagAAQkIQAIMycfR5MaIIQiHjtaI6\nwCmGH60kyHoBw+QcZRq1PAIG0A1+poi0mxHl5JUJ8Ns1ZRmm6VTYZJ4QCohR\nsve5IjC0un3htBrvve1M/K1cYeuZ9F4CnuflFch5a2iJskYuEEZgediq8Hjz\nGRxt2JOvbNGCtoP4rCmcCMr036PtBz2L5r3fuIrWBRF6ss0rIwvIF8UhLwTi\nMSkfl7+jBdvZu7lE/jPwGsaLYTI1sse17JFGVQAoL+lCBQ8lDCOFNKr21K7Y\n8bTKcSLK0ja/JYBmdKLOqr5n5chxFQI42AWwQH9/XB4HNJD+0AZ1kVP6lPh0\nwMBi918MZRJwvIfpVBKxdT0fEK2Xie6XwTSrr9Rb8v5t9y1ieoejWBKskFtF\n5RWwC2qIaMel5v24/1VR7Kz604hhaRPtVHUNW1kpM0+rmOt1laAGP9AMTItd\nGG0GIfo+P9fRSBDOPMrLnJuIFiqRhkJFX7ry6ofKgE1OoiJsuXunFOQ0A4hQ\nDAfaNA85OTlHhYKyu748K+ZNb0ZRPw8FsO4YI1QF/nlxbGx2EjFxMbbGqUWO\n87iqGUncK8SNVS+861VmiRjkPtu+wALCDkxoKfU2V/eXfjVcUfbF1Ws2mzFD\nD8a83qZVrMeuVzvtv/HVgyI00RrUA0wbYErq9Na4/+GhvBTm3w9AQIEHBX7g\ng076\r\n=Bmss\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAE2e1hcWUsHaUsZwssblU9yn3OJHEG4lWyBJVuVJ7ynAiAXaYzq7YW3hZoi68rDx/PlIHNAbVy0/PtR5rca9AQ54Q=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"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"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-formfield_0.23.0-canary.c89ecc63.0_1629134194758_0.8229323352727775"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.59de86bd.0":{"name":"@material/mwc-formfield","version":"0.23.0-canary.59de86bd.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=13.0.0-canary.457d89aad.0","@material/mwc-base":"0.23.0-canary.59de86bd.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-checkbox":"0.23.0-canary.59de86bd.0","@material/mwc-radio":"0.23.0-canary.59de86bd.0","@material/mwc-switch":"0.23.0-canary.59de86bd.0","@material/rtl":"=13.0.0-canary.457d89aad.0","@material/theme":"=13.0.0-canary.457d89aad.0","@material/typography":"=13.0.0-canary.457d89aad.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-formfield.scss"},"publishConfig":{"access":"public"},"gitHead":"ac639cd83d2e2bff117ac2f85b2cd2641560a85a","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-web/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ac639cd83d2e2bff117ac2f85b2cd2641560a85a/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ac639cd83d2e2bff117ac2f85b2cd2641560a85a/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ac639cd83d2e2bff117ac2f85b2cd2641560a85a/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ac639cd83d2e2bff117ac2f85b2cd2641560a85a/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n|----  | -----------\n| `--mdc-typography-body2-<PROPERTY>` | Styles the typography of the formfield.\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.23.0-canary.59de86bd.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-CZHaQe+KH6XLEJK9ZDCmuH3sWctW3eRYiofxo5tX77GGVaH9bylYTN3JjCDCiCyHOYD2+PjzQrW4J2H9Jq54TQ==","shasum":"db852e720ab39cbcfd5c6cee1daa60441dcb100a","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.23.0-canary.59de86bd.0.tgz","fileCount":13,"unpackedSize":36030,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhHGR2CRA9TVsSAnZWagAAtIEQAJ7cFptiurW5Z92NOq/x\nVfcGzaeHFIXh0jK/meYPvtTnf3LLjqP/unVhZMdcJ64iDKhE3Kowsmvjd/6D\nc5vbwbCjQ1vUpmSVGi6V1iKMfj/SQnZQmbxTG/KBqKLZF9FBqSZ0CC7/PeXT\nQMCkaMa9/t26wIivhVsx+MCDMjBz9N35dCN8s1u9YOFbr3JsJe3O78sFHftI\nqDcHtizHoxPZYYXRaEDHpUSlbWD5r0ESh6CwN0o4TIubNWXjrwAhsbJw9T9+\nzGx1cCi668p61Dt6cEB7y5X+9EJMQyqlf7W9St2nJe6lHvzGNs8OrW1wtkMH\nzpjLdZz+ni4+gme8sq4t4obQdnyNpwHUE4uWCSLLoF/eWz9ntlTVg30i6Lc6\nRYRZhBvcoDx7AYWBSXwWgzFGP/ysF8azf6NM0mM+bChEIo5U9f5paHLTH/lr\nlIbIWylxJmcUT70oj4RJxukFS+/yy51mBoCU6w04OhOb9UUg8zw6TUwsCzCI\n6UTY5umICS4s4Frujwgi3q/g5iegiCK8Dcn2eDQraRo330IkK6UHrX45lDQY\n8iCi6QKuipWBHtRf6EwqyxcObawfyBWlbKU5KvkN5cB79EVEuLyh+X7ZkgmK\nys96GNNOkMynZ07HhhLclGCGmd7jgkAG6xkve8mykh8GYAGiyB4ZFzYPfa/Y\nLUQE\r\n=e4xW\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHEQSrkXmXlTMzXXRjkfGMLhrMA/inxGxmh8sjBzOwh/AiAFHSHCskC6fwdDULmeYZve2NKzPk6qa9YG+sYVPneSQA=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"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"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-formfield_0.23.0-canary.59de86bd.0_1629250678518_0.8888581926537564"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.dcda879b.0":{"name":"@material/mwc-formfield","version":"0.23.0-canary.dcda879b.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=13.0.0-canary.43d2eed2a.0","@material/mwc-base":"0.23.0-canary.dcda879b.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-checkbox":"0.23.0-canary.dcda879b.0","@material/mwc-radio":"0.23.0-canary.dcda879b.0","@material/mwc-switch":"0.23.0-canary.dcda879b.0","@material/rtl":"=13.0.0-canary.43d2eed2a.0","@material/theme":"=13.0.0-canary.43d2eed2a.0","@material/typography":"=13.0.0-canary.43d2eed2a.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-formfield.scss"},"publishConfig":{"access":"public"},"gitHead":"ab309abf464fd85bb1f234aaf8a2ccd35b8e7635","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-components-web-components/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-components-web-components/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-components-web-components/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-web/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ab309abf464fd85bb1f234aaf8a2ccd35b8e7635/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ab309abf464fd85bb1f234aaf8a2ccd35b8e7635/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ab309abf464fd85bb1f234aaf8a2ccd35b8e7635/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ab309abf464fd85bb1f234aaf8a2ccd35b8e7635/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n|----  | -----------\n| `--mdc-typography-body2-<PROPERTY>` | Styles the typography of the formfield.\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.23.0-canary.dcda879b.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-+d6EghIES3+0fbunhtwlsQ371k7r/HgRf2z9odg1BoIWDeQl4E4YcPb/jujpOxoh0FupBlKUKjqr6c9OiVpIhg==","shasum":"2b4616708b4f07d14f783f1ff1262ee822f07496","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.23.0-canary.dcda879b.0.tgz","fileCount":13,"unpackedSize":36030,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhHYg/CRA9TVsSAnZWagAAuycP/0QRuOuuvtKkUAv7ZVSH\n/RjwbnQNHKL2h9Y76j8EYAgCNYMC4O2uJbLETL14egOklTYvvEsGN+5V9PMr\nwSMP6D4/MczSU6WaZK2QUBPZZ2nHM0jWMKmwqIXdGXqefRjw8jX2o/7NNdFV\n4SyPm2pRuRXvdoelaDzck/Vr1xoTZljMuTzkjQlDKqMp9PO7N6sUXYSYiMtG\nJlvxZcRh+LwTDwW+phaRJTLGr/HVjE3pLT4xdEYPm0VJcjY5U3NHvHuBRJtf\naf1oAeJ+r5BFZcVaNu8jmYD4deuesihWbmbgloUOSLg/PZ/k53Y/JCjjm3KL\nVUgpeepM+IkL5sTeKOCES3MyYThbbMzlfY3zYE9OuBanivcz1TnGPhOOe1fy\n/jRfFSflS1GOcAdbOr0/ub9mESSy8kAVNBqjqEqtE0eWCto/LTM5pUkRuVLZ\nLcT2Tmk2i2tRkilWi51qpQo3lBYOHNeJvSuFXvMJ2vrtVfSzg/psh6zzMakW\nlpunfvPnOoYqr+l3/yINW4MGLimPtV4a57vC8O2jumD3AgZAE9d40aiokS8T\nDv752TcF1s10cww08yRvkxEDSGNEoECsVTexn3ia5DujPmNCtlOT0QgEPgjH\nigYrb/Zm0X5mVuYYFfqA3fnTt/02TuwzZu54s8icRT41HdQRl2rgMp70LPF0\n+a5/\r\n=PloX\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDFtPgcSIA7xSbDxwvTjM14UaaHsYTWYXcVRcuoCpB5rgIgKLa2rtN3BaBpQeS5mJtAMdgnFCEhtt0/NigMvB51fSk="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"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"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-formfield_0.23.0-canary.dcda879b.0_1629325375324_0.672575741674944"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.dbb8b366.0":{"name":"@material/mwc-formfield","version":"0.23.0-canary.dbb8b366.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=13.0.0-canary.43d2eed2a.0","@material/mwc-base":"0.23.0-canary.dbb8b366.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-checkbox":"0.23.0-canary.dbb8b366.0","@material/mwc-radio":"0.23.0-canary.dbb8b366.0","@material/mwc-switch":"0.23.0-canary.dbb8b366.0","@material/rtl":"=13.0.0-canary.43d2eed2a.0","@material/theme":"=13.0.0-canary.43d2eed2a.0","@material/typography":"=13.0.0-canary.43d2eed2a.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-formfield.scss"},"publishConfig":{"access":"public"},"gitHead":"9def9b810923fb3cf5946b62d7be5df5ae926fe6","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-web/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-web/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-web/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-web/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9def9b810923fb3cf5946b62d7be5df5ae926fe6/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9def9b810923fb3cf5946b62d7be5df5ae926fe6/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9def9b810923fb3cf5946b62d7be5df5ae926fe6/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9def9b810923fb3cf5946b62d7be5df5ae926fe6/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n|----  | -----------\n| `--mdc-typography-body2-<PROPERTY>` | Styles the typography of the formfield.\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.23.0-canary.dbb8b366.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-tjdurvldQiDN3Dc2Eke796D0hr7Wjsm5sf/nKveWrvR0Q1Z1bHvkI36IPjWyxgKB4R7Wujf7Lqou3ivDLOgyCQ==","shasum":"a041b5be7c2e90ea1e27d08e83a5e0b1f7db2d20","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.23.0-canary.dbb8b366.0.tgz","fileCount":13,"unpackedSize":35964,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhHuJvCRA9TVsSAnZWagAA3QsQAKDIZzKEiAay2oCPQb+e\nRHzfA9qhFJP37Cq7PWzwTCVivxIZnNb2XjCVht5iwO+XPzp5iyf88tqIMJsG\nf72MQ9H6EJertSBfgvGPLX+cSx+pNBIwQ1/h6VuVBvqHD6ewqQKPccKZt/PG\n4I+TCsvasBVS1BPrCplaytstNGDAv73HSPW1niZXCI36vEEh+kJ+JDO8HKb7\nY05rW70bnQfWETkhwK8bp/5Y7B2JMCyPuDDnD0iFQsmjQoaiVtKOLbR5ViDk\naQtnCifiwfavPDThkEnAXJKh1JKHR1wcWJtjkXFai5ohpDf0w/GOoIwYWxSv\nM1i/XBAxK7dB7Qp2gEE9HQ/whi5oQfVaK+ivHzHVmI9p9RhDfhzELqkRRU+p\nbB+85JMu3Yl/6ZUXKrUfElfMYNVEKE9fP6UBHfz47gT+zGj30la+l4hkVGbi\nLGMgtnwH48XHFyGwiEMepHySefm/UVTbNpDdSo0cCd6eWQCLxyCQ0acddFM5\npbCHJo5Bg2Y6UuccSW0le5cofG5Cx4x1T/bt/8/fuJ9xwjNkqkd2s46InIYD\nirA4GRFR0sAKTSmE/QfMAmM40a2+tjama7XJqGakRi80dm0Yhl0fSMbkKQgS\nCMCUClQAXhckBezcTshasu9moDaL+fiKoyvKBfYFAC18tpDe0VsqLeQZkkP4\nyKlJ\r\n=M61f\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDt4GltfKQFUGUQ0My0wQukrxCAUO+RoeK5OpCyrjrMFwIgOexf/cuuvLgtrcn+pLQeAWpc0JKaMce7Nq8GBx6Mzck="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"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"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-formfield_0.23.0-canary.dbb8b366.0_1629413999083_0.24350224257101094"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.c6e3060c.0":{"name":"@material/mwc-formfield","version":"0.23.0-canary.c6e3060c.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=13.0.0-canary.43d2eed2a.0","@material/mwc-base":"0.23.0-canary.c6e3060c.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-checkbox":"0.23.0-canary.c6e3060c.0","@material/mwc-radio":"0.23.0-canary.c6e3060c.0","@material/mwc-switch":"0.23.0-canary.c6e3060c.0","@material/rtl":"=13.0.0-canary.43d2eed2a.0","@material/theme":"=13.0.0-canary.43d2eed2a.0","@material/typography":"=13.0.0-canary.43d2eed2a.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-formfield.scss"},"publishConfig":{"access":"public"},"gitHead":"2c417f32674c7318ccfdfa842a3a2cb3d57853b5","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-web/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-web/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-web/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-web/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2c417f32674c7318ccfdfa842a3a2cb3d57853b5/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2c417f32674c7318ccfdfa842a3a2cb3d57853b5/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2c417f32674c7318ccfdfa842a3a2cb3d57853b5/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2c417f32674c7318ccfdfa842a3a2cb3d57853b5/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n|----  | -----------\n| `--mdc-typography-body2-<PROPERTY>` | Styles the typography of the formfield.\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.23.0-canary.c6e3060c.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-8r4e+TryZQL6NWtlkPOMzy3WVkQTlxMTpKM6eFo2KnooGYlzWkJ8+tWbtThT/cdcrNAW04PmzGCHCGdiNeD50g==","shasum":"fa6a46f5e0603f1be882b9e5fa23277782fecbf5","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.23.0-canary.c6e3060c.0.tgz","fileCount":13,"unpackedSize":35964,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhHuLeCRA9TVsSAnZWagAApJ8P/3Qw0IxBVS9lQAWoHxgg\nN6cXU6rZ4ydIOJA1reopMJ2B+7iEqdcQFsNl2LYKFU4AW8bhhY5YxVtWXlso\nVILloGm28KHcNQof1hqkHcnikImCplYEj2CGLxJ1UOPBKj73/KYwh1NLU7Kx\nEpJmOMhawcNxsyRnBx6ZKRKFtiytmoG5mBCJohw0yChMEHrDJbaq5TiBBOZj\nRLRwWi2ml8EYdy1OKGbtGG8w2VzNgpWShT6gYtO1TgiCNJfKovCkka7H/fnl\ngndfCAL3Daf7Cds7bJ350/sayT5GOgXv/UY4nfLY6QMnQhUfG8VC9Xa6xN/V\ngRucJRTZibLw0SYAMC5oviDILW4WWXdaHDJsjxA2mE3YaZ8uEqMqqN9VpOFJ\nP0H0JrzooKEeO9kfRt+exIq368qXlFacULPbL9Qo47czBrCctbWCOPhl5Y2u\nENWLJHBXlhH8IgcrGL4B02opjjaIpvRgsvXHTeHGuoTX1ve47nA5fS5aqXtt\nwSA0Dv8/nCcDdI6g/31f1lkPy9LgtRltYvgSEoRJPY2AXImIlCS81HoOy4Og\nm/xLhwejTHQBb9ytoFfiFaoYtIQj7ImSQiqfXummvWHnFfXR/TUu30Ve2n4W\nPv1DQENjut6Sn+8pcf9cDagOAdk5TPAtUk+kkmGr+o9JeY0/LucCnLhYI1Rz\nIBQ1\r\n=g64b\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDoCOZsOgjnVtImxmvq3xw+ejj6YX3UGHeJPixwZ72a1QIhAKpYWDndii3mDCWUln5JQjL7S1rKWCKAu1q7EpPYs5hC"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"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"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-formfield_0.23.0-canary.c6e3060c.0_1629414110663_0.9950816266821663"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.03120b7d.0":{"name":"@material/mwc-formfield","version":"0.23.0-canary.03120b7d.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=13.0.0-canary.0a9069300.0","@material/mwc-base":"0.23.0-canary.03120b7d.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-checkbox":"0.23.0-canary.03120b7d.0","@material/mwc-radio":"0.23.0-canary.03120b7d.0","@material/mwc-switch":"0.23.0-canary.03120b7d.0","@material/rtl":"=13.0.0-canary.0a9069300.0","@material/theme":"=13.0.0-canary.0a9069300.0","@material/typography":"=13.0.0-canary.0a9069300.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-formfield.scss"},"publishConfig":{"access":"public"},"gitHead":"ba0dc47ad891e00a21e2d69aec6ec4c6dc83e003","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-web/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-web/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-web/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-web/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ba0dc47ad891e00a21e2d69aec6ec4c6dc83e003/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ba0dc47ad891e00a21e2d69aec6ec4c6dc83e003/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ba0dc47ad891e00a21e2d69aec6ec4c6dc83e003/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ba0dc47ad891e00a21e2d69aec6ec4c6dc83e003/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n|----  | -----------\n| `--mdc-typography-body2-<PROPERTY>` | Styles the typography of the formfield.\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.23.0-canary.03120b7d.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-HWFn0ihtSG9XnczxjPzHOOvNVP+FP4P7ZSTdsF+l/Jn54UFRFuqnrOg1fvyZzBcUpsRRL9t7I6CvoMqAYMnkWw==","shasum":"7b3ed4cee3a7925c4c39c7d39998afa31a28a234","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.23.0-canary.03120b7d.0.tgz","fileCount":13,"unpackedSize":35964,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhHvbPCRA9TVsSAnZWagAACgEP/1Ffgs98nSfpk1hRtARd\nw9DNDwGO6E7kf45aYuq5tRICG8oXpyAxqrmnaeHD4iLudeVJaZQBxP3t6HFx\nvUXlIGD4ed4dCgHBNKwR0BHQCI0vo5wWAo/1HhP44PKUUhloBuIJGvJFlf+N\naEX3qXmwiN8RbyRmGSPZ4ZMzqQUfSPEgwDVXGfqUH6x/cu86+sB/CLprVmh6\nER8jODO4Cby4u7Vl3l5ynqpwfpEjbZ8oSDE2r+dBJPHWSXLS+SJWZSMJGS+c\ndUKFsTxrWoZcTYEKaTyJY0TIadfXY7C/8c1XBrQurqpoQaQtHdyNFatUElTc\nVwwO+MSwSDaKwm8JUPnofsIF1aqewdk9BChLGL2ybBraKf8HKfEoymavTcdm\nkGOJ6DcqSG8vj7q6dOHVM1j898DekvEMHrB/VvUfYjNi+ac2k3pMTs3EZvVt\n5BoAjcMwwHsiH0Dzosg7rqXTE0qQZ6yYXF3s2Tq/3c0b0AdlTAMf5ipbyeFS\n/xRGfS2KaDCniRJTxQ3CojoZNv2LnAJfJbNWcIOH816LQUgr28gk4BnHjDP7\nSc8j8XA+kUBCK7sDphqluI8yZEB/rR9ya28DcRuVItx7mYzBRGI0fmg3YMOy\ntinqt0K+ShoRhVqsbLx1GAAfU2QySPBv/cwpj9EoeFWYupdem3B84fKYvge/\npfCY\r\n=96Mp\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCKTaaX7rB+4zPmhHsb2cDMkoOfcYMqkyEIQMUBnP8xoAIgLGuRK5+M3Exu30LR0DNh4oNKVoxQ1ctJptBRAoKTaUI="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"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"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-formfield_0.23.0-canary.03120b7d.0_1629419214922_0.4381048536202965"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.d75a5f74.0":{"name":"@material/mwc-formfield","version":"0.23.0-canary.d75a5f74.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=13.0.0-canary.0a9069300.0","@material/mwc-base":"0.23.0-canary.d75a5f74.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-checkbox":"0.23.0-canary.d75a5f74.0","@material/mwc-radio":"0.23.0-canary.d75a5f74.0","@material/mwc-switch":"0.23.0-canary.d75a5f74.0","@material/rtl":"=13.0.0-canary.0a9069300.0","@material/theme":"=13.0.0-canary.0a9069300.0","@material/typography":"=13.0.0-canary.0a9069300.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-formfield.scss"},"publishConfig":{"access":"public"},"gitHead":"ffbe861a3137fecad60074a6f36ca1061f940cf2","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-web/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-web/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-web/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-web/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ffbe861a3137fecad60074a6f36ca1061f940cf2/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ffbe861a3137fecad60074a6f36ca1061f940cf2/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ffbe861a3137fecad60074a6f36ca1061f940cf2/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ffbe861a3137fecad60074a6f36ca1061f940cf2/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n|----  | -----------\n| `--mdc-typography-body2-<PROPERTY>` | Styles the typography of the formfield.\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.23.0-canary.d75a5f74.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-XEk19HQdOsyKL+XyVjKdQRMWrD0DAdtfItEcieZLNU0jqhlvJw+dblhKmnFFVYm+2C1SDiPbh5uLHaSjmzWrfw==","shasum":"3acb64b4d4a247b91d9cbc94acf04ba98f3eb4ef","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.23.0-canary.d75a5f74.0.tgz","fileCount":13,"unpackedSize":35964,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhH2AICRA9TVsSAnZWagAAM00P/REWVpTXR9FMBbk53unI\n0ppCxeYNTKqa13owi5DU9ZW451cxoVXfIfocrGOee68sc+eHpA4DBBm2l7gY\n6v44GHqHINZRuIb/YpcJitnYF7Rv/YFyjkaBR1iUMz5tRlxV1Ye8lx/8tasC\nWb8OFLqbvkZp082gvK33LEHHmCTYFgOSHqs3a7bzwOQN/1mmFwDwhQQU4u5r\nVrB3xoq0jQsOlOTK/t6E/99HUqFNYvHGrgzHCdrvo1XoFnZvF/3INr9QP3yj\nu0iKLz+swrSZQJidOKBlntgqXwzCeZTQqIRbiS6cTKF5syJCg68UgLN+uO3/\n4YeEpk3JSY0klQOPTRB2ov27Jhq5QPOUqB8Joq5ICysw1cCTP2C4v+uiENFn\nO05pu/UubkxuKWhuvXHRvPKSOvMxXBIlILeCYOecm+b4nQgGIdtI3sADTrfV\nSAf7x3h8oSXFVABbPCtoZREQxWJSjsMyPrvnYp0N+XRgGrd8XPkZHOydVo3V\nQjN61lteP03NHuwrbOpzXIYuMRFRkLsNbQXP0ZVkuhbGN58a+561xxwaIMrr\nfhvFoflJSaJTQL9ahpOgXd4BKiBMAHDOQKwSk/7Dm/i/TL/DtNWfE56XNXy9\nND40rTYDyoyNt51blo01FxksmKzlxAz9hOepvwQYl+NLbDE/VBTKfYl/+jeT\nfGkd\r\n=9jal\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDdq68G6Xb/MxUFRM/c7ZWcOKAu8JMcMxPPW1MxVV/ZTQIgQDnf4CgZXHNypzwKGLKO3CuDm4qo2idHAolW17hgLE0="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"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"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-formfield_0.23.0-canary.d75a5f74.0_1629446151896_0.4622495461071938"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.3d79ffe7.0":{"name":"@material/mwc-formfield","version":"0.23.0-canary.3d79ffe7.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=13.0.0-canary.0a9069300.0","@material/mwc-base":"0.23.0-canary.3d79ffe7.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-checkbox":"0.23.0-canary.3d79ffe7.0","@material/mwc-radio":"0.23.0-canary.3d79ffe7.0","@material/mwc-switch":"0.23.0-canary.3d79ffe7.0","@material/rtl":"=13.0.0-canary.0a9069300.0","@material/theme":"=13.0.0-canary.0a9069300.0","@material/typography":"=13.0.0-canary.0a9069300.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-formfield.scss"},"publishConfig":{"access":"public"},"gitHead":"4d51b5574d0d1d8166f9358a39a5d3f2b4c728db","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-web/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-web/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-web/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-web/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4d51b5574d0d1d8166f9358a39a5d3f2b4c728db/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4d51b5574d0d1d8166f9358a39a5d3f2b4c728db/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4d51b5574d0d1d8166f9358a39a5d3f2b4c728db/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4d51b5574d0d1d8166f9358a39a5d3f2b4c728db/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n|----  | -----------\n| `--mdc-typography-body2-<PROPERTY>` | Styles the typography of the formfield.\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.23.0-canary.3d79ffe7.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-sC/801MbQe3L5K1LUimgKDGDairVtNWyNnky4uy63cJoT+zpQ2ZcjQkFVt5katfUrUbkrTNKpBbgmOzTRZsq3Q==","shasum":"ac7ca1e206e4e71e3d0d7d90ce1341a880237c6e","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.23.0-canary.3d79ffe7.0.tgz","fileCount":13,"unpackedSize":35964,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhH+SBCRA9TVsSAnZWagAAC8wP/RO3wiQSs5JD6LVKJTYl\nKpciU79tAfcsqkv8UCTHQw8Z1bE4OZxrq/L6tjeoIsibx4jdFqkyphMF0dob\n1xTdVs0BFtjG2v6VzR+7P6GfohymLceb5kJyG8hChqDGpk7dyY+IlArWUezL\nYjkmTJdiuKgvCPgVovhT0Pl1WaErEMmLxmPoWFoC52WDlXgrM0XJvAWPcJDy\nTgehTYYo7ovTYnZ0vAIE/Q7/5cQKotf8nj2/CqGRzeiDZjwUZrZOtmUEqCKm\nDEOmcVGDxFQn9Z2L+Tes8XMBi91ZDhKh/jSOb7FbR2/RHZ94najb5jgKLuHf\nj0M2QYmT9UX6Q0fst6v4hD4B9Hn4dUmM5QopW7Tr08aYpLtADlO18pbNEkZb\nHslCv+IZntpVeRYTxG+KA9qo2rjoNHci9VxSmcAUCFLZNWB8qpP55vpN6KWf\n/96kFqFgKoLyTyMZeontej1939ygWCuijOx+uQ6fB1uyK7ucQ0ZhX0QXpZd8\nvWHXPYUb7C9j5gFZx+RYywDDd1Cd8f2k6ruAp2yZBdX9ZKXFklHxtW9AQS/W\nptuBgOTHP3ydkFVf0Urqk1vd2NzO6Kdxw1Rg9D/0O6eGMFoIsKO2rvuLh/7M\np2bFA3TalsmkHHQLRnTDxvsprSfxCqtxkPqx2Bfa9Oa0fJRDJZz2eOtfVpWI\nEjC+\r\n=ML2K\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCmC++xVPwJ13UVIyJQP2xaNZ9WZdavv1f6MVejIwD2eAIgNL54rHVtkkY6+UfG6eGnQsFhmKJCHJRfAsIc5lL7lQk="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"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"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-formfield_0.23.0-canary.3d79ffe7.0_1629480065481_0.8479005494301024"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.02213ebe.0":{"name":"@material/mwc-formfield","version":"0.23.0-canary.02213ebe.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=13.0.0-canary.0a9069300.0","@material/mwc-base":"0.23.0-canary.02213ebe.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-checkbox":"0.23.0-canary.02213ebe.0","@material/mwc-radio":"0.23.0-canary.02213ebe.0","@material/mwc-switch":"0.23.0-canary.02213ebe.0","@material/rtl":"=13.0.0-canary.0a9069300.0","@material/theme":"=13.0.0-canary.0a9069300.0","@material/typography":"=13.0.0-canary.0a9069300.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-formfield.scss"},"publishConfig":{"access":"public"},"gitHead":"fb5a30909287b897d793fe4c7cfca2cc93cae697","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-web/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-web/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-web/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-web/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/fb5a30909287b897d793fe4c7cfca2cc93cae697/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/fb5a30909287b897d793fe4c7cfca2cc93cae697/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/fb5a30909287b897d793fe4c7cfca2cc93cae697/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/fb5a30909287b897d793fe4c7cfca2cc93cae697/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n|----  | -----------\n| `--mdc-typography-body2-<PROPERTY>` | Styles the typography of the formfield.\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.23.0-canary.02213ebe.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-+hCcbmQHCXvEOPzRSyci72lkv87cnuMGM9sLfFgTtRumufRg35eybIIbhNJAQRd4LXbKL8S/3Uh/Wh0KhRSiJg==","shasum":"f26d4406fda6037c53b5a3bcd71fa54503616102","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.23.0-canary.02213ebe.0.tgz","fileCount":13,"unpackedSize":35964,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhH+WcCRA9TVsSAnZWagAAoSsP+QBsJjosOU4bmjuk/isQ\npR9pEfhkpkHUuol2nWykqafDaIYmcy8R0GC5Jpo28HjINtm1Yu0WDd6NaoK0\n/nbAyvPXhNRcchPg22pA+oHt40hU/+eTk5f7WC+9s4yx7PJ/lEcsgVPMoSLr\nSR8UJDjPjwQzS7UDr1Q25f8TB+3YOEZEhKfQGaw0FVHtcFwLY4OQHKOqK1F9\n6cKSC31s6jg5Z4cQIl+QzSbmLkQbLyNCRQ35LS2NmJvpaNHsVymoHfV3Dxkg\nJMyersFLJiBnI26k5Kr4j2A7oKnrBA65pvZFQWfqLn8AOenKVISrKbit+05Z\nkG0v+fQKVkLoF8qSTR10zn4fp1n2nEl1GsrOjI9e4KX7o/X7o6SEX+sLcDCp\nug3OW2sQJoSIbMfn1vDEgWvVCiZ8HFzwmuz9BeuAZ/yJOCa/bjDBmHiZO+yV\niCQiTQz3M8P0EU7XRtJY2XsWzqfTMzwbv71Hq8ccl4cDqb+nROI5IBp+Wo6D\nkdG4EpNJ++N9ao4d7ysKlw/wTBuWhqdSwGOAAB8flDW9WheuODW26ruh4SB/\nmbQsh7nXeiMA/zoFuKmrYcdgsNdKPbcjSj0EKi7uKOeAyRbr3IHGiT89RWyB\nx1+ujigSei+f28gm1mMtbtRi+nUnbvck7M7jOKVP/APapmgYpkoOsPYz+5Ge\niEl4\r\n=LzEp\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDUma9tXGjF1goaizpwbZxMBzPG3QrDGocOK4fqAfeamQIhAPVDBju5IKnJM/IVOdRgNmKm6ZkBKflyloSD3dYWahYA"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"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"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-formfield_0.23.0-canary.02213ebe.0_1629480348145_0.941256606219445"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.90a999b9.0":{"name":"@material/mwc-formfield","version":"0.23.0-canary.90a999b9.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=13.0.0-canary.7da413ed8.0","@material/mwc-base":"0.23.0-canary.90a999b9.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-checkbox":"0.23.0-canary.90a999b9.0","@material/mwc-radio":"0.23.0-canary.90a999b9.0","@material/mwc-switch":"0.23.0-canary.90a999b9.0","@material/rtl":"=13.0.0-canary.7da413ed8.0","@material/theme":"=13.0.0-canary.7da413ed8.0","@material/typography":"=13.0.0-canary.7da413ed8.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-formfield.scss"},"publishConfig":{"access":"public"},"gitHead":"2c4d7acf2d3387438092d8cf5fa7ba37ca3a8b8f","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-web/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-web/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-web/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-web/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2c4d7acf2d3387438092d8cf5fa7ba37ca3a8b8f/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2c4d7acf2d3387438092d8cf5fa7ba37ca3a8b8f/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2c4d7acf2d3387438092d8cf5fa7ba37ca3a8b8f/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2c4d7acf2d3387438092d8cf5fa7ba37ca3a8b8f/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n|----  | -----------\n| `--mdc-typography-body2-<PROPERTY>` | Styles the typography of the formfield.\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.23.0-canary.90a999b9.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-KtoxkSHdK+cyxpbMG9vy21EH68qHlN8m6z1XV5nUmTWmzwB+XQVYrMxq4pdFVfDhIneWm8tIh+GHiG+cJ+SG9g==","shasum":"22d6d21265dac21662dd379f76cb3a8ed68cd3f5","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.23.0-canary.90a999b9.0.tgz","fileCount":13,"unpackedSize":35964,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhH/eJCRA9TVsSAnZWagAAHloP/2pVCGnS2qGppQtqPdSR\niXo/6uTRJT4MX8sUnBKF42fuHSu0p4UnnxmVW3fRpbMDw7X3tYScbC8KrZOR\nZTybiiHxK3w03xbDzG1dqckswc0H15t/7UVrBxB7HYQf84Re3ZeUeIBgPr3m\nub1m9wo5a6ebQHxGMb7H6O4L9jXRxKM8EW54dfj8b5Pjs8/dEb33fFsntYN6\nvE3fzE/K9oGzk81ZKuNd1Z0vEUKzs67nlBbKERVXH0E/pwrBS8zpwVt4m5Eq\nlsPkORIhCFuKkrihBTGipXt+JxXnuvDMTQqGGEYjJLidSGvootNaExqWK2YW\n+0WIjY02tCEKlY1HCRSbo2/YhaRNfpaVb7um2nRkJKdv5TpCTWzbhXaaunUu\n2NT0jkztndR1LKlOjMjkmJ7brj5PJ7X2WpqykFgx8l//BYqyxAP28rdrDSFw\nxWUaawvYQsg8/DTkFOkQq7GmjS/iCbFPzC2vbTqT0YmHlPy9hSJJ9p+sMuIm\nempID01EKwpgaD6XDiusgEzPFhZtM9wUIwch9XF4XwiB2WKkh1YBCVBpIJa9\nFGiDPqYA+gguB04CMy5mU3seHZnxiYfCIBjT7N/Mrd2SaVgfqnnRgE7Tu2a8\n4vqjT6S/w8eizuh2kifia+qBLLHxtBkcdg/J2JNjEyipIhjcW/XHSkHvOkn2\nuca1\r\n=eCQM\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBr0uAPtvU/9DbmuyrrCc6EicOVj4CW5xHSjqLx3SREqAiEAv3RXeBa0JAyjlOFUNYQa9mHHeXu3VdMBE2f3y+R3Zuw="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"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"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-formfield_0.23.0-canary.90a999b9.0_1629484937544_0.4533251417748103"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.6db58716.0":{"name":"@material/mwc-formfield","version":"0.23.0-canary.6db58716.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=13.0.0-canary.7da413ed8.0","@material/mwc-base":"0.23.0-canary.6db58716.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-checkbox":"0.23.0-canary.6db58716.0","@material/mwc-radio":"0.23.0-canary.6db58716.0","@material/mwc-switch":"0.23.0-canary.6db58716.0","@material/rtl":"=13.0.0-canary.7da413ed8.0","@material/theme":"=13.0.0-canary.7da413ed8.0","@material/typography":"=13.0.0-canary.7da413ed8.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-formfield.scss"},"publishConfig":{"access":"public"},"gitHead":"187faecfb35a3d9f67ae8a6ae1c83b5f796d3158","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-web/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-web/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-web/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-web/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/187faecfb35a3d9f67ae8a6ae1c83b5f796d3158/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/187faecfb35a3d9f67ae8a6ae1c83b5f796d3158/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/187faecfb35a3d9f67ae8a6ae1c83b5f796d3158/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/187faecfb35a3d9f67ae8a6ae1c83b5f796d3158/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n|----  | -----------\n| `--mdc-typography-body2-<PROPERTY>` | Styles the typography of the formfield.\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.23.0-canary.6db58716.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-uxzemjg1ugPaHJg4Ao2NadgRUhmDR+45os26057+qUTz8MnUlW2H39pA0Veu1FkTBmmnrfayUXVAwggQt8ge3g==","shasum":"63a0957adadc18e9d5da86eba5034c1bc1d2327f","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.23.0-canary.6db58716.0.tgz","fileCount":13,"unpackedSize":35986,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhI2VLCRA9TVsSAnZWagAAyboP/AhIW/zAoFNJdIjdpGDy\n/Z/g4VDHjIeaD7qpcD0Aq3fHJsP/lGcjEppslyYxBIaqCNhT8jVraXQwd+4x\niX2Kt2pnnCyfyq9dWzyHnGH0pxksc3nrdmgvI0hqbp2ifBJEM98q/QfxF/F5\nfE/Kp3thqRx3RQnHryGTo/xGy7ptAy1r35+aIYwgoXYYX1UKLoiydy7t758M\nOhsrBx3rB40YsUwHUhF4O8epWqotB0gfGjZpBeyOQyHaoeuzYujBB/wDv7sj\ntaTUkT+CkJ1g6A96+jgDEzhpHVvUmwSxnFue+nKeEmIztgYsd3vv3vTFiW7b\n0k7pukH6T7I8bEyN9koPOtyjqVyKKsFIFy6kiPOzrSQeT5xefvMG9dsWEjT7\nkddEAPH6U541IbhtUw5PuE56CgnFKpc7+xpyQ9MmrVIk2jwhcdPM92/pimbF\n2vrFGL+wSzx13NR0FZTlSu59kEKZ6Ze/dmSpbYJlQIh/mt+S2mmDzhD8XktG\not7ollRtZQuHZQqotLNcVU5UNsEGaGhvbO29J9fuxWU+UZmvhNYHqGnMMBge\nc5c3JZx5WGUq0MnPvEZGccTORje3+saThiW9CzRY3GIyKwOLA2QtDpB7UtBi\npsrUavPOpd1RCrGVlIuPCLmtMqFUFdkrKUJboqxclTy0fKbZtWK/u7KPrLvH\nBxoz\r\n=x4ST\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC9Yu2dV5rtJFfXJI1Kkp5V7Z3IZfon+229uOXXoUU3nwIgJRksU8nc5DNO9LTl//AAz+LdQ6FExBASOtacT8R/Hv4="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"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"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-formfield_0.23.0-canary.6db58716.0_1629709643269_0.6515849295625864"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.9fb5bc35.0":{"name":"@material/mwc-formfield","version":"0.23.0-canary.9fb5bc35.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=13.0.0-canary.7da413ed8.0","@material/mwc-base":"0.23.0-canary.9fb5bc35.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-checkbox":"0.23.0-canary.9fb5bc35.0","@material/mwc-radio":"0.23.0-canary.9fb5bc35.0","@material/mwc-switch":"0.23.0-canary.9fb5bc35.0","@material/rtl":"=13.0.0-canary.7da413ed8.0","@material/theme":"=13.0.0-canary.7da413ed8.0","@material/typography":"=13.0.0-canary.7da413ed8.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-formfield.scss"},"publishConfig":{"access":"public"},"gitHead":"492fb41175c44033912a37c69d8362579b70d081","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-web/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-web/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-web/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-web/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/492fb41175c44033912a37c69d8362579b70d081/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/492fb41175c44033912a37c69d8362579b70d081/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/492fb41175c44033912a37c69d8362579b70d081/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/492fb41175c44033912a37c69d8362579b70d081/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n|----  | -----------\n| `--mdc-typography-body2-<PROPERTY>` | Styles the typography of the formfield.\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.23.0-canary.9fb5bc35.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-CCtnDWzgXN7vFSNPF/TOHm2QAspttpRh+8lPn4CWbo6SZfZoNMAJBGHeXEukkVy8IMomKPScW9ezePRXzsFlwQ==","shasum":"9d82ad5271277334e2690dc08f8503c14df9a838","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.23.0-canary.9fb5bc35.0.tgz","fileCount":13,"unpackedSize":35986,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhJCYLCRA9TVsSAnZWagAAn84P/3hN0tJT3HZ2U/14t8KT\nVkgWunrWsfG3EPuvSe3j/r7pHStcHdfM6rrFEU2e8mpjErQl1/859zXBPgmD\nMfwnb1LTFiBAnxAG+nVlZZZJKWMdlv4LVLJS51lKnOomvMUC3cM+04VoHDM/\ne+9WXMk7R/bFexG/dfkp/I2m5GnaDkWprf8m88p7IK5ncDBgVqfTtDXQVNly\nTAM6rP6+6q3uTwoNwFl9XR+ZmhQVhTiHV5vz9xwmdXo80GjbLHjWt27c7Gdy\nbb4kN2Oe5Z0esw6ZaIKUIy0ekTRjUPkykWhm6cUyd0gqRKd8FsdwgvPImcKr\n9sNlJMtUvJ7dUIeQDBv3oPV4FHcBM+GKe6HdKjo0dMG0Hl58ExnTs/JV4nuX\n0rAoHqFedXxHEsmkGKKP10IV41hzYtrRrBTyP57RQ21wsANs7VjXwrG4EkSb\nCeBMAI9RHf7TRwYN92uSDeSfix96rjAk5zbEBxmym+jTdH0KglEh+sq/qU6r\n4btH21uW3heaAnyc5ZDIzESSJnUBCUvg3zxUYbAaXszqY+B96Jqr8SZ6VCUG\nXGhA8Es5qoNH7EhzvcLX5rq7WmDGwVd42xqFOQtMxSEkmWjTkT+7ucJQFVu4\nOW4x0h8vc3SQditXMtKsqDtXjso05iO2FC8fdGOxSIaqLMYUJ8uZkMW4pMnb\nTKHW\r\n=m5of\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCkrdJMQv8N313w+gjsZMz1rVVVWenWdhUxlNE1cp2liAIhAJuv5S3MQdTDfecOSZgpBP4cgzoZCGBKlgnvMzSUJM4J"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"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"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-formfield_0.23.0-canary.9fb5bc35.0_1629758987251_0.3897483798618162"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.ddaa5d8e.0":{"name":"@material/mwc-formfield","version":"0.23.0-canary.ddaa5d8e.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=13.0.0-canary.15981e9d9.0","@material/mwc-base":"0.23.0-canary.ddaa5d8e.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-checkbox":"0.23.0-canary.ddaa5d8e.0","@material/mwc-radio":"0.23.0-canary.ddaa5d8e.0","@material/mwc-switch":"0.23.0-canary.ddaa5d8e.0","@material/rtl":"=13.0.0-canary.15981e9d9.0","@material/theme":"=13.0.0-canary.15981e9d9.0","@material/typography":"=13.0.0-canary.15981e9d9.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-formfield.scss"},"publishConfig":{"access":"public"},"gitHead":"b75a351219e35d414333913249ef19e87282526d","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-web/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-web/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-web/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-web/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b75a351219e35d414333913249ef19e87282526d/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b75a351219e35d414333913249ef19e87282526d/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b75a351219e35d414333913249ef19e87282526d/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b75a351219e35d414333913249ef19e87282526d/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n|----  | -----------\n| `--mdc-typography-body2-<PROPERTY>` | Styles the typography of the formfield.\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.23.0-canary.ddaa5d8e.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-tkdlcWi39OkVOYpv5ZMEEgpV9Jr1KKo0+JngjMNvMZkMgvMPw3+4JHS2uI5NhUqu4Vx+Fa30KejbE1aSPCm8jw==","shasum":"a572a51c4a43ca0a58333c7ba230f6c594d32329","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.23.0-canary.ddaa5d8e.0.tgz","fileCount":13,"unpackedSize":35986,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhJT83CRA9TVsSAnZWagAAk/4P/i+LL6UvMyIKC39uCjfJ\nNv8dtfFsrj+C0Or5Hyclz+EBDjx6koS9WY5pnE4xaEQ8eRuhaH73FZX1CmDn\nrgpJ7o2VFBoYSonGRFeQHYtIdRegC7qKARdJBgFu/s3ehrfDXuPIPtNyk7bE\nOU3cMJrblwTkSIBGkaNedX4CBiMIrqd05h+GPM4KPGUps/TRp1rVffYDRrDM\nuzW7UcbDyqlRek1Ce4JRNEnS8KEtj0GRQOAoMgGd9t6FJDosbGwAlHCTkSrG\niX+sajTmHbU8MH90W6QDnwEAkTHCJUkMYFe/jTwg1vgGdSdYe0qQd0ODvdlw\nqD8+lxnMd1go3ZljU4L3t0hcwXmhpxQNMWuj/g5V3Ty/eNW6gLyEqmqx2NOt\nXX/wiqhrbHJ6pYVKA2aNUZ5kIIiGR2l5oVJHysIVhCBYF0wPIgCr7q1hKplp\nl4uV0eYL95fA7pZrRomhNihj/2gBL3LLxoJhTv1gkWRCp7kI5GpP9ewJ6NkV\nmPJa15Ynbm+l/SCzxYKrQRFB44FDfnkywO6svvJW2Lj8gJK8zDhytfTXkaUX\nxAR8THoowQgP4HFsqbWQ84J3rKo8AT4ysIgZj0+YjFRE02ARcICJoxdU+MKD\ne9kxU31kdH+i48+YiV/QBh53+0eSFzyRZN29gT9V70JVe0a8dMVz2AFfbAxm\nT7Lg\r\n=6Xu/\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDFCzylRtjI3dTUy2DwEVUZpa8LgFDAGi82z6a2loqLiAiAckRXAiHG80Cfl01yHJi9rI7vDFJpEXliBD/bBszYk9Q=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"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"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-formfield_0.23.0-canary.ddaa5d8e.0_1629830967086_0.3441931894869401"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.756208fb.0":{"name":"@material/mwc-formfield","version":"0.23.0-canary.756208fb.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=13.0.0-canary.15981e9d9.0","@material/mwc-base":"0.23.0-canary.756208fb.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-checkbox":"0.23.0-canary.756208fb.0","@material/mwc-radio":"0.23.0-canary.756208fb.0","@material/mwc-switch":"0.23.0-canary.756208fb.0","@material/rtl":"=13.0.0-canary.15981e9d9.0","@material/theme":"=13.0.0-canary.15981e9d9.0","@material/typography":"=13.0.0-canary.15981e9d9.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-formfield.scss"},"publishConfig":{"access":"public"},"gitHead":"f13e06c94f8ec287642a6c4a258c32f5be7a17e6","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-web/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-web/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-web/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-web/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f13e06c94f8ec287642a6c4a258c32f5be7a17e6/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f13e06c94f8ec287642a6c4a258c32f5be7a17e6/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f13e06c94f8ec287642a6c4a258c32f5be7a17e6/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f13e06c94f8ec287642a6c4a258c32f5be7a17e6/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n|----  | -----------\n| `--mdc-typography-body2-<PROPERTY>` | Styles the typography of the formfield.\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.23.0-canary.756208fb.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-gxtPFv43/JIoxcMXbQkS+if/8ZSnUo1WbqWYJzQ+hTI6TWGs7FL5lARv+qxLA3SdymrsNizNFSq6hB33LqKevg==","shasum":"2668200075d20f7c8bd968807b87fddca4db9470","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.23.0-canary.756208fb.0.tgz","fileCount":13,"unpackedSize":35986,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhJp71CRA9TVsSAnZWagAA6XAP/2f+bmJKufhjob7AL2t9\nJw2ClvvJ9R+1F+Vpf27QSiZbGTNF6iaV8pj8BHw6QsIEpuGT1PbzN+LYuojb\ndts1R8OBkFkxxP9VQmqcnMHubwlu5UKUQAz0d8tBMl/0pQAF9VS1QWpGtMzc\nyMpKss8Ai/jbPf9D5eCjoe8FBlpI6fYNhktv3TITtjlGN4+HKNZ843CKPt7n\nd7X2Lk0HbhTzeDl2IrV01Y5jD6rVpAjvJn05xG8CUcmoWl1oPI2WAJIrGNOV\nvtQ06ggDwV1TSbR4ZgY/zuTPZs/GGRnbBG2BW5+t5lQPnda1SLVOzTD2dAjQ\nsP2LkAUFccljDBFFurA3C6lu7TsNlysIlGGnvm+S6yZT1QQ9Zz5zQsimbQVn\nW6fHW36XBCJHMTGS1l8sRl6YGbFeough1qrn+fM+J1098vd8iENm0I1ufxSx\nVs6QZpdixyBHJGv7SE1Sz59MTqfDA0GsEJoyT78MbKsnQPKrC8jPf9J2NCzo\nqwmCbGzmoPZAXiS5hOnJLtLpuoBbkn1Q0i1OPAc12ind2KwAofiGpG6k3yJ7\nrSotFTvDM0IQXYPTZYIjpUSYUzePX1Zwaz7z5uwcv8AqfGlz0gr2CppSAmax\nlHQtrhKSEQoKzUxAkoOO5BCwp1lmr0lTVVp/h9LcZdKyzgyytPUm9P72qBSq\nleaH\r\n=rE1w\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIH0nLZaJJF+NkFBoUJgOrQSOc9wFVejQMvvtngfcv0jxAiEAsoWLIezbaeylkM2aCmB8o47biyicJ30PgxQxWfvy/P4="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"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"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-formfield_0.23.0-canary.756208fb.0_1629921013665_0.7351223811844354"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.9576dcd9.0":{"name":"@material/mwc-formfield","version":"0.23.0-canary.9576dcd9.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=13.0.0-canary.15981e9d9.0","@material/mwc-base":"0.23.0-canary.9576dcd9.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-checkbox":"0.23.0-canary.9576dcd9.0","@material/mwc-radio":"0.23.0-canary.9576dcd9.0","@material/mwc-switch":"0.23.0-canary.9576dcd9.0","@material/rtl":"=13.0.0-canary.15981e9d9.0","@material/theme":"=13.0.0-canary.15981e9d9.0","@material/typography":"=13.0.0-canary.15981e9d9.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-formfield.scss"},"publishConfig":{"access":"public"},"gitHead":"0d9211bc7f0c9c96cb4dc480ff59ae633f722977","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-web/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-web/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-web/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-web/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0d9211bc7f0c9c96cb4dc480ff59ae633f722977/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0d9211bc7f0c9c96cb4dc480ff59ae633f722977/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0d9211bc7f0c9c96cb4dc480ff59ae633f722977/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0d9211bc7f0c9c96cb4dc480ff59ae633f722977/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n|----  | -----------\n| `--mdc-typography-body2-<PROPERTY>` | Styles the typography of the formfield.\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.23.0-canary.9576dcd9.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-VvR1PjxprUIIU20ph9ABvA1z0smMwfdfA3NBrT937RV9kEECxssdSfV3ZgwMWGHouLC+ctV80LjBvjGi8KGfDQ==","shasum":"91386042dbfa137894c59b001e3b97d30796f78a","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.23.0-canary.9576dcd9.0.tgz","fileCount":13,"unpackedSize":35986,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhJrmJCRA9TVsSAnZWagAACRQQAIlYcXs82OULv8eyUCK+\nr8s/nnO3c2GnPsLM7Xtnj0WSbE9NvaL7Ht/94K06olbJd3cfjToVscMX7SqR\nlBlWXHKz8ykTzrhSYqayywQs0kvLT0YjHBeCyXmfyrAMIMIaaqTTfAVc5rDD\nq9EYiovYB3Q0Nx8GrrjKwN64+bOZvU68uKHPafAfqr7Cr8f/TtTOzzicHyQS\nfdDJ27OjlmakasuKeTtlE3uQPQm6zUo4OAtup8vW4GpMG+JIPK3olmUhdKiY\nK1r0RnA5ZjEL8+y4NAfUf+ae9vH47kf3/1b8rdYwwXblJFJu7CSgo6cky2Tq\nhJoQEZCP9nAa3uz0yM/3uZ7n3gJr2dmZ3Wv0xCemcq4VtL02E+xwipTKrCfg\nlLRcctJTg02zLEikmiFU5ASPYurWOfcxsPZyCmL/s/UBM3RemcbxC00XKVQK\nMwWFRY81QWv48xqNi2Lj03bIr9LT5hWxtVw6Fn7mYthe5kD7ZBHufggbD7sI\nhBt6LagxsFoDQ4HqW6fByOuHudl+PcMkl0v8I5LzV1P0CQbxgNc7n0syUHBP\nr9X7AzU4oaxVtvGBDqKAVyP+ktzo50rTZyci6SR47xbfbkHEUJnTc7Pjri3n\nFwKlc9RrobpGIRcvpYjWWc9pcT4EM8M7H+FxLSKLYXVxTfFoY963de3k1dlI\n/Lls\r\n=pC5G\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCyVzPzWrWPfQksA25MbXfeXUaQvLU3tkDZCGZm4TrRLgIgOvPBOOb4a/lcHvvGBJIX+6LWWOvwckdqhP3PSeZO2t8="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"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"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-formfield_0.23.0-canary.9576dcd9.0_1629927817277_0.1035252781677185"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.7531cf97.0":{"name":"@material/mwc-formfield","version":"0.23.0-canary.7531cf97.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=13.0.0-canary.15981e9d9.0","@material/mwc-base":"0.23.0-canary.7531cf97.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-checkbox":"0.23.0-canary.7531cf97.0","@material/mwc-radio":"0.23.0-canary.7531cf97.0","@material/mwc-switch":"0.23.0-canary.7531cf97.0","@material/rtl":"=13.0.0-canary.15981e9d9.0","@material/theme":"=13.0.0-canary.15981e9d9.0","@material/typography":"=13.0.0-canary.15981e9d9.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-formfield.scss"},"publishConfig":{"access":"public"},"gitHead":"1baa3308fe03250097e96c18c61446a8c8014706","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-web/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-web/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-web/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-web/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1baa3308fe03250097e96c18c61446a8c8014706/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1baa3308fe03250097e96c18c61446a8c8014706/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1baa3308fe03250097e96c18c61446a8c8014706/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1baa3308fe03250097e96c18c61446a8c8014706/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n|----  | -----------\n| `--mdc-typography-body2-<PROPERTY>` | Styles the typography of the formfield.\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.23.0-canary.7531cf97.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-h50sv8OXzCjQdnt+iznU5I+m9u9CTm8XQZk49Qmg/KMOoYjqFVjmAksmmqBvrODpnIh/Kzs6BPrmNkgJegM5ug==","shasum":"238f5fe3c1f53cea2d55b45c7f6879005f74eae1","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.23.0-canary.7531cf97.0.tgz","fileCount":13,"unpackedSize":35986,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhJ86dCRA9TVsSAnZWagAAt3wP/1FX6noLzXj/erozEy74\n6Jh2K80zbF7nKO5NLXhmkwt8THsPWsEIhAL2G8MRaqq0edMM8gJb2tsZF9Gy\nfin7d6TKiok76IxpzzS/k2Ok6VeYOUtL8rgpUwyMslG6ao7cxW6qbkjN72S6\nL1eW6jz+cBeHq8ZUpfpxH5r//gqAHRspV3vk6iDDqARS+YWGTA7FLIgl8thm\nnUkzfI+SYcwW7pZaJf2Y6O5hODqXv+Snyor5eQbw/zfdFjeEN+Z+A3arBUNv\nzC1iPc1I42K/jmsvAMtQafJy50C2iDaLEkaMvZlDjvgb4dA5zOaLKnOhKKwn\nCnNiDYoBXJWq8Qj/ivWxXSGDB03vXqYiU16p9EacJviqMmnlebUFBUOQ6ygk\nwLcLD6n0qqJqLXUXm/PhHpukuQKs1g5UDVKyuqtMiYuEBi6paqadlOjCG1Iz\nxuauozwQB7Wr7MQto8zG6Q3G6icDetMK40GXai6DSj0n5ziS0rDg6R4lRfZ2\n7gC1CpGlf49qEX8bk+ZmfEEhapNyxhRlX6bMFWHCMzPwyZZDhzSD20gsH0Al\nzg1qqABRtViBNX7e3pFU42p/iBuceFFJ1DRQuF5jVbU2j4JdM6Q3mgJr7rzn\nM8MA7Ma526eH6YL60FI/umAcj10iqg4eHnr43MGMz1xux2J+NtyISZd8yCmX\nTTtr\r\n=wtIe\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAQbr6OGh5wHYkKcj8GliGghQwzokVeShoEBcRHOT7LHAiAFW31SVon+5A5W/Ng7YCtEQH3aIi5uiHz0h4iYOKpydg=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"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"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-formfield_0.23.0-canary.7531cf97.0_1629998748977_0.5787985141982874"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.3bab26b4.0":{"name":"@material/mwc-formfield","version":"0.23.0-canary.3bab26b4.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=13.0.0-canary.15981e9d9.0","@material/mwc-base":"0.23.0-canary.3bab26b4.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-checkbox":"0.23.0-canary.3bab26b4.0","@material/mwc-radio":"0.23.0-canary.3bab26b4.0","@material/mwc-switch":"0.23.0-canary.3bab26b4.0","@material/rtl":"=13.0.0-canary.15981e9d9.0","@material/theme":"=13.0.0-canary.15981e9d9.0","@material/typography":"=13.0.0-canary.15981e9d9.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-formfield.scss"},"publishConfig":{"access":"public"},"gitHead":"1637f7d8d3b8a228e1a957d94d122d9a840a63d1","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-web/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-web/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-web/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-web/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1637f7d8d3b8a228e1a957d94d122d9a840a63d1/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1637f7d8d3b8a228e1a957d94d122d9a840a63d1/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1637f7d8d3b8a228e1a957d94d122d9a840a63d1/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1637f7d8d3b8a228e1a957d94d122d9a840a63d1/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n|----  | -----------\n| `--mdc-typography-body2-<PROPERTY>` | Styles the typography of the formfield.\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.23.0-canary.3bab26b4.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-UUCTWF4kLEcZEzFUM4rNC4ZyiHkkVLAIFpxdLIcGnso+FUXd12OcBdd/k1BKuFpyzXXMOpcu5ijNwDoHkY5YjQ==","shasum":"43940ac6f60cea606e2277de2064abf0ecacd915","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.23.0-canary.3bab26b4.0.tgz","fileCount":13,"unpackedSize":35986,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhKAs+CRA9TVsSAnZWagAA8VQP+QEHDpmSMEuyMGTV29ZZ\nbGbpw9/DCqhonyk91VrkzX1ucsqOm6JinWPrpslzeeUhjOfji50ZpYWPWDJf\n+XijYus614SDROxZ8vPWeJKrHb9AmGkchN/b4X4UTbTBvn6wWqcNCaxy7D7u\nIJ4UlpTQcUVsZPmnbweTzj+dkIW6defHcc2dUO5VBpXYYQdeNo2fHjHQwI2r\nfxcJdj8SADxiI8yMXZfk7pA3XRB4p1QM4hnzAYnazdw7PQIcOVriVYrRy5sy\n9Hig9BS1UmTd44N03u0OsKqoOHt4oyfy/uENjrkrebLaPU5qx5Ceod9t1UEO\nhwB0z81Mu1L+xwAS4NPCxbfhu72PWti7Uj+oHUYepowSP92ivyAJfGfC3qRN\nxQLfY15h9HwGdfa3rpwiT/tN1iKpOZ5NLd4AF2QXK9hDI3T4qigu28VPLzI5\nj7gBi49RbiLODrGDYxNBg32qj0ms23w3h7Cug1HAsqkzIQvletZSxFEEzlXz\n0b6hSJF1NINlpIeKv4Vy0+2nWZ9x2s2vPbX62efjrbr+7Lmd8YKaJb4YghOV\nXAfQ0fpHCdDzdUyE4DTUCIGM7m+Que1jOjw8DS8zt5xsvXMEbiiVGItLEIZH\nY7Nh6PO9XrctmJRWwWb+d76kQDrKsyy+RLEod/+dScWaYbaqhsPGt9t1EXvB\ndk2C\r\n=VG+1\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDvYGmjy4eeEm9vDUvv/8gW3S0nZrw4FzxwhPvdLciWfAIhAOpZFkHeZ01t5EHCb8CzEuGPtNdthKg2+UQzbVs2qX9b"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"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"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-formfield_0.23.0-canary.3bab26b4.0_1630014269946_0.9583579466753898"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.fab48bee.0":{"name":"@material/mwc-formfield","version":"0.23.0-canary.fab48bee.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=13.0.0-canary.15981e9d9.0","@material/mwc-base":"0.23.0-canary.fab48bee.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-checkbox":"0.23.0-canary.fab48bee.0","@material/mwc-radio":"0.23.0-canary.fab48bee.0","@material/mwc-switch":"0.23.0-canary.fab48bee.0","@material/rtl":"=13.0.0-canary.15981e9d9.0","@material/theme":"=13.0.0-canary.15981e9d9.0","@material/typography":"=13.0.0-canary.15981e9d9.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-formfield.scss"},"publishConfig":{"access":"public"},"gitHead":"4c3b20e414501a7103cbb2397163d4ed1c7d041a","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-web/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-web/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-web/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-web/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4c3b20e414501a7103cbb2397163d4ed1c7d041a/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4c3b20e414501a7103cbb2397163d4ed1c7d041a/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4c3b20e414501a7103cbb2397163d4ed1c7d041a/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4c3b20e414501a7103cbb2397163d4ed1c7d041a/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n|----  | -----------\n| `--mdc-typography-body2-<PROPERTY>` | Styles the typography of the formfield.\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.23.0-canary.fab48bee.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-EE43p0iCUNU/sDqxvhSIhPcENVFqu57YtpYlLDsMRRq4JH7GgWWcomaOoSY4lJmRAGYkZqQ6GLOW1aaoFyblLA==","shasum":"20781ab4c9b4ab7d74b4406ea176724ccb8f42af","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.23.0-canary.fab48bee.0.tgz","fileCount":13,"unpackedSize":35986,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhKBCZCRA9TVsSAnZWagAA52cP/1EiCxpCN/ifBcqYqvyx\nQrWHOHbznQNHD7eONUOyEBINamMfWjtYTWgZuJdSN2FwXS4MRr+tFEm4OnZn\nmdfrsR7J7BT56/9pNqi9xy3ys8utmIyQ7FCLWmMv2wjR53A7qeacB3Oelyul\nQVRQ5KMMzCvHOwlu7ZJPE4UhGZnR9uTJ5dRwQ1DU6HNK/NhCnFBH5IOyxZfj\nYLki/SXiEdeXX6lETuadXVtLk3ohfmtXgcGBBRzPkjV/w9h6oU9aKR4+qGjc\nXfxYLHyCIUoiNLT+hyPGYnVAjWHfmzdSY/H6NHxkR1AIz5TJRWa8CdSxq7Ah\n70hdvAS06vOKLiT0DrEs1YXs4nP5mTRfPhxujpv2KavKPXccJUsRw07oH50Z\n521yqYV3v+TKVq7dm6eAKySl06HZ3ObhgQcfF6bI+3l2SsXyQLtDWBT1KlLq\ndVBRz4yVGjVGdp7cAqkYGlclZIMDC+11ywuWIogLeUVJlDaQqww1bd4cN0hD\n9WM9sFrOhC155zAwpCkvp84IxVmmMZXCY9BUfvqVOEy8t82gYvNzclTzqRS8\nJ7VwYBa7mBoiwpIkSD4n+JwY0VcLCXw9lt2szHANtjef1K29D8RxZ8ZFZNdy\nC/8+DphgwkP4HczR0YaNSG81uSU53ys6yt2rWZQ/nbSxiEUin+12k77VKu3d\ntBMI\r\n=cltq\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCimI7Up6DznoY1Ne7glOCXyNV5at8+LF46KXXvmYJR2AIhAONYrAClNtyjCa7oFk/hjtZM9I4/mCKJdjvowkrVBKOd"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"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"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-formfield_0.23.0-canary.fab48bee.0_1630015641400_0.00970882031971021"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.dec18df7.0":{"name":"@material/mwc-formfield","version":"0.23.0-canary.dec18df7.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=13.0.0-canary.15981e9d9.0","@material/mwc-base":"0.23.0-canary.dec18df7.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-checkbox":"0.23.0-canary.dec18df7.0","@material/mwc-radio":"0.23.0-canary.dec18df7.0","@material/mwc-switch":"0.23.0-canary.dec18df7.0","@material/rtl":"=13.0.0-canary.15981e9d9.0","@material/theme":"=13.0.0-canary.15981e9d9.0","@material/typography":"=13.0.0-canary.15981e9d9.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-formfield.scss"},"publishConfig":{"access":"public"},"gitHead":"5fa2a5aa7531af47c2a307010d92ff5fd27006c4","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-web/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-web/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-web/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-web/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5fa2a5aa7531af47c2a307010d92ff5fd27006c4/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5fa2a5aa7531af47c2a307010d92ff5fd27006c4/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5fa2a5aa7531af47c2a307010d92ff5fd27006c4/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5fa2a5aa7531af47c2a307010d92ff5fd27006c4/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n|----  | -----------\n| `--mdc-typography-body2-<PROPERTY>` | Styles the typography of the formfield.\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.23.0-canary.dec18df7.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-aIG3t5kzi1fs9kpheE+XMqVq0Jy/zF1XG/Pj9iHApqyKY1SziAs3thMz4BTN6wF+qzmsavVzEaG0x0H8Jz5iZg==","shasum":"f890b940b172e5a8a7a1d93a5b224d8ade6afcef","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.23.0-canary.dec18df7.0.tgz","fileCount":13,"unpackedSize":35986,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhLJarCRA9TVsSAnZWagAAsGAQAJ5Fd4TURV0Ki+8jR472\nF9NisW7jMMZKb8mpv7H+co/yU4SiJOAKT0zIToTb3RtHDwxfDlzWyzmm9dqg\nH4pWiCAA9qFLViVgHefc0ujkpwVKo44ZFestH8IApUGs+o67m17Y6HqpMhs6\nwk5ZV8n5z0j4fYobDAE3q7vodUcMYc3b2yTLTwNcS3wsQRleyUTz8WBEaAi1\nU5j3Ne/lfLuH8RHbQpu4bUZtn2NcqeO98N85wCVZv55QfKuHcFmn8cE0lYF4\nn7UBfHt71oIg6vWdk6qM7U5yEvRHVhiQ/mOMXSqC63HBN9udF53N8eEjiLd7\nJGtBP7tOdHAC3z0LSmUr7EJLPsQbED9pkD3V9A7/VxEfwYnFISh37uxTmyeE\nrU3aTYyFabFsHkW30z9k/VeYwwRuWrlD3mW4XityKezn22FT8eFh2Zs09zcm\nSKwk5Y8/fVdw1morVA1xfjpcBHl7dX3xzk5beH5ZkMsDS+YOeKogO6yjknWa\n0oVf4nl9+nvYOo5Mu1k7Os6i5UvLUfQOjAjMrX5YndNcrxRcoHjCosikSqut\nwUoPJcU9WVW+S89DjtRzH1LRF7nf3amP22f3axAqvI49S/u+6JEgML04mj0T\n0elc1OoXOA6hqw1LTOwHcjk36xL+gHtD4z2JGoScN8DgP+EPzNFfPxLe9LnK\nZp+N\r\n=nHXR\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDNO3MP/smA9mgWLibFtKsPTJoPZUpyfK39sVy0dmR6xQIgFegXNP8awqI1DyRRM/UssBJl5jgN5/rDVjczF6vq9NU="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"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"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-formfield_0.23.0-canary.dec18df7.0_1630312107634_0.02246638338927931"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.61fe5b17.0":{"name":"@material/mwc-formfield","version":"0.23.0-canary.61fe5b17.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=13.0.0-canary.15981e9d9.0","@material/mwc-base":"0.23.0-canary.61fe5b17.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-checkbox":"0.23.0-canary.61fe5b17.0","@material/mwc-radio":"0.23.0-canary.61fe5b17.0","@material/mwc-switch":"0.23.0-canary.61fe5b17.0","@material/rtl":"=13.0.0-canary.15981e9d9.0","@material/theme":"=13.0.0-canary.15981e9d9.0","@material/typography":"=13.0.0-canary.15981e9d9.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-formfield.scss"},"publishConfig":{"access":"public"},"gitHead":"8d712401a1af774c1e4dfbf07ceadfd36aaeb5ff","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-web/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-web/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-web/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-web/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8d712401a1af774c1e4dfbf07ceadfd36aaeb5ff/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8d712401a1af774c1e4dfbf07ceadfd36aaeb5ff/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8d712401a1af774c1e4dfbf07ceadfd36aaeb5ff/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8d712401a1af774c1e4dfbf07ceadfd36aaeb5ff/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n|----  | -----------\n| `--mdc-typography-body2-<PROPERTY>` | Styles the typography of the formfield.\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.23.0-canary.61fe5b17.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-mgrlZKtXlYU6ZlLWE7jbzKvIGgGCrSwnTgkqsCNZUTg5APuUCUsGcGbkqox27msrDnQ/nlGX/JUM93hv2XhIhw==","shasum":"8a9d830a29661aa6af9c5426c6f63542274987a6","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.23.0-canary.61fe5b17.0.tgz","fileCount":13,"unpackedSize":35986,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhLTFTCRA9TVsSAnZWagAA5K0P/2+UNWT+g2sXpXCffc84\n61JfOnGKWegwhODsJ2E0vqr1dSt/PLbck5B6s3zGmliKQjPAL4h7JdBE1kcD\nnJebJgDi8id+dBDXTqHc7cNrI8Ff+GLaXBDTU1SHYn/fXjzn9FrZiDI2kohM\n4hR0r2qM7qGOlE+knEnLnXU4wzjCiv0VNp3H3EGjm7WV35av8djoKx4CDw4P\n4UZFYO/6m7ClPRPpEan4QuabTX0oygAhrweh/KfSPGdOiV6z58p+qrLYZcxQ\nxdL/a+zHLNKWP+0r6k/WiBehPK28sudFhI2ouIz3yfkD1G3IoQ1Iy7x7ACy2\nqeR6q0o4lIdWvk/uAnex5vO/L/ja9pf/Mhavio/zWN79ZK3qlmrw3m2k8MVe\nw31HWY/rFeJNvQlwdl2ALu6wAqrgOdlZk//aE7f+oWLGNEUtuxU3bJZIq4Bg\nUNj5zEKknhv6w3WzCjGCiGdDoij5lnO9wWMW6oFflIQqfO+LtXmjKCfNugVA\nqDoFzXDemq81clb+zX7ctiUvAMSDqWD3fhfuMnjYVBK9C0Mxhq5nqcrod/2H\nKVAeKTNLcGUBPYO97Iy0kFIVerP74Qxu5190dBjOE7s2pehGOqQ7+r3+krtR\nVAD5S0MCTXMuNAEwYxkJ2Cd62hut3CTLLa83f07RuF/r84SAiJDNUhGz7od+\noJn4\r\n=WjIE\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFPfJfSh9BG2iFzuFXaCcIg9+GCrOHUV5NDqv1QEZqTeAiA9iyUiY0eAmSD/tdDLYEUfAbdGyT2dCb9Zpy/ayASsgQ=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"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"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-formfield_0.23.0-canary.61fe5b17.0_1630351699760_0.16653731084974588"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.a8c31f54.0":{"name":"@material/mwc-formfield","version":"0.23.0-canary.a8c31f54.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=13.0.0-canary.15981e9d9.0","@material/mwc-base":"0.23.0-canary.a8c31f54.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-checkbox":"0.23.0-canary.a8c31f54.0","@material/mwc-radio":"0.23.0-canary.a8c31f54.0","@material/mwc-switch":"0.23.0-canary.a8c31f54.0","@material/rtl":"=13.0.0-canary.15981e9d9.0","@material/theme":"=13.0.0-canary.15981e9d9.0","@material/typography":"=13.0.0-canary.15981e9d9.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-formfield.scss"},"publishConfig":{"access":"public"},"gitHead":"7c390fe40361133076f70c076acba4dce24e84bb","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-web/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-web/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-web/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-web/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7c390fe40361133076f70c076acba4dce24e84bb/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7c390fe40361133076f70c076acba4dce24e84bb/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7c390fe40361133076f70c076acba4dce24e84bb/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7c390fe40361133076f70c076acba4dce24e84bb/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n|----  | -----------\n| `--mdc-typography-body2-<PROPERTY>` | Styles the typography of the formfield.\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.23.0-canary.a8c31f54.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-1btL3kFxMW7vfTQHj3WzYRPs8oWmNZxV7O9rCHyg9h4WH2/KvXQxznZ0wOLXFlcRKlOEFceInSI8z/NC+mJLSg==","shasum":"68953fc9a0ae1b81c04556a126dcd822d9ff1e2b","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.23.0-canary.a8c31f54.0.tgz","fileCount":13,"unpackedSize":35986,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhLUAOCRA9TVsSAnZWagAAEpkQAJwzVfugDLSO9GKlxRdA\nJoyp6i4JlULj3yHKaNO8abO++5VvH6WBGLDCtTp8r7XtfWXY/aw83Cwkjluu\n13g+U3xMLZSZjkmDEpdqpldqk/75XzG93jZJcZ28PMKmsVDb+7sO3K2JxonP\nrryGPGbHG5KPoF7nquy81S9TnkLOe7dUgy4fT2mH4exbctSljAt8Iac4VHjm\n26EmkzUNU94PhjIDJjUGaQS+iJ0Uq5k1OPgJQZ35JCd/FHYajFIKCg9wxXdy\n8zkDLeYSo6PbCV1K1+x5wvIDzMj3b52ZMTdxlkCylXTwIDvo0UKJFEsCGgan\nnDG9Krse6I1nSkWw6dFr1NgkEB49sjX30mMbmw1QNUfvAW1LNfEhc/rgUn+J\nqwK6iMB4oLpnxxn3N1esLgpeDtVmI7tEzHjasGlK8fzjP2BJjFk3D52a3kWf\nNJFPWyvQKdxHBzEJLvwDF2t7LGGW0P8/l6dIbUtjJwpRb6mH/ZP+QAHFKDGF\n9VpdK5JjH9p0dYRUQHb+3RlsLvGiUM0h8PTbK8lO1NkjLPplJe3BwrVkHXsT\ny/u/jfqOG6e7c4OJ99h/NFGuKRJ0wcqjXS5LdlF9wrIcGVPQ1t8sUX2PbXM0\nKInzP3BRk8Ms5V6DvBdLXY2Z6eFkXiKDdIlUE7Bq7jJvsvTKD2yeb3wmNpbp\nA0NZ\r\n=iUys\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCWecW0xfowg6k3IzJWemZ06zpcbOS4vTMnS7gDsS9mhQIgVSlo1WgFj+d1cFI1Px0wsb3TfSU494S68gy2k9Jhbpk="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"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"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-formfield_0.23.0-canary.a8c31f54.0_1630355470121_0.8135059409454943"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.a096dba8.0":{"name":"@material/mwc-formfield","version":"0.23.0-canary.a096dba8.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=13.0.0-canary.15981e9d9.0","@material/mwc-base":"0.23.0-canary.a096dba8.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-checkbox":"0.23.0-canary.a096dba8.0","@material/mwc-radio":"0.23.0-canary.a096dba8.0","@material/mwc-switch":"0.23.0-canary.a096dba8.0","@material/rtl":"=13.0.0-canary.15981e9d9.0","@material/theme":"=13.0.0-canary.15981e9d9.0","@material/typography":"=13.0.0-canary.15981e9d9.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-formfield.scss"},"publishConfig":{"access":"public"},"gitHead":"0979a05922649d16cee4c4ef15ed0c3c3e9670a6","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-web/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-web/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-web/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-web/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0979a05922649d16cee4c4ef15ed0c3c3e9670a6/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0979a05922649d16cee4c4ef15ed0c3c3e9670a6/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0979a05922649d16cee4c4ef15ed0c3c3e9670a6/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0979a05922649d16cee4c4ef15ed0c3c3e9670a6/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n|----  | -----------\n| `--mdc-typography-body2-<PROPERTY>` | Styles the typography of the formfield.\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.23.0-canary.a096dba8.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-1HBNKLzu1PAukxx4zZEVwYTHkvFvOgtOXmpkhAF9B3F6vuAZGlM2kOxQfcdE2NLuHr2SH5EPAOlbiFp8DbEuLA==","shasum":"17aaeba1df393e4c9a383b5ff980d54aaffc196b","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.23.0-canary.a096dba8.0.tgz","fileCount":13,"unpackedSize":35986,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhLqq3CRA9TVsSAnZWagAARtYQAJqp/ZBtPoyIdQjnuJ+V\nUv+yrVvwyn38HoGHSCuY8llO1tNsdL/tBk2dHff4Oks7ByC3yq3blBFx+gE0\nhacFYGFg8kS8382B3VQrOKqSFapo2MhromDxtYqhOMbtenEVmBE1gbJCjQ5G\ny5ZH2F6qnKVeg4CPP4+gGoer5GHWGu8TA9zC7x308XVogwh/xO9i7dSkeIzU\nKgJq/3TmDzTZe0J1SG0xwddeTWKX2AGxA6lN+UVd/JAIGeQlUG17dYEJiv1Z\na4I44wupabtVelVl5RkR2LEtZRmRvx8BWtpwKG246T3eZOyP7IiOdi6TDcui\nK2zNJb5obvxU1LPRDk8fG3I9G3PUlRJqUhZYFP+1BeNJMzkASY/EGcc/3jBk\n0Y7lWt2fapMDPnaaP9wyOqkvuLRTamxQ6HC7/DWKUsWWK9dYQf6D556SC7yQ\nKAW9SCq8hlL/oaAdRTEMYlg0gWtWcXpFi4r7SjAi9DWcWecq+M+r5iLx6u3c\noGn3c43E2hsk5oyxMCa1sRkCUw3FabSOk8YEqo0mA2DjEAxo//ncSP9IiQp1\nYGnC3ugU6NIakDcIq7xegIUEYIe369hl4XbvxLfb78Z5gIYhXlNqftDbnmE+\nZBujbLyUhJYGA7WOiB9jMANqsSbjbrygYwu3EcGndfdAx40Dx9iKWSBBedAe\nV9ba\r\n=0D0b\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDOv7UqepT9FLmeaolPkDhF+ex7IWVJEscX/gybHe4RcAiAjHjbRz/ilvX/FqyAzGfKVcAObPOpp8etRPbq1vyMJDg=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"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"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-formfield_0.23.0-canary.a096dba8.0_1630448311572_0.6334441095393641"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.7ec04d47.0":{"name":"@material/mwc-formfield","version":"0.23.0-canary.7ec04d47.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=13.0.0-canary.15981e9d9.0","@material/mwc-base":"0.23.0-canary.7ec04d47.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-checkbox":"0.23.0-canary.7ec04d47.0","@material/mwc-radio":"0.23.0-canary.7ec04d47.0","@material/mwc-switch":"0.23.0-canary.7ec04d47.0","@material/rtl":"=13.0.0-canary.15981e9d9.0","@material/theme":"=13.0.0-canary.15981e9d9.0","@material/typography":"=13.0.0-canary.15981e9d9.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-formfield.scss"},"publishConfig":{"access":"public"},"gitHead":"cc39e72f38b02c8cad467741a3eb549b35590ddf","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-web/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-web/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-web/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-web/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/cc39e72f38b02c8cad467741a3eb549b35590ddf/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/cc39e72f38b02c8cad467741a3eb549b35590ddf/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/cc39e72f38b02c8cad467741a3eb549b35590ddf/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/cc39e72f38b02c8cad467741a3eb549b35590ddf/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n|----  | -----------\n| `--mdc-typography-body2-<PROPERTY>` | Styles the typography of the formfield.\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.23.0-canary.7ec04d47.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-bDlexfh4c/zzHecDQ2hSA2VMJqpe9cAhrInBbqDeA/c7wsRLXl1Xfb3xnH3rcHVJ3NXSf7en9Qo/N1uZvfWRwQ==","shasum":"9610c2efa02d5b9b1f26ec159585567fb885a322","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.23.0-canary.7ec04d47.0.tgz","fileCount":13,"unpackedSize":35986,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhMV1SCRA9TVsSAnZWagAAII4P/0TU2uJjk/nO/dRTcByA\n0MPSIAxZO4dZ3lV2+myl75rJLvhHEYyGJVC+5Le5exbQEo6/Ag9Ts+2y2ffX\nx4D3Ukjs9FmWfAfl2sA7HuHXVYS2QNYEH1Rn4k1GESguGTKWqVhn5Ne4bmR8\npHwpTFL9QK7B9BipICpmctRtOHM8Z8pIBJHy0VwQ8JJiz3SH2KxlmKkdrbbL\npSGVtXwOmibHWIkuIsMobSGg2j4Xvp6vaPioWELAZcV63sNhvE+3pByUHsWc\nE0RWWJrLnzrA3Y3Ec+5VrfX4e8c2NqNX2qn0w7s88mfFWXB7tZut2tBzQ5o6\nm8cK8FBjfXC/MsnQc8KB3ee7yeOD4vlMMnqWbU+5jaUJckocUhN8zC3ZdLVJ\nDYYvIcCyPwmzZO3/tDCEwX1SvX2UenSj/if5/0Va5q/iUYmYp+XmOjtZNvG8\nTpX6uMVx2I8nmTiQUYZqbaaJ2KNwYwcskda2yGz4mouJ3xt2hRCI7jQWCM7v\nH8THyXKWLyIbMkoUEypF9iIwKZGKYKWj3JBPvYuuisdTlMmv7a+gSXKLhacj\nLdNI00XYgnYm+snwyL9Br77801KUvkW5Ya5da5uhn3bP4tkUiYshaOAW9AK/\nqfT55V15AvS+VfiPisdLZkmutDEX5isXoqJnKEVsXAMHfJRP6IYFZz3Nek79\nJ1NO\r\n=xCjW\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIA8uf0bvMa1hWatVwnH+LW7gEUErr5Ihm97uBlpQTXliAiEAhx+6FcKzqy1yUYgy5kGp5gVZ/KlA1GJIw8eTetxWifo="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"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"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-formfield_0.23.0-canary.7ec04d47.0_1630625106508_0.5229045674041084"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.d00b098d.0":{"name":"@material/mwc-formfield","version":"0.23.0-canary.d00b098d.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=13.0.0-canary.15981e9d9.0","@material/mwc-base":"0.23.0-canary.d00b098d.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-checkbox":"0.23.0-canary.d00b098d.0","@material/mwc-radio":"0.23.0-canary.d00b098d.0","@material/mwc-switch":"0.23.0-canary.d00b098d.0","@material/rtl":"=13.0.0-canary.15981e9d9.0","@material/theme":"=13.0.0-canary.15981e9d9.0","@material/typography":"=13.0.0-canary.15981e9d9.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-formfield.scss"},"publishConfig":{"access":"public"},"gitHead":"918e9dc10ef626db369abf76acaf3266d5437d5a","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-web/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-web/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-web/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-web/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/918e9dc10ef626db369abf76acaf3266d5437d5a/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/918e9dc10ef626db369abf76acaf3266d5437d5a/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/918e9dc10ef626db369abf76acaf3266d5437d5a/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/918e9dc10ef626db369abf76acaf3266d5437d5a/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n|----  | -----------\n| `--mdc-typography-body2-<PROPERTY>` | Styles the typography of the formfield.\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.23.0-canary.d00b098d.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-0gXdSFE5YFTdGLW1LzBIM1JSAYpRlBWoJkEhcTVuLxEqDPKvh1Gtl+BGjwJvn1d581la6xxoGEtz6uzr6IypOA==","shasum":"04814cf5456a6b7fd376bc6b20d7379a95d2c9f3","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.23.0-canary.d00b098d.0.tgz","fileCount":13,"unpackedSize":35986,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhMpL9CRA9TVsSAnZWagAAzf8P/1AScUDPxqjZx91t1FPC\nltdhe09qCTP0dX3HbDXYa8Ba/xcLIxQrcVWU3Nwv2QrLmAi0/c9Acj8acPUi\nwCHS20MmYWiY+CJIf3Z9GzKo+El7S7e4htaAJ1WmTsLduZidSmq+MrepksES\nRbZucZ97BTXulpE0wlQHU3c0sbYiPrOGRu/gkv9DBvnGtxWc+46BWQAPOhVZ\nLioLUfyg1BpWvBxXiLqAElbRwTAOFSjF5XDKCmkr8UEdgl6e2zGw765ISQ4k\nAd+kR8gBcpY+YD85msdp8o8izI6kkkTUnV2RRG5/a4kgWZYIqgphp2HzXXtM\n2CMOEOq07AuShCQPBM66xmb880I9DXXL5FWVLSAyizJha8CVtjMJNefYdoeO\n+bIG+Zgsak1n7nBXt1D6YXyuMeLb4UkzQjIysh4TO7tHFqnOLcVr1Xkv4acl\nVZzMoxMg3RBB1DHoFI77kMzPeYqLAZjjMYUzBJ7cGvf/eYV3hqNIAWzGpLdZ\nWcOt58G/GXFdB/GhtAIEV9tIalheYptHP1CHAQoRZsnN9sFoBTL2gOCdYQ7g\nm69jyoLZ/0RbbEPTtiAHecElpYpAu5/KZi6RdTJWC8rDvJXst7fu/pfAqEjm\n7VKuAgBK09t3L19Eg8/8iTnU0H7RO5PpVEsanqLZG8h9+cOg3jbK+wJWeWpj\nBmxQ\r\n=Ae3y\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCWZcbXSV9lDJManJOu51AlEznCvwlv3Zuhn1VkBZKnpQIhAJlDsSZDGqcMYqzcwIx2wag5ZnN4F6ulOwdUF/vq9U7a"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"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"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-formfield_0.23.0-canary.d00b098d.0_1630704380949_0.6296057594389384"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.f29b3352.0":{"name":"@material/mwc-formfield","version":"0.23.0-canary.f29b3352.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=13.0.0-canary.15981e9d9.0","@material/mwc-base":"0.23.0-canary.f29b3352.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-checkbox":"0.23.0-canary.f29b3352.0","@material/mwc-radio":"0.23.0-canary.f29b3352.0","@material/mwc-switch":"0.23.0-canary.f29b3352.0","@material/rtl":"=13.0.0-canary.15981e9d9.0","@material/theme":"=13.0.0-canary.15981e9d9.0","@material/typography":"=13.0.0-canary.15981e9d9.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-formfield.scss"},"publishConfig":{"access":"public"},"gitHead":"ec2a4fddd95f3099eadde4522a67d49cee8d1515","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-web/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-web/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-web/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-web/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ec2a4fddd95f3099eadde4522a67d49cee8d1515/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ec2a4fddd95f3099eadde4522a67d49cee8d1515/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ec2a4fddd95f3099eadde4522a67d49cee8d1515/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ec2a4fddd95f3099eadde4522a67d49cee8d1515/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n|----  | -----------\n| `--mdc-typography-body2-<PROPERTY>` | Styles the typography of the formfield.\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.23.0-canary.f29b3352.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-Bq+Xv+qxafVuzZkfI6LVXneaIIl0nCPH+H1amM/7bnMmkriGdh+VjkLnZSIuCNgVrXpiOXMzMDklEBao3J+Z3g==","shasum":"a33c3c364d952ed86fd083ef4eea4b829d5b9c3c","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.23.0-canary.f29b3352.0.tgz","fileCount":13,"unpackedSize":35986,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhN6xRCRA9TVsSAnZWagAAxjMQAJWBzDhbwiKLkAXE9G7z\nM65PHtdqlSWZtNA5GaKegtU2AKINycO6vHeKR/ojDPUDJ2YQCSPXOhKiGAGA\nUfqUGjT8RqHSyAZgjPKTd1Gfv8u0czuD2z7Jygz4HRpqh2QM5LIHbdvMbk9i\nvDqx94P8ps7g6vQioJ1/HE9689MplRKUVNm429BXK+2tXKOLpHJlUtB4PnQn\ntMwhopjsg9C+L3TfkvPyMDnDTOqXlp1uMVJZP4eOoPqghZLA7dyOXJLBoULn\naH1Nsy3Rp8ST5ECjWSaepL4wkgUSfcZ47vt1zKlb2LnV9hUaHG1kawXhNlyO\ncta84EejQIYGL0oS3FHGBadHxxcKBcvTgSxz7O2d7dARttjvocxRqFTk0Zqw\nDeXvklTfs4/XVT4cRMAFPDV3FQMuMGzXpjMU67QyfGhQ+w6eILotTeHnY4BW\nfWtMU9IQZwAYgkxL9+N/njCUYGcxfhrzhlR5p+dctIoCRCXbPxWkZIxAwaBj\n2W/3Hr8ygk5GcSbEdmX0YxejWw8YD9WXNd/RCk3/CaEJQnqwokMatEkYrEHY\nIZXxoXVEdn73ke3/Qf7bkmLJoezYGEfGeGQiT/2dHVX86ibzLkRNx22ISQDV\nPxx4JkoiWfYPJCQ1yVsVzeDRG+UauqCU+ZQkatGaaCauyvXUHlE/+mijQoND\nQ+ih\r\n=S3yL\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAWUEk6NuaVIkobP2JP+6F/dy5t5sbrQehYsic7/M6t4AiA3+w9gf3x23psxVRpd7huHNu9rfSVY4sRNgWH2gXD1Iw=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"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"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-formfield_0.23.0-canary.f29b3352.0_1631038545633_0.7213469818685447"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.4962a163.0":{"name":"@material/mwc-formfield","version":"0.23.0-canary.4962a163.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=13.0.0-canary.15981e9d9.0","@material/mwc-base":"0.23.0-canary.4962a163.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-checkbox":"0.23.0-canary.4962a163.0","@material/mwc-radio":"0.23.0-canary.4962a163.0","@material/mwc-switch":"0.23.0-canary.4962a163.0","@material/rtl":"=13.0.0-canary.15981e9d9.0","@material/theme":"=13.0.0-canary.15981e9d9.0","@material/typography":"=13.0.0-canary.15981e9d9.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-formfield.scss"},"publishConfig":{"access":"public"},"gitHead":"4bf68ec0db23b3011a5a8c0777452925411e8552","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-web/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-web/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-web/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-web/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4bf68ec0db23b3011a5a8c0777452925411e8552/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4bf68ec0db23b3011a5a8c0777452925411e8552/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4bf68ec0db23b3011a5a8c0777452925411e8552/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4bf68ec0db23b3011a5a8c0777452925411e8552/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n|----  | -----------\n| `--mdc-typography-body2-<PROPERTY>` | Styles the typography of the formfield.\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.23.0-canary.4962a163.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-YLZdJ6ddgOBb2wd33KNfMAj6jsxaNx8nb17rQ0p37MVQBYTQQcP+6J66BIXWXzPTXunnJy/m982N9ir6N1B8tg==","shasum":"fe4decaf85c7fb22b50553b9f2e56b189efd36d4","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.23.0-canary.4962a163.0.tgz","fileCount":13,"unpackedSize":35986,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhN/tcCRA9TVsSAnZWagAAGDYP/17AjvZD0ZjDEQaTIE7Z\n7bdwlNKGYCWEA5JjTl3ttULaK2+3TEv9ZLRyJKU+b5mRWYLSaLN5kFVlLjbH\nIuPoBHXEsOUQ2LCEPmPFzFlqJWOSIQ6frIMgcjZiYNu2FfgEIL0niqD0np7+\nGup2aJ5JB0AUxhaVSsJ6eujJ7v/4NPYYu1/0jJBK8EitL5AP4rPxrJcfYmvd\nGvDBOzkx6kNi0ksx8iwa8pcCcWhrDc3cG4FeOlaj0cDYPGiEjCQf41BMMyzb\n7S1b+OgYK3ITi+cZoSDyI2elnXwqcu42zS1in7VTupl2pb+d4z2MXZFJM98z\nKh1m4NAowvn7hMH1x2mnURP37DwaFcs4hXnsx+vAdeAoRbHRYBESiE+v0Ui5\nu5xmF3v5YS7NpxIHeJkI8icZhjVhHWAIu039lq7chKgjdz8zpdIZJxZVl4/Z\neU01oSRRQjvk5Wp2cfNoLEnP84pz3I1TJwOJ4WW3pB0R/v0WwkAyD0hrNh5n\nUNvjd33ksdy/CihyQowgYPczg9GiJ0hoHg00gyXq65PVnIQ8acl4gC16cIHk\njcP2Jb6cG2dG8VRJdsYO9pNUddVWBfwOSl0Sx3kk9iuMBRFRQ0FrpdabpesQ\n0+baLuV3QIuFDnzdq0LyVMMRKWSC6EWM3uauwsz8+l663nseWc7ZplT63YkW\nWy4o\r\n=Zray\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCsVWjVI0Qmzj8i083Ife1Y6lEfWyYcxVsvBhnGeHol6gIgUEgNoMVUUkCjDPShMwptbqM5V3L3wNQ9Z8hBtH6zeME="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"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"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-formfield_0.23.0-canary.4962a163.0_1631058780826_0.09317974021071906"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.33102bf4.0":{"name":"@material/mwc-formfield","version":"0.23.0-canary.33102bf4.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=13.0.0-canary.15981e9d9.0","@material/mwc-base":"0.23.0-canary.33102bf4.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-checkbox":"0.23.0-canary.33102bf4.0","@material/mwc-radio":"0.23.0-canary.33102bf4.0","@material/mwc-switch":"0.23.0-canary.33102bf4.0","@material/rtl":"=13.0.0-canary.15981e9d9.0","@material/theme":"=13.0.0-canary.15981e9d9.0","@material/typography":"=13.0.0-canary.15981e9d9.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-formfield.scss"},"publishConfig":{"access":"public"},"gitHead":"6445a1dc819d694a36e630269c7d407b8f021e98","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-web/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-web/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-web/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-web/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6445a1dc819d694a36e630269c7d407b8f021e98/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6445a1dc819d694a36e630269c7d407b8f021e98/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6445a1dc819d694a36e630269c7d407b8f021e98/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6445a1dc819d694a36e630269c7d407b8f021e98/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n|----  | -----------\n| `--mdc-typography-body2-<PROPERTY>` | Styles the typography of the formfield.\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.23.0-canary.33102bf4.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-Q7F1UzS4xUO94P0BKCL898c8a6KJtHu6SoOaQNcXdNLw+NbHyBX0/gImTaEwIJ9HM7gG4UDYFIF8O7ootXbb+w==","shasum":"747b873449c5857b27fc57a060586d62e40ebba3","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.23.0-canary.33102bf4.0.tgz","fileCount":13,"unpackedSize":35986,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhOAAUCRA9TVsSAnZWagAAY44P+wadCGc04V4GA1lBfSCh\n9lZdZXRw2ZQ8v98HY8iqNime30UPtSusPZHIVOA2M6L0y1b0bT6OSdYPvaVl\nN/UHCzMXy1KYEgqh/45yaSJ6f7hrAvqCGQ6wGNOW5v5p6lApTcor/gskM7gb\nbfLKIey+nsanFx0V2jP1lHDo+cpLMpPi1in/xeunrPcykWPKa36ihGv7vAjG\n+pLDTYmH7kC96XnjVj8jNoyd4HtGvnJEC1uijvUPlgqBMl/Ie/g2WTVXV6aM\ndzYzhMD2cnJcX5w+SMOy6rYklukt/MesEgTGTmfMiu77bNvGy984yO8Lv7e0\nd+QtqKlWyqLcK6CeWw6tIv+t9MSDTHg0Dtsnj6cdR8IujD2wErrbDFlfe8zl\nsDc2l3LY5x6wY8zR9PF95rpv4qN10I3ir873hm4ZuNNqZhrHupVGn+7UhF6g\nbgv1yV2YYRb/AdGRrdZB3gmgNQslEnmic9QsMSc/cxusnFKxp/n8sqgxozxw\nym8YpI3/UUqbSbtyYYIjsBjqXXUxOhqBoQdGPqJklTsEpmciLxmj6iWIkwo9\nhHsCdaIazHKheJVl5EfIQNQvJpszCaQqsV6S+Gi9ouT3+XNCfyTSFkS/Oz1F\n1pzOiR3nu8+QGInWtcljm3RrXyIa9SvAx27geAHyYvghdeo++Sy3AuHOpPoq\n/+QK\r\n=QVrh\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHdA8CQrmJA1J8zMV0wjYkJQ7IKATxS4gd6OuUpWdgzGAiEAkuzdfEcHrKJY8GNEFPx0XY3fFAapiMNgGqF2DQyC+hs="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"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"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-formfield_0.23.0-canary.33102bf4.0_1631059987871_0.8672922708483037"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.76c68381.0":{"name":"@material/mwc-formfield","version":"0.23.0-canary.76c68381.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=13.0.0-canary.72464476c.0","@material/mwc-base":"0.23.0-canary.76c68381.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-checkbox":"0.23.0-canary.76c68381.0","@material/mwc-radio":"0.23.0-canary.76c68381.0","@material/mwc-switch":"0.23.0-canary.76c68381.0","@material/rtl":"=13.0.0-canary.72464476c.0","@material/theme":"=13.0.0-canary.72464476c.0","@material/typography":"=13.0.0-canary.72464476c.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-formfield.scss"},"publishConfig":{"access":"public"},"gitHead":"66455113b9aece74b59241859cfad64d4519568d","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-web/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-web/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-web/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-web/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/66455113b9aece74b59241859cfad64d4519568d/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/66455113b9aece74b59241859cfad64d4519568d/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/66455113b9aece74b59241859cfad64d4519568d/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/66455113b9aece74b59241859cfad64d4519568d/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n|----  | -----------\n| `--mdc-typography-body2-<PROPERTY>` | Styles the typography of the formfield.\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.23.0-canary.76c68381.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-FP8wvA4oY8hVxcO9k3JagtCJrYR7hlkAtuVn45r3EnikQ/ulFZR302B5MMx/Fy9qSxxC795HmB8I3vg10LCzbg==","shasum":"09333873b8bdb3077f87cc916073d087c798d17d","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.23.0-canary.76c68381.0.tgz","fileCount":13,"unpackedSize":35986,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhORlkCRA9TVsSAnZWagAAspYP/3Xc1DEjhRcPX5HkiFrP\nISu0bGQsM4cIs4eR0bjhcDQS38PHZTmE1BDtyofdxrIGLsAtekrK+0bVM+j6\n3zsA0lxOblNxOg7cdq9ZcTiAWMfqSUNpnnMvd7PcjFY7nruiX4mmJj8UY8c8\nttG82F76rSyH6M85ed8NuHFQ9Tulxnxyncsdq0cd57VKMbnpsukQC3HYS90e\n2DXH2wSa2of/fDk1BI5b1IvCEnAYOeP/ucifZZ6w8cOAxt+oFwkhuu5lrt8l\nvfTUWCNByCcMJWDTbpV2gzyKosd/AKuEwyM78fEuMhovirxYcFgTKNztKO6G\nI7jmruGqn+ctZONwkTpF/1xNAThlIjHKAxm+6vHGzZq47gaiXD131Q89+TOy\nX5+FwsWuk5GBYpxSC4IhcB0QLJByW+HTJqpPBWGgrRDOq5DBzqej2tx8flpP\n8skVRheXvlu6kxm4CPM8NPfSDgXcjgaEKFpD8KdfPb6qW9ZQaJt5tuU/eHNL\nqMum3u+xWZ0M4qQU1Gbi1JDsKZDJDTWF9ZassO2kqrEvP2vPPn/y4B26Z+WI\nqOPBG0IPi9A7QT3ErzjETTP5gmLwCwuKHdOvs4Zab6+Khj8iAWKbqKN2R8gA\njW+AyMEhVP2mkCBZ+pMvcPXP5HivSMYTz9Sl7cuywX9NTkMUYSuX0AoetbA+\nX/al\r\n=D+Jc\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDAZ2YJIaKDQkFv/BNvGBcF+vd8Qd1pX9q75XZ8+jH4JwIgBjfhi0I4vk2De0Q4Ve/UgOaLkMaiwFApvGotsL0RBnU="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"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"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-formfield_0.23.0-canary.76c68381.0_1631132004090_0.6801782390487776"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.17d51f76.0":{"name":"@material/mwc-formfield","version":"0.23.0-canary.17d51f76.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=13.0.0-canary.72464476c.0","@material/mwc-base":"0.23.0-canary.17d51f76.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-checkbox":"0.23.0-canary.17d51f76.0","@material/mwc-radio":"0.23.0-canary.17d51f76.0","@material/mwc-switch":"0.23.0-canary.17d51f76.0","@material/rtl":"=13.0.0-canary.72464476c.0","@material/theme":"=13.0.0-canary.72464476c.0","@material/typography":"=13.0.0-canary.72464476c.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-formfield.scss"},"publishConfig":{"access":"public"},"gitHead":"eac5c1fc9472a1c28736c4d8e0d423e195fe5723","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-web/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-web/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-web/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-web/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/eac5c1fc9472a1c28736c4d8e0d423e195fe5723/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/eac5c1fc9472a1c28736c4d8e0d423e195fe5723/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/eac5c1fc9472a1c28736c4d8e0d423e195fe5723/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/eac5c1fc9472a1c28736c4d8e0d423e195fe5723/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n|----  | -----------\n| `--mdc-typography-body2-<PROPERTY>` | Styles the typography of the formfield.\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.23.0-canary.17d51f76.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-a7o9JGfryadwxzb+GNhjB679aH8xxVyoblMn18y9bRc05YGWxRfqU3pEF0XS19Cms+Pr4lAH6W/K/o+tMBN7ag==","shasum":"6efe992299f899b9edb4751e5d1373960c971eec","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.23.0-canary.17d51f76.0.tgz","fileCount":13,"unpackedSize":35986,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhOUaGCRA9TVsSAnZWagAAE5wQAKR6wyZ5jR5n6cc0OW2t\nDJ90Bbix8Svtrk6+UZ5r3rpNhznKm8Cf4D6bCEWSlgzc1wj6lzro6FmWU9iH\nB6H689ZHUay1PIw1AGcjMAgaaRx4vMUVuRUBJWLfGFiQJB6kvjOR7JqbFNmB\n8IDI81YQ/rN1ynG1fRyqRTEylMpcfckSIbMTW28gj3CvlWT2zz6uRcK6Yz1m\nKf/BRpvMrpV9scvR3iU4nV4Q7emoXkPseVlGLvWtCHF33RhqMplwzJ3PHq5L\n7DyrO4OCqWzQK9LYU4nzWFTAuyPFasUffxn3HfRMy/8kvXAh92BLFnxryKf8\nm+FwfcekT2E2IAWltdPTd8hFwX2Ioin+4usEzpZnQaXii2ggi+Wc6dyEdFzy\nbM8gVehLJrzKVM9BHAROxUokHOrpp0dVeNoQef6d0e4Iq3RVbMGYDzJ2Sac4\nM9UVoOFoTqK7rdJs/8kNqCUaZ4cvtXvkI16MS//P6unn+8JcFHe66RUIV29U\n9wHKY8gJsll3LTrg2Rs68CA5Iu5m6dtkb+euh1I71h0EdYwcUYZMnSXvjmdZ\nxbAmLew7cgBVWWROA9JGVOT7nAfvPalHm4ckeKJCNtWU29b70Y0xjEspA4ct\nhnNhJN2FHuloaxovK5gw/N4qeoQrqzWWHUgq+DCVXRSAUoRiQw9CVUgbvV1A\n5OrD\r\n=9UpM\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCuOouc3eG2OFW3uRFU/RkwDarUwi2y6fUmJfbxlmQYpgIgfqiDYyvkIAoOMSsLYhXHAjf+AItGX1mcyOMfEeinT8A="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"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"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-formfield_0.23.0-canary.17d51f76.0_1631143558550_0.40404086511983395"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.3fae6c2d.0":{"name":"@material/mwc-formfield","version":"0.23.0-canary.3fae6c2d.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=13.0.0-canary.864798678.0","@material/mwc-base":"0.23.0-canary.3fae6c2d.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-checkbox":"0.23.0-canary.3fae6c2d.0","@material/mwc-radio":"0.23.0-canary.3fae6c2d.0","@material/mwc-switch":"0.23.0-canary.3fae6c2d.0","@material/rtl":"=13.0.0-canary.864798678.0","@material/theme":"=13.0.0-canary.864798678.0","@material/typography":"=13.0.0-canary.864798678.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-formfield.scss"},"publishConfig":{"access":"public"},"gitHead":"5647a60f5efcc7d6235a12c1bcf6c703db6d00a1","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-web/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-web/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-web/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-web/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5647a60f5efcc7d6235a12c1bcf6c703db6d00a1/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5647a60f5efcc7d6235a12c1bcf6c703db6d00a1/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5647a60f5efcc7d6235a12c1bcf6c703db6d00a1/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5647a60f5efcc7d6235a12c1bcf6c703db6d00a1/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n|----  | -----------\n| `--mdc-typography-body2-<PROPERTY>` | Styles the typography of the formfield.\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.23.0-canary.3fae6c2d.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-iaW1Ci4vOxIYn8wU7mEnoY5EceMNgPnipoEZ0+A0rXDOg6T/M7YOA1QHYnHZwT7W8z/lLGf+2iG0lHIxdmY62g==","shasum":"f95096cb5ea6dde8f9b1b41300f76599907438dc","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.23.0-canary.3fae6c2d.0.tgz","fileCount":13,"unpackedSize":35986,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhO6S/CRA9TVsSAnZWagAAo6wP/3Bu64b7V8XaXyY39PTL\n9ELa3MXeQxB/hJVqEvg6TcK8OFrlt03YB0J+nXgvwGyPs3DjeVMNQYG/M7D2\nCi1ybMCOU/XDEjZMovbfA1ziCpvRibp4ufODlzLwGHpw5u/04UeGBCJmt9Ri\nKu5R2WeL1HQTPkzE+1Ns+IAbQIemCPyWmO2fT0psWVOyKMjxzVZbYFtdwRlS\njc9DYNPg4adZf7wqP2OTkk7A3XkwPdottlB8q+lqFgn2bZy1dFrCy7aCb+Qs\naYQOWvvL1sDEfNYp3Rnv8LpZOb3lPMwxU6lGIKmVJ0/jm+HIReC51xoeK7RC\nTixzEg9Ljnym41N9p4iU57kji+aqkRCgQiBqjXsRVHqf3t7pJH0lj2Je1paC\nlBKnpZ1A6iWKF/vnPOis4czSXAMR2ozGYeSLMRgbtvSdCPNwOhETqV8NTH3r\nf8Pn6hYZxK3xCo294letfXXTBeJ9uNBo8oM+nznqGMQSXvA348mwdc5DezFG\nFbbvN4HQDorGvaQTC6unPIUCSnXKflSJ52IHjJo1H8eEWC8tMndfIcD/C4LX\nJtnF7y0J78/u79isqafjPiFh1p5Jjnc9wBRIAGE9+2VcnzZ8sJdj7I3LFb8Q\nFyIs0C2YRf7K3au5Wd29xLXZW10T6PGtFbxRRtDO8OYBq15pvKn1BV4+fAdA\nO0ns\r\n=bC5I\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBBDA4OIAirzH9ZTtjlj2/ExJwYXvRhMuRL3BEBHaHqrAiBQcDpa4XJGVO51XDNH5MMu86ZLjnYiLFVPPL/uKqfQ8w=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"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"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-formfield_0.23.0-canary.3fae6c2d.0_1631298751725_0.5210563367315917"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.f1958c4b.0":{"name":"@material/mwc-formfield","version":"0.23.0-canary.f1958c4b.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=13.0.0-canary.864798678.0","@material/mwc-base":"0.23.0-canary.f1958c4b.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-checkbox":"0.23.0-canary.f1958c4b.0","@material/mwc-radio":"0.23.0-canary.f1958c4b.0","@material/mwc-switch":"0.23.0-canary.f1958c4b.0","@material/rtl":"=13.0.0-canary.864798678.0","@material/theme":"=13.0.0-canary.864798678.0","@material/typography":"=13.0.0-canary.864798678.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-formfield.scss"},"publishConfig":{"access":"public"},"gitHead":"e5f5a818f48eaa5a69419b7c2ef2439b4d7fc5be","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-web/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-web/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-web/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-web/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e5f5a818f48eaa5a69419b7c2ef2439b4d7fc5be/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e5f5a818f48eaa5a69419b7c2ef2439b4d7fc5be/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e5f5a818f48eaa5a69419b7c2ef2439b4d7fc5be/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e5f5a818f48eaa5a69419b7c2ef2439b4d7fc5be/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n|----  | -----------\n| `--mdc-typography-body2-<PROPERTY>` | Styles the typography of the formfield.\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.23.0-canary.f1958c4b.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-JvLufkMAT1JFiX72XoAl6s8EaESTQRQLqht9dgLW4oQpMROY8cH78YUi5zZQUTIAJXbjj9ddsgIMY8e4zPeXXw==","shasum":"d45d4368e4da6a832fd6d0d0769f121617013bfc","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.23.0-canary.f1958c4b.0.tgz","fileCount":13,"unpackedSize":35986,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhP6RxCRA9TVsSAnZWagAAgDcQAI0F0SVbY9OjO3Ei8ds0\n0nA0eYbNHAV5L0vcPQhN2ExDtv9ogvsX5CVER0T6SoFYXa/YdNHasfRT3tnv\nuViOuu7vi/jZFFDQI6HDE1zED5p+fCaUmt1M+nOVX/qolunEcETp3jgmdOeL\nDSRwaDsUyzXZF57h4KOz7MIR/R0L3eSPMxNqT4TV+8q3UwY2FiX5RiZAg0t2\nih5ucRwuDaKQ9bcygs7mt5Ouegkr9aPQ5WSJY2e7xONekfNqh9MAUcl4hpjf\ntvshiPW7D16VqBylIHLTL6SKutZc/uwCKjNXM3OHXBBTfZBoB1R2xENeEVb2\nPDIgK4BqvJHKBHkL1JrHxtX7rtFQl3C0UStls0bzL6e/8sb7WjqyeaEj9y4P\nzkxytV2lMn5dXBfhpMASEsKs+2cpE0mqITgSWr5czkn5QHqBd5wqx7KQeX2T\n+2Ce422oeuTNzr7Vb795Fp6MUv3gSF3VGXdXZWz7X5CnJQMp2nbLaJ8Pd+bG\nQ/IDupsrd8xm83r3KymNbadp4Th5UQMAbhZcpue3lOslAvWh/m3U/vIdAxtf\nWubgwTd4RTNsB0GyexhRyjiACVVhtGXSVn9Q2UmMaTNf0x8RtNZFajW/m5EA\nXg49AwwfD7rIqFo0vc1lxS5uadrFOoly67RG38K2yRpYReMB/6uvWR4xekTb\n6nDq\r\n=8QmE\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCID2QWKVyHSVZHazUZL97RGZ5gkDLdi0TyrFtjDjXSUt8AiApogOTAb2YtmjiZzfDta5qh0xyU9O+xWIlqqCu2vLVPQ=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"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"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-formfield_0.23.0-canary.f1958c4b.0_1631560817019_0.31723950272139456"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.78abbd59.0":{"name":"@material/mwc-formfield","version":"0.23.0-canary.78abbd59.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=13.0.0-canary.864798678.0","@material/mwc-base":"0.23.0-canary.78abbd59.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-checkbox":"0.23.0-canary.78abbd59.0","@material/mwc-radio":"0.23.0-canary.78abbd59.0","@material/mwc-switch":"0.23.0-canary.78abbd59.0","@material/rtl":"=13.0.0-canary.864798678.0","@material/theme":"=13.0.0-canary.864798678.0","@material/typography":"=13.0.0-canary.864798678.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-formfield.scss"},"publishConfig":{"access":"public"},"gitHead":"638a51a3b3f96617a9be7f61f87afebe78d24a23","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-web/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-web/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-web/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-web/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/638a51a3b3f96617a9be7f61f87afebe78d24a23/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/638a51a3b3f96617a9be7f61f87afebe78d24a23/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/638a51a3b3f96617a9be7f61f87afebe78d24a23/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/638a51a3b3f96617a9be7f61f87afebe78d24a23/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n|----  | -----------\n| `--mdc-typography-body2-<PROPERTY>` | Styles the typography of the formfield.\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.23.0-canary.78abbd59.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-e12r2Vk+Sw8FfOYtCiZygrBwk10ryRM5jrcHoWtyq5ZOmskY9v+OznNzeIjBpdh9JKzZ0qlcT1g5forglUfIlw==","shasum":"7489137d783d0fee35d92283d4d99131208bc980","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.23.0-canary.78abbd59.0.tgz","fileCount":13,"unpackedSize":35986,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhP8HiCRA9TVsSAnZWagAAF9IP/1f9eH/+bgQ0DzZ+nOEv\n4EtOw2WGhuRStVazRrurjN9vq6gxHQr6XRy7hjNEO/UU/bECeV1Wll82Umx7\nTUNYQjdvQJg/LB2ynxOY4hVq8z0DNJ7+M5jiWfNXQSIHgWgveitZB6xGcVcu\nh1EfH3sX98XgdPuMYEnPMqa7M+m/BkJHqo3PP1u06ioUqxjpi5Z0ZSJWOm+p\n4nwz0Q1JCG8+pkCeVGEJtamIzNtVrqButsoVh9bqvStH260DOvwZhE6yw9Rx\ndwiFxgLka9mE41bv1i3J7WXujwBe/neUzkZO6hYBvTf0GWtNswLe9vp9EhcP\nryIfmGmP0eEX7/+uvy/zas6+ZcU+VdZgKE+EPOppmfylDQ9aNTKzkFd0QBxQ\nlm6+YL0BlIdrDmImsGy7lh/KUxG56pU0HDy4a0GkTmrVJuQ0DeG9Z+zpRTyg\nxDxGgxrP+J4L9Pc2NOSJpf1cgDgsVO7mpFT+wdbrjl2I5suwEvbaP4C9ObI6\nJxcocYKJjPYqifEzrVpUg80LVbRAJqqIsMbASxu1LPHIz/cW2wa9FrcWScyh\ns1adtusoORKZEmKHMvLbZALuqwu6ouB8X95GhKqXLCPsxfOmbXG4uw981HSs\ngfEaf7BVzqqe8zwaz6y+zEy33nhawU9GSaIRKgopRBY72kBhMYIDb5Sk7r/R\nhHQP\r\n=+mj8\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIC8+W3zkC0YD56q02tMc58m0jv6v4RXAScpXbHhWgSaeAiEAoLIpQjCiuEaiscKQZixCJEzBUSdoGcQs3zTd18mf1/Y="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"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"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-formfield_0.23.0-canary.78abbd59.0_1631568354220_0.3892834552852642"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0":{"name":"@material/mwc-formfield","version":"0.23.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=13.0.0-canary.864798678.0","@material/mwc-base":"^0.23.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-checkbox":"^0.23.0","@material/mwc-radio":"^0.23.0","@material/mwc-switch":"^0.23.0","@material/rtl":"=13.0.0-canary.864798678.0","@material/theme":"=13.0.0-canary.864798678.0","@material/typography":"=13.0.0-canary.864798678.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-formfield.scss"},"publishConfig":{"access":"public"},"gitHead":"9830d665867dbb440855339d9181b5c323202008","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.23.0","_nodeVersion":"15.10.0","_npmVersion":"lerna/3.22.1/node@v15.10.0+x64 (darwin)","dist":{"integrity":"sha512-z5AMgB8/5jWLG/Q0IE613Px6QG0bQcj0SM6RSpWP6nxwmka896xgBVh9hxCkmIYacCASrCUH9rFZwl3ZcwSCgg==","shasum":"b785ed590d568e397814a5299d9d7cfa6a6e405a","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.23.0.tgz","fileCount":16,"unpackedSize":43256,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhP8QsCRA9TVsSAnZWagAA9vEP/2P0XVnZ8hgR6YDnmVSg\ntKb5NumXfGkEePMm+6pz57zGYlhkgFd2peCuHWe1OYhjMJXmVnWFw+2aaN1h\nVJsHUdxQASOkGG9kO0xWEBa84/IEFVZGaVVNh69P+I76u/0QvA1fiQYjWHO/\n5NWSmeq4a+z6HnFzTB3B+REPk8mss5P6nbOz2Vz/oCzZrNkRhZfL98GYZEwN\nzt3Ev+FPSpCrjeHc5ayVwtxrdnfHogYw4YAJTXmYbSc/hY0Fbvl1RL6uUwFc\nLhr7YMczxO9Q6sNdZ7cOu7tgNDPfF2hRwX/v+LDFRYGKdFhhRC+KPaZJh2+X\napxi+WaV4vtaQIOgWTU2xxCBJ1CGLQ5IC6FJD0wZD2hLolsxwPKVgnS5fXMO\nsF23WrvzeO7ZbGomndUh82yGo4kPYZPEZy8Dr2OhhN7rK7flWPwi+Ax65dVm\nWM3p7V94nYScyGbiLB7q/tX+pP+dhsqGDlUJq2BeI3AyPMkBjhTeI3YJJXuE\nPgAa12SdCgX8JgEfesQAlLRtHRqRAP2wX8nz7cG7639GyzX5JFKLDec9Hr4u\nu9ssNLL6dNdikpja/4Mye52zss01A7Jfznzl17eFhKwArYFCMxGb3J4ucQLn\nFVTHde7795FTrGcnwPkyRsw78ClyNH+ahum9MNBVPc1f0/bbp0KJSu6Rfte7\ng3F5\r\n=CEK6\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBPF0uOYhtMqbw3mZWBtPBDSTl7RX3raDTruQh/SM7W4AiEAlQ3WBmfeqOL5+H770AlIEiOQe2+qRagPtjV59MI/Oog="}]},"_npmUser":{"name":"emarquez","email":"emarquez@google.com"},"directories":{},"maintainers":[{"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"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-formfield_0.23.0_1631568940578_0.26104566309300514"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.24.0-canary.9830d665.0":{"name":"@material/mwc-formfield","version":"0.24.0-canary.9830d665.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=13.0.0-canary.864798678.0","@material/mwc-base":"0.24.0-canary.9830d665.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-checkbox":"0.24.0-canary.9830d665.0","@material/mwc-radio":"0.24.0-canary.9830d665.0","@material/mwc-switch":"0.24.0-canary.9830d665.0","@material/rtl":"=13.0.0-canary.864798678.0","@material/theme":"=13.0.0-canary.864798678.0","@material/typography":"=13.0.0-canary.864798678.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-formfield.scss"},"publishConfig":{"access":"public"},"gitHead":"964716e9985c1d08cbf280a6c7a4093be800c67d","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-web/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-web/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-web/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-web/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/964716e9985c1d08cbf280a6c7a4093be800c67d/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/964716e9985c1d08cbf280a6c7a4093be800c67d/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/964716e9985c1d08cbf280a6c7a4093be800c67d/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/964716e9985c1d08cbf280a6c7a4093be800c67d/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n|----  | -----------\n| `--mdc-typography-body2-<PROPERTY>` | Styles the typography of the formfield.\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.24.0-canary.9830d665.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-QLUzW5Kk5C3XOB5Of5ku9btMAKjKBIYqccYUUqC+s3F/gqJQNemF+mVtxa+5vrZxfnwsVV1tNxutwM5p80f3kw==","shasum":"f610bf039599721236786bd39dce8c0a85a033b1","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.24.0-canary.9830d665.0.tgz","fileCount":13,"unpackedSize":35986,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhP8RsCRA9TVsSAnZWagAAd8cP/jhhZVhCKpI6s9N6hAiy\ntOqVLP7UcScKNt/TvR+fRgXeKodJ4GmB7XHSKSuh680uP2bp6GFjxM6deXoX\nbM4OuiHKHacQTWNlM/F+b67Z6E1bh3xvc6GXlRrp+fEyS4GOxKv4OzwO4otD\ntStv2kgVp/5ne4jdgtH2JwgBHHiit6Bi1mrhit76z01lHieP0zKnw7dLEJzt\nGpx0ODtnEP5mZbCcn7Ie8+/WLu//E4OTQK4cvxsuGVcQEaqlY4TMErP1CkuD\nEaykHu9OIGoHM3UzuNGbKM+IsUmrl7N0fpP+WV97wBlKscvUBEOoqKWXBZ8S\nYExevSyEGXAm8oQKLh+QOp/5WrAmMbPcBHaHSzdbVFRThrm50obop5J/4/SK\nZ+MaGLv/PZM6uL6XzO6/1A9lykASiCWG+8kQaPs72VTCHi2DM0RQigIc8jKm\nzbNiCLEJX/Ql4VLSflrBy4Woh82XR9IRjVWamd997nD/oHbjlnkYWWYEXtzf\n657zlhe6AgmxJ/FCXNp1FurI9UjuWD4Rak22g6WIIsXQL8rY0p5HhORGcIeM\nV9LVEKS8VDyJnyIhagRzHDbLqnrWrWpxKu3X+cYC72ATI8jtFvaEg4qvOhFk\n1ynx85TGjn8Z1EVyXW+VKvhDX5gNWlkZUtlZ9qNSvtz6SJm5ZkWfKvjzkTht\nSNKG\r\n=Y42J\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDQHs/LzIVmrt97JkuMidY2o578HKpWMy3BdjzO1PU05AIgQ+FLFMrSk2BfMNjGhw6EMANdnYUZsB8ijIdSbNh7BPw="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"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"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-formfield_0.24.0-canary.9830d665.0_1631569004209_0.04101115071815786"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.24.0-canary.20e2081c.0":{"name":"@material/mwc-formfield","version":"0.24.0-canary.20e2081c.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=13.0.0-canary.864798678.0","@material/mwc-base":"0.24.0-canary.20e2081c.0","lit-element":"3.0.0-rc.4","lit-html":"2.0.0-rc.5","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-checkbox":"0.24.0-canary.20e2081c.0","@material/mwc-radio":"0.24.0-canary.20e2081c.0","@material/mwc-switch":"0.24.0-canary.20e2081c.0","@material/rtl":"=13.0.0-canary.864798678.0","@material/theme":"=13.0.0-canary.864798678.0","@material/typography":"=13.0.0-canary.864798678.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-formfield.scss"},"publishConfig":{"access":"public"},"gitHead":"4912005504dcbf47a4f5fee3ef7d4b37cfb48606","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-web/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-web/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-web/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-web/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4912005504dcbf47a4f5fee3ef7d4b37cfb48606/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4912005504dcbf47a4f5fee3ef7d4b37cfb48606/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4912005504dcbf47a4f5fee3ef7d4b37cfb48606/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4912005504dcbf47a4f5fee3ef7d4b37cfb48606/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n|----  | -----------\n| `--mdc-typography-body2-<PROPERTY>` | Styles the typography of the formfield.\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.24.0-canary.20e2081c.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-LBQHaBXF6PRPlYePGGuY0OufoASxNk5k/Ubgrw2lHBfRXvAJRveM4j88NfnVqEy+Qlqg0Hg+fzGOcxd0nH6p8Q==","shasum":"608cd4ae57cfe2e6405d7a0398a9d535919b7e26","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.24.0-canary.20e2081c.0.tgz","fileCount":13,"unpackedSize":35994,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhP99iCRA9TVsSAnZWagAAZIgQAKAq6Bd5amQ59Do//wjj\ntzu9ljyYDpKCEgZG83K8P7EIrB/19ZObr1E2F/mPC3wFESjJeUHkb7djvHxH\nqT+B5ywR5Co4NRzcJI+AqgbAuJjy3JuapRDtB3GgAk4b8ExujEkwOn6DOsfh\nNGBpDKIwDbKowuG5UNWQ435OzyeRkh1RthlTjJW9nW4f+KA5I8h9+eEuFgpD\nGrbNWLBHetqqJzfNPtU89Bo1WcXoaD/YxcQpopPa3YQeI+xv49WmUPIVbmjz\nphE9eSfrw1ds5WLTJ//ZlWh/PPXpOJNfaeJUHfJCljl2IquSht3jqW4bL076\nEBg1n6FjPcanTIWXmAosDagnRO382vg52CSWJwQzq3CJmV3G52C6h3vk9QzK\nC1cd6xwiHh+3YWLd9nOn/mlneqsm8QZgZuN/Z9Ipwu1pIrB9B+YsszFKSgCw\nlaSMr4QyDtOzDsXNnZnndk3K6EKfHCmiwhoQkRusSU7XklaP44jDeJc5vnDO\nF1rpWO4xbRwC3sAse1wlXB5voUoCJG7PmMILhIhARwoGVaAAzOYbkb+3fzWK\npwn2uTM+k8R37w34oKARgKIASbEOkB7E/yQRP9Y7FOlHR0uklANW+s6RtKME\nmp160xDuYmbFj7Mbjd9gRjvtTwpEJ/UKCubNy+8UMexNZTmvcc6q4UAFYanp\n0iBG\r\n=p7pP\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIC8y4N8y5bnfwtVe80U3AZiGnz9ENCZ5qAZ/UwU2YFIYAiAIIdADOKrzAH/CgpciF7I2jRogYMAzXoLH+LVtnvrlzw=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"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"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-formfield_0.24.0-canary.20e2081c.0_1631575906449_0.17918964356291944"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.24.0-canary.583613a9.0":{"name":"@material/mwc-formfield","version":"0.24.0-canary.583613a9.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=13.0.0-canary.864798678.0","@material/mwc-base":"0.24.0-canary.583613a9.0","lit-element":"3.0.0-rc.4","lit-html":"2.0.0-rc.5","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-checkbox":"0.24.0-canary.583613a9.0","@material/mwc-radio":"0.24.0-canary.583613a9.0","@material/mwc-switch":"0.24.0-canary.583613a9.0","@material/rtl":"=13.0.0-canary.864798678.0","@material/theme":"=13.0.0-canary.864798678.0","@material/typography":"=13.0.0-canary.864798678.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-formfield.scss"},"publishConfig":{"access":"public"},"gitHead":"6362ae780108c56957ae78e7b17d5a13a17b286a","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-web/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-web/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-web/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-web/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6362ae780108c56957ae78e7b17d5a13a17b286a/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6362ae780108c56957ae78e7b17d5a13a17b286a/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6362ae780108c56957ae78e7b17d5a13a17b286a/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6362ae780108c56957ae78e7b17d5a13a17b286a/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n|----  | -----------\n| `--mdc-typography-body2-<PROPERTY>` | Styles the typography of the formfield.\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.24.0-canary.583613a9.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-wd+j7SxaQdCOPa2jU3NF4jcBNERQHr9rfuQUYxPUC7hzK8CygSj0fDKMDugBJ6ZW1TkkKJK0wYw1qcRTCWbmyw==","shasum":"647041e119b08ca36e057a8c2a70f2d31fa1f7ba","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.24.0-canary.583613a9.0.tgz","fileCount":13,"unpackedSize":36000,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhQNPbCRA9TVsSAnZWagAA2tYP/1AaGb9msPCbsyVjIT98\nrvSuVkU3ociHAEoFxUMXeTGw5jyS/s1811SbTWEuE66LhOyGTWkfZ8gEyuBh\n+N2MElto0SXozOH56QitFVJTpvsXtmVJ1vPb6b5CQ+IYY5zfL5Tt5emK8/0w\nIQlldkrUbp4OtmRQxix+FSH0SXkwc7ivWgLb1RNvBfSMFSDXk13rkXf2xnwi\nTt8ru+QeC0KHsQRM+XNOkEtcL8rtfI9fu5Rwtld5KCyxF4mRLUODam8YhAh1\n6aJRAKEvDH1QO/SH20fziX0d63QveY5i5ENrUGIdSHkTIFGe0O9IBfn/MAiw\nPEvKqRJctfXPmrg/Ydy7mM3lV1HFcGu78WC5v3I8SYz1lvCNEkfq7RG5TCfV\np7N+HNzfUOpWa/31v84/t+RW9SeJgvMttyK4YsIG6p94NIKX3uKfTjid3nZ4\nMR8xCX7IhBNh2ay57LE6ht/m9FWrDdsObuAzhzyCRfydemuQTtie8Gi4nhFb\nmdlU9ZCBYFw46go/OQ0khi3Nb2wmm7fbEy/ybQkjwFtvddFddpDgFjOwW/0m\n3+J/GDvYTLrH4u5sMxRGYKkyX/cQVcQF7wcQbzqgyPhjVSvVzjSWZQq1aBZ5\nlr2Djct6zX73Uy6jOuzm1edEGkg9ajJwmWgf4cEO+Z/y/NwV66SaxsPjiowz\nAyNW\r\n=6iaL\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD/b9Xjvtv6WkwyYHmcu7B/T8vnbpf6KeblnSKIfipBRgIhAKpshXyoWnSHtagZLkMZcGQjgQMxxK6yk+h6IkDtd8nT"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"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"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-formfield_0.24.0-canary.583613a9.0_1631638491751_0.17941886527643436"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.24.0-canary.0e1bd56f.0":{"name":"@material/mwc-formfield","version":"0.24.0-canary.0e1bd56f.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=13.0.0-canary.08398f880.0","@material/mwc-base":"0.24.0-canary.0e1bd56f.0","lit-element":"3.0.0-rc.4","lit-html":"2.0.0-rc.5","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-checkbox":"0.24.0-canary.0e1bd56f.0","@material/mwc-radio":"0.24.0-canary.0e1bd56f.0","@material/mwc-switch":"0.24.0-canary.0e1bd56f.0","@material/rtl":"=13.0.0-canary.08398f880.0","@material/theme":"=13.0.0-canary.08398f880.0","@material/typography":"=13.0.0-canary.08398f880.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-formfield.scss"},"publishConfig":{"access":"public"},"gitHead":"0ac1a8621875726916642015e273dc177d29abc9","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-web/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-web/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-web/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-web/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0ac1a8621875726916642015e273dc177d29abc9/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0ac1a8621875726916642015e273dc177d29abc9/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0ac1a8621875726916642015e273dc177d29abc9/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0ac1a8621875726916642015e273dc177d29abc9/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n|----  | -----------\n| `--mdc-typography-body2-<PROPERTY>` | Styles the typography of the formfield.\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.24.0-canary.0e1bd56f.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-GQicxt5e8dYJmsI+g2j5wyY/nUQmZDZ+VTnVPJ++oBjeuvPMBLCWZy6a5mpHYaVEBrO40tRAgETJ8Gdjr67NbQ==","shasum":"91575f94ac4fdd5e93c569c0cc9f30bef9e4cd58","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.24.0-canary.0e1bd56f.0.tgz","fileCount":13,"unpackedSize":36000,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhQNyFCRA9TVsSAnZWagAAU4wP/0Rx/WShGqpDr0JFCUk9\nl3IZSklf7iw/UXAAkRLy3RrzQpjnHPGvaehvnvmlypx9ViDh8rbXuveYEAhY\nqepCMPe8DSw2vLtMIzyo3h0ZE6m1DSdUhX/F9BFbzeh/790NTSiprhO4rWpp\nAlfHD9uKB0oXbJJRyQbZLcekeyxLYnLG8j5z5wJrIz2Z/GN8DFZWYuxXjp7Y\n8+ZQ/wfO6qyjHtxFlkJdlQXNtn8fLktDxMKv2IUmJXQLAffyjMB7EXu72vc9\nv6UBUw7oxDN5i73w6O6xi9JnftOYbnnWgs7X4mio/EqBgWfGvL4AIkQ/5ZUb\nn12NCGHJ3a7Wjn9UTaW7o+aj3zuNm93XOk4dRfeElm2nJRWXtETJTnZdyyEs\nf7aefKmBj4IZLpl4EUEXiQWwhsREa1nY8Vh2vRQikafIZGExQpfLdWkV8/h0\nggSeTDvQ1u92H4iUHVnCa/oQoTPD30t/tYZtOPlpdYb9DlrsmHsMtMzrQ/qM\nexiWBS6KCYGOVtz+4S4iAVC2Y69cW+0NXLftm+P+fEj5gIRJ2pCxQbY1eoC9\nhJGoRrFzDhqsgnGgM1ShGflWfJSnDZwZgUAQFa/e9cIL+rnwDoPt44YJYkLA\n1+2qpl7HbVtKhOKVip/o9J1zztNgzRCdvbevV+M4LBE2wYAPyUkoym3MIFsg\nb75H\r\n=ZHjy\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICgmgjlR4MmaNJgasw65o40/IK9VcBuI9FCazbXt66JYAiEA9LgWu+xKZxxIfmOIj2fV4eG0HPV/XvVP6h/A/5RPzsM="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"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"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-formfield_0.24.0-canary.0e1bd56f.0_1631640709233_0.008790326957516026"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.24.0-canary.7bb1818e.0":{"name":"@material/mwc-formfield","version":"0.24.0-canary.7bb1818e.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=13.0.0-canary.08398f880.0","@material/mwc-base":"0.24.0-canary.7bb1818e.0","lit-element":"3.0.0-rc.4","lit-html":"2.0.0-rc.5","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-checkbox":"0.24.0-canary.7bb1818e.0","@material/mwc-radio":"0.24.0-canary.7bb1818e.0","@material/mwc-switch":"0.24.0-canary.7bb1818e.0","@material/rtl":"=13.0.0-canary.08398f880.0","@material/theme":"=13.0.0-canary.08398f880.0","@material/typography":"=13.0.0-canary.08398f880.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-formfield.scss"},"publishConfig":{"access":"public"},"gitHead":"b34bf652f1b82b80ec01a0ffcec5dbb2dc950485","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-web/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-web/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-web/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-web/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b34bf652f1b82b80ec01a0ffcec5dbb2dc950485/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b34bf652f1b82b80ec01a0ffcec5dbb2dc950485/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b34bf652f1b82b80ec01a0ffcec5dbb2dc950485/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b34bf652f1b82b80ec01a0ffcec5dbb2dc950485/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n|----  | -----------\n| `--mdc-typography-body2-<PROPERTY>` | Styles the typography of the formfield.\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.24.0-canary.7bb1818e.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-FrQ9xUW0sEXok5oafCWSH8IVfC4ke0Zw0paZZcqL9iz1TQPvZgifXYvoPTvI4bqai4hhnxcTHDvqXjZY4/VruQ==","shasum":"773ff99fa54048c4bd4b1f2788e76e3a33c9fa9e","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.24.0-canary.7bb1818e.0.tgz","fileCount":13,"unpackedSize":36000,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhQT/PCRA9TVsSAnZWagAA+xAP/3wFNLA0E5pfOiuGrOCK\nBm+gn9p+Khqb+9LNoEI9ThW1AOw38F6UILON/vPBUsk54byOq1EQIzzJqZTW\nvrD0c6P7cggq/VYrY+/uP4zWhcE4eDeJHk4Z5c/SRGj0Xr27Gq4L2tfUfBfF\n3794W7dISNkwt2Tc4F9V84r8BogXbzZ/pBzvRYTCm6xCzu56awy89vsIxFSb\ndUd+cghW4NjH6sNn5o4EhMYfS+6o51VQ4soseWivG5CKwwogaEAD/v693JZj\neE6dxc4epm6lAZg9VlMqo7iNQZnnMf9fvFfx0apRRYx6rQ4e3gAhW9OVJy6h\nLtAx0C8DiKMGZLtUOGCjO2RupZj3i7uZ6uH17RqH300tOs+qDxsFueA7HhzB\n12cYXaaoLdW2I1nTZ53M54y3WWbbqlEf+NyyC6XBcEj9IHG2wqKZOglGB2tP\nJ4xZi9EAIciQI1oIDNh1VmNn3+5WSVOmase803UKXLeNmMgbS19yjOF4ZdYW\nOc1SUExcBup8gdeSn+Kc0bE6qLC3p1YHdHy8N/gusl34RGOlB5ciXLDiIb4u\nmeih5CH1qc4AZxy48uYF3YqJuyvBUpw56g9RMbyIwnz6zQqFn9VKS3Kcy64X\nmTlHGL2GM+Z9vMP0XuJyVBCrN8Ailp29HX8H3wNhBLWHpRFNjcgGfidiU+DH\nZ0IC\r\n=ALzN\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBdKKk5WeHXNUmiHmfLXky82EWTZAq8NYkyMVS1isKgwAiB22ULrIo1yaF63J0AlhQj1ULYCTrzE3ELkBu3cmAGqvQ=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"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"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-formfield_0.24.0-canary.7bb1818e.0_1631666127703_0.773854411799709"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.24.0-canary.b5e665a9.0":{"name":"@material/mwc-formfield","version":"0.24.0-canary.b5e665a9.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=13.0.0-canary.818f4ee93.0","@material/mwc-base":"0.24.0-canary.b5e665a9.0","lit-element":"3.0.0-rc.4","lit-html":"2.0.0-rc.5","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-checkbox":"0.24.0-canary.b5e665a9.0","@material/mwc-radio":"0.24.0-canary.b5e665a9.0","@material/mwc-switch":"0.24.0-canary.b5e665a9.0","@material/rtl":"=13.0.0-canary.818f4ee93.0","@material/theme":"=13.0.0-canary.818f4ee93.0","@material/typography":"=13.0.0-canary.818f4ee93.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-formfield.scss"},"publishConfig":{"access":"public"},"gitHead":"1098b7010fbefe404afd06dfc30b7b30db59b092","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-web/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-web/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-web/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-web/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1098b7010fbefe404afd06dfc30b7b30db59b092/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1098b7010fbefe404afd06dfc30b7b30db59b092/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1098b7010fbefe404afd06dfc30b7b30db59b092/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1098b7010fbefe404afd06dfc30b7b30db59b092/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n|----  | -----------\n| `--mdc-typography-body2-<PROPERTY>` | Styles the typography of the formfield.\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.24.0-canary.b5e665a9.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-J7JiyVNlybw0RiD0UmykAWQiHix4EmhglHss5neuzJy0waS6/3lXr8Tu6rcQuvXXDRxlif+SKPiy6dn/5aaNKg==","shasum":"4e66934ff754cf7329afed55f4da16d4f09f07e7","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.24.0-canary.b5e665a9.0.tgz","fileCount":13,"unpackedSize":36000,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhQjefCRA9TVsSAnZWagAAaM0P/1dwSJr9K84MVhSbrkR2\n7bFehxJoL52C82dc9egLKKNkQNtFoOY8C51kqY0PKvmA814wN6nFrMyInyND\nMfIX4xumK3oAaqE0U5yT9CuP5wJ2LZNn7mgTv1tnt/BIm4sqnYEEZhaDe/cb\nexr7JGFLirkVBa0FhAPJT6Sp9JqWlkzs6vEmGye39E4EXyFJ+iTWsEtH2kCZ\ncQYb6JtpSkaoXlPNho9ff24noLTtcDn+KA93v0G/Vuhu/RpuNzWJc100eyhG\n6BeldE6vXPT9nCS0YyD5kCC4fZyUHohLFbZGzpYW2RoR60ZHls6+O3VsE+DP\nY6YSlela+uNNFDhC3k3wMBhVWi/y4x6Vvll2rUPYGCHObhao1fViK4PGSON7\nhBy/hqBRpFi2a5x595XZM7sULpey41R3fShxEHpCk07hSGzJnhEj1PjLZWhA\nhg4KX6oKc/SCNzGI5rS+qR4g0Y2C8HlDc+Pr7j9TIDN4LQD/5nX2FlFZGlIm\n801uReRN7TNeB47/T5sscqbwONIjWU+cGBkqvboZBpRLN0B1G3rOwA/vXhsK\nt1Wb5AbXs/ib8QqJM0df5ugqKB2KMlB7ic7UATWF0vd0US7dC7Ump0XnPm0U\nPbE+JO3rYdBJ8s9Qvztr4KKdqR1aDtOY34sqrUqGkcG9b+qSq08T4kMmEG9w\nM5nG\r\n=+zGY\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDBx6AfYZv7ueqdf2YlqkEzzYtTdfTUArdW9MJ8RRSQcgIgY3WWHJIdF27nYVT8bB8AWaPuUuIbASliW2liftsD7Zo="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"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"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-formfield_0.24.0-canary.b5e665a9.0_1631729567555_0.78064618155533"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.24.0-canary.ab1e177c.0":{"name":"@material/mwc-formfield","version":"0.24.0-canary.ab1e177c.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=13.0.0-canary.818f4ee93.0","@material/mwc-base":"0.24.0-canary.ab1e177c.0","lit-element":"3.0.0-rc.4","lit-html":"2.0.0-rc.5","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-checkbox":"0.24.0-canary.ab1e177c.0","@material/mwc-radio":"0.24.0-canary.ab1e177c.0","@material/mwc-switch":"0.24.0-canary.ab1e177c.0","@material/rtl":"=13.0.0-canary.818f4ee93.0","@material/theme":"=13.0.0-canary.818f4ee93.0","@material/typography":"=13.0.0-canary.818f4ee93.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-formfield.scss"},"publishConfig":{"access":"public"},"gitHead":"afc26bf1f2c64cbe713e03a55993e7844eac59b4","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-web/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-web/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-web/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-web/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/afc26bf1f2c64cbe713e03a55993e7844eac59b4/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/afc26bf1f2c64cbe713e03a55993e7844eac59b4/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/afc26bf1f2c64cbe713e03a55993e7844eac59b4/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/afc26bf1f2c64cbe713e03a55993e7844eac59b4/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n|----  | -----------\n| `--mdc-typography-body2-<PROPERTY>` | Styles the typography of the formfield.\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.24.0-canary.ab1e177c.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-y1RzePXMw+JB3/HsgZJRK5tGDKUDEZaqniDO2APJQ0nU2SWcSZxj6Hte6xHhsqtGsYT2yK0FuqmrcoVS0MrqvQ==","shasum":"af1b00d3d0fed6e187ed349abeb6d9bb71986c95","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.24.0-canary.ab1e177c.0.tgz","fileCount":13,"unpackedSize":36000,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhQj8ICRA9TVsSAnZWagAAtWcP/AhL9kvdad/X612XwEg+\nNpc/58SRZgxGv8D+WavIk4HAsuxHdtJ4UuJhKgUEmvCpmIQZVNjCz+qWDCbc\nevusE7/PvEOIeikRx0lbG9YILZoh8Q2wtHdx0Ot5+RttHp4r4K8ukhE+4NGc\ntiD1CnMN0lBgdSUIqfEwMIQx5+9RQ3xmTXuX9OWl6U7emEk8XBxVzKD/ulB7\n1wMNDdw2rWDgfEcYTLxg+T6BGoAlstnkU6T7t3h7fynLDbd6bIe+dzFiRXrJ\no+JxCSu+DAUafJK8sU8vgMb6Cs5/gmNkWUxc6wzx6AFcupM5Wd8jzhlzeI3X\n5mP+it9mUu65h7lDq5bAo6Nik+SkLolNEVNud/9BQlYWMKT28HwoImmLPem3\nS0AgVPfSQ5JxL9M/Lp+ix58wMFj24162tVFxVoJOtHNAMuKSfxYHCu/A5Iqc\nXpScygGdBTejpZ+dS54mTFvumObYiZ1fZjHVYA61RVQfrZAuzU4BWZLfLD4J\nDDP/7u7DeyWl5ipfC+3fcAYjLg0RSkBXUbLUqi1O4EP5GTIgE/0u0pKPwcBI\nL/l+i53iwipiLjFP3X01wKLkHCHHOB/0bsCjqezahrZk74ViROIoZWkWqNAW\ncZ4oZQjQrRfyTRyXJT7GByWfhD2KjyvX1lp0d5WredP60BN8bE9IntgFHfly\nbmbk\r\n=8vEu\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDTTrtcsqM7tgvfIYurL7OtrCi2yU/76Tbkp1lKoOXdbwIhAJpdW3Ij5zmPr7HkvG8RBvrTBzX2o/RdX39bhZX3cXJ6"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"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"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-formfield_0.24.0-canary.ab1e177c.0_1631731464018_0.972024658174873"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.24.0-canary.8dff8894.0":{"name":"@material/mwc-formfield","version":"0.24.0-canary.8dff8894.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=13.0.0-canary.818f4ee93.0","@material/mwc-base":"0.24.0-canary.8dff8894.0","lit-element":"3.0.0-rc.4","lit-html":"2.0.0-rc.5","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-checkbox":"0.24.0-canary.8dff8894.0","@material/mwc-radio":"0.24.0-canary.8dff8894.0","@material/mwc-switch":"0.24.0-canary.8dff8894.0","@material/rtl":"=13.0.0-canary.818f4ee93.0","@material/theme":"=13.0.0-canary.818f4ee93.0","@material/typography":"=13.0.0-canary.818f4ee93.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-formfield.scss"},"publishConfig":{"access":"public"},"gitHead":"bb2f0724a85956f5a92c61a18390b4616e0ce836","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-web/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-web/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-web/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-web/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/bb2f0724a85956f5a92c61a18390b4616e0ce836/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/bb2f0724a85956f5a92c61a18390b4616e0ce836/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/bb2f0724a85956f5a92c61a18390b4616e0ce836/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/bb2f0724a85956f5a92c61a18390b4616e0ce836/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n|----  | -----------\n| `--mdc-typography-body2-<PROPERTY>` | Styles the typography of the formfield.\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.24.0-canary.8dff8894.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-AHkr9/WU0UElrpkI5k+FYJItSbz4yiscbRbBXt6BABfZaygrlQYcSE31E5FQ8Iie9p/uZaMiWF2ilEZE19JQWw==","shasum":"9b9c684f6004f4cd774b371076f0e09274d7511a","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.24.0-canary.8dff8894.0.tgz","fileCount":13,"unpackedSize":36000,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhQkSbCRA9TVsSAnZWagAAMaAP/irm/1DyGC01kIxLT/bB\nmKB3yhni+EsElzuRJRYcgdhEwD7cChzKh+zMAu8MJn37vxSAE0bw52PeUHo4\n6iVjoqpzo/ovWfxSKbqIzLTAGYixuFiXZ6jBJVdek4gyZWA7il5dsZfvzk71\naMGVXwkbOFlfPM0nc2yThtzTreiXEY4moBCoD+p9tkkQ8tU18HkrH7Wnfihp\nRTjgVVhN9tj7eOi6bVkNY0g8Y4/1NndD93fHe4Qig6RWjlCWnuM6n9EI0mYW\nis3YfpMV/v3U1FYpE9wnQ+I2gQXlTy0qMzL+B6GjIwdpy9ajEW1pnQO3ykoE\nrV/lHkkAUSOGHmh9Xk8rldBTdc56i1qN98tt0RG+RwjDGJ5Fs3nkIMjvb+8l\nqX+LWFmmxt3J7BwLiyhppNnQWqYiiz70vPfmZKuqPb1zmGkGskdz7viHWCLK\nQrW4nR1r58EzKTvZWm8w7z5WbqSGqVXjt9cPW2zNIP1gSFA70zHb1e1Oayei\nT5YjRj3iLy+s6TJJQpnrwqdyTd1rpxvTNRQQYBcKlMNkgzK1LvPrEr6tmJVM\njVavxBlBYTiZCDwRfD5wJ6i5+NjITVBju2C5GpbKMsHYJBIoIX/7CkMJHWSF\nEwtqD2GaP9o99IrSiAUiPuCheJAUWLnE81eJUOBqWOwSK8tocQsmVcXh4UdS\nzBxq\r\n=rqEO\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCpIaaUJ3QxjqXtJSkgvha6IeaHfpcYf85a79VVnp424gIhAPSiRFTj3rcIYpgImnsXsT2+lzgMuSxxABU7fEcLLHUd"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"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"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-formfield_0.24.0-canary.8dff8894.0_1631732890964_0.7767389077101814"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.24.0-canary.9cd7e927.0":{"name":"@material/mwc-formfield","version":"0.24.0-canary.9cd7e927.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=13.0.0-canary.818f4ee93.0","@material/mwc-base":"0.24.0-canary.9cd7e927.0","lit-element":"3.0.0-rc.4","lit-html":"2.0.0-rc.5","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-checkbox":"0.24.0-canary.9cd7e927.0","@material/mwc-radio":"0.24.0-canary.9cd7e927.0","@material/mwc-switch":"0.24.0-canary.9cd7e927.0","@material/rtl":"=13.0.0-canary.818f4ee93.0","@material/theme":"=13.0.0-canary.818f4ee93.0","@material/typography":"=13.0.0-canary.818f4ee93.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-formfield.scss"},"publishConfig":{"access":"public"},"gitHead":"cdc8741747c55134790f2334cd48c000ef607804","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-web/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-web/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-web/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-web/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/cdc8741747c55134790f2334cd48c000ef607804/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/cdc8741747c55134790f2334cd48c000ef607804/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/cdc8741747c55134790f2334cd48c000ef607804/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/cdc8741747c55134790f2334cd48c000ef607804/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n|----  | -----------\n| `--mdc-typography-body2-<PROPERTY>` | Styles the typography of the formfield.\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.24.0-canary.9cd7e927.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-EZ6b8T4R9er/xwbc8GOQgqhK6u1H5adlrJUhr7DuP01dI6k5DqnKJMT/LY6oZ//vlxgV4/Xd9QLbaJAaEVk//w==","shasum":"5b0cbe5a50be905ee39eac52172039f3a0e6b221","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.24.0-canary.9cd7e927.0.tgz","fileCount":13,"unpackedSize":36000,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhQlgzCRA9TVsSAnZWagAA/yAP/0i805wk25crPViZaUg8\nKrKMyPNgkFVZvFFa0lqBo8XB76s+wsVP76pI67iNqGQOlLy7PC7GkN0mxM2R\neVSJ9ma4O2C4oxUg+0xzmuAv0dxyu2nMyey9dwJKnU/3Hb101ij3wFvIjWga\noLu8tf7nv3ysjdkorWwTmIjGWuo0zMhIuCQzcCBrgKlQtYlqKgcaHXMUwDbg\n0A955sCPhuC5gdqv3kd6ViRNK+jVU3ewKfdEogAdNHYNNyVUGNobrnoFUmCV\n2IfL/rlxrkFjsIhUK3CFW21rRXPUOEbNW1LLvs00sQOf/+T0w6KacTR3+YI6\nSxA8EhnHXe+QEI5ZWlZiB7rbJ6oJy4oedToCUknbQv+1k39ppxs9nDptdb2s\ni1XdrWHx4rX775ftcscUOgDG3OID8N/2Uivp3E3RxQPF4mZdtjhZQzP6Cf+l\nXYUDSTRyNndSiMMa8kTVX5NCmsEdhI8ehY9yZtk9OP7VECpOI2hiKTvzGk5I\ni7dzW79OYVh8NMhRZ+x7M+N/TmAJI6+g8SSdiSs4ehOO2ySgLP6FM5ei6hMD\nFz6Hf2mvc1EUkCPNu2Mzv+Yq5QUOF0COd3E5aubs+i21sgVXrqUg6cbuE/cb\nTaan41QJCRQLcsEY62FhOXThh78pZnf47he1TrspAPkHqK4z/aNOSXl3/X8V\nq9cn\r\n=qKE2\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD9SHeNFYFtD06aPb2GMRtbPYvpLEDJdpvVh90cCFa+MgIgVLNnPVgSFVn1PFnMO6g4gVOyYaLgoLEak5D6uBnkL74="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"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"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-formfield_0.24.0-canary.9cd7e927.0_1631737907625_0.3433826418192918"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.24.0-canary.a7132082.0":{"name":"@material/mwc-formfield","version":"0.24.0-canary.a7132082.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=13.0.0-canary.818f4ee93.0","@material/mwc-base":"0.24.0-canary.a7132082.0","lit-element":"3.0.0-rc.4","lit-html":"2.0.0-rc.5","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-checkbox":"0.24.0-canary.a7132082.0","@material/mwc-radio":"0.24.0-canary.a7132082.0","@material/mwc-switch":"0.24.0-canary.a7132082.0","@material/rtl":"=13.0.0-canary.818f4ee93.0","@material/theme":"=13.0.0-canary.818f4ee93.0","@material/typography":"=13.0.0-canary.818f4ee93.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-formfield.scss"},"publishConfig":{"access":"public"},"gitHead":"efa498c7c84be94afa4d7c50d5bc525723212e88","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-web/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-web/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-web/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-web/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/efa498c7c84be94afa4d7c50d5bc525723212e88/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/efa498c7c84be94afa4d7c50d5bc525723212e88/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/efa498c7c84be94afa4d7c50d5bc525723212e88/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/efa498c7c84be94afa4d7c50d5bc525723212e88/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n|----  | -----------\n| `--mdc-typography-body2-<PROPERTY>` | Styles the typography of the formfield.\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.24.0-canary.a7132082.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-OsDCfWMD1P8WbIYll+zlD719WI1cqN0lsQhlLNjFnQvW2aqHzsRqJr0yfpZlSR1JQjChKa9m9Hwf6JV5HUNYmQ==","shasum":"4eba60b1310164a9a0eb7c66d3ebb96afd6d2985","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.24.0-canary.a7132082.0.tgz","fileCount":13,"unpackedSize":36000,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhQmlsCRA9TVsSAnZWagAAgbwP/1IXIrhG1vWD5rkncwJ4\nBRGFamhstyF7+NQKS40HnKdUkRPpqpjeZBIoqbuu7Sdq0alUZGaxZp4KXoy4\nh5N+myTld+KQVPTmMtvBDRp6mapiJm9sUg09hUNVX3bR0uoUOZpLsKbT79S6\nTyKhbXZSD75BHG3MahKoyM5jLKFYuTZf94OgGI30Eq8pWVBzkW8KqurzxEIE\n2PrPpe1h1UPtbd0JA/s4yhnC/r1jZQfxySEzhj68HtVVcFUv1PktJ33Qb2II\nvMrKaBigFp8xfKtQX5aN7CUb44LfIvNoe/Z0fKpel/o6woOgNyusC4HEnpHE\nAy1krBgQBOqgrxQVEbLR+TIdlZeq/W7LE0/feXs8PHQmYskUAQ+MpXCegg1u\n+tfxFGpQ3JP8h+aaUCc9/sA51C8oUuZ30ehM3533tcfTYyW353t9MVpyyDug\ngPOKd3F2/mQ2EPJBSk1xHeC7cBaUhgCrPDHvgwKhQw+wQ7X7sfwgSNIqhkex\nKosxw32O/bEhAwI1ovKVi7OlGeIb4O/vT6eYdmuoul8FEQ+2ynbRjQRibf8e\nBo3WSo33H4kC+hgd6BMgyBzasVUTAzMSdJSNR/g3Vs1x+e3/3JVkHo6bxGjW\nkFAdeJ3r/OuwEFWc3To5xguBNlZTt2HD1UZoAhrZpXRtGSBJI6YD2f4ufpHJ\nz21Q\r\n=bOTf\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDiR8XcGV3/Ky9pFjTbxH2S+XVzlHTje5bpRP8Vd5BlsAiBRl9OtG4fubWis3OtC6MWQE2ocSU8vEzm8aeL4SnsiuA=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"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"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-formfield_0.24.0-canary.a7132082.0_1631742316534_0.5897445382057092"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.24.0-canary.cd9110cd.0":{"name":"@material/mwc-formfield","version":"0.24.0-canary.cd9110cd.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=13.0.0-canary.d4e16a6c4.0","@material/mwc-base":"0.24.0-canary.cd9110cd.0","lit-element":"3.0.0-rc.4","lit-html":"2.0.0-rc.5","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-checkbox":"0.24.0-canary.cd9110cd.0","@material/mwc-radio":"0.24.0-canary.cd9110cd.0","@material/mwc-switch":"0.24.0-canary.cd9110cd.0","@material/rtl":"=13.0.0-canary.d4e16a6c4.0","@material/theme":"=13.0.0-canary.d4e16a6c4.0","@material/typography":"=13.0.0-canary.d4e16a6c4.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-formfield.scss"},"publishConfig":{"access":"public"},"gitHead":"fe7dab0d93d6598d6a6c08de182cb7e3245f26b4","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-web/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-web/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-web/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-web/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/fe7dab0d93d6598d6a6c08de182cb7e3245f26b4/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/fe7dab0d93d6598d6a6c08de182cb7e3245f26b4/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/fe7dab0d93d6598d6a6c08de182cb7e3245f26b4/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/fe7dab0d93d6598d6a6c08de182cb7e3245f26b4/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n|----  | -----------\n| `--mdc-typography-body2-<PROPERTY>` | Styles the typography of the formfield.\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.24.0-canary.cd9110cd.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-acj7GXhcnpXOa6RP73ioVHClkOO0vsaeId7I0ySR++sqvlU696kLZdjZoJWvtN1Zpnz7ZM4/N8cxBWUAdYP3kg==","shasum":"cff585a17add0d0f078c16a84c780bd8d1f764f8","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.24.0-canary.cd9110cd.0.tgz","fileCount":13,"unpackedSize":36000,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhQ4KoCRA9TVsSAnZWagAAKOcP+wbpb5Ok8J/ydQkJYlmW\nAUhtSsLMiDBC/8F2k3YBrjWHrfhA8YP9U09rVrN6M7oqEAwdf9fKO7abkltO\nifFWquOotScs+c7+n9wUUE/Q83YFVBCfN4/eKjYCuqxg6V6AQBLlocwDtasc\nSqDD2Nx4k1kDY5hXVAVE8zr+GlDd/tuIhskHGybxGBKUBMr3DRJqterZ6FJi\nP6d6Sja6W+L1RF6qadSU4g3MZHOTrJBSpeJUAkhxqSdoHBVQ0AwLleD84lCR\n23SeTD99rcOWfwcKZ8UWQAIza2M4uIlsVFqtbIce+/B/FceAtb5EczhJOIRR\nI+X3UXcNgEs3Qik8QowtH3nfEyhGnUF+Ebp3lYFm3/hy2vE3Hwa/qjcBYVad\nKRopZWUmnRsrw2K3dk1W07cKDeap3GZrnDGQMq512CFSptEwN1gtJyMCdOHs\nZlUaFd1R0PKMC0R1PfgS6rIzcELwvVkN71+bNRYJ6squByu/WBpO+mITj1aX\njOYVDcV9Ubr9bDXcTgxDuMtTsRJX9GMeCr2K73wWe9JntqnX24pBArXz49s4\nc0/CjNx1doHyd99FX8OpioOdroR+POECqzSDJiuLn+Q4f/jxLzwXgWq2vhkY\nDaLODI2TvCDaYk6iLW+qKoi4tfVLgFCQKG6yRaB+x8uJIMnW9oo97CxVfBaQ\na1xv\r\n=K+pq\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDYM9/A5jGM2Pje0fnslQZMHJku60ihlJOa/xIOyY9a4AiEA7C4RBOXrADZKQG/Bkj2bRsQECy63zZTawAWwO9r88aA="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"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"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-formfield_0.24.0-canary.cd9110cd.0_1631814312045_0.1549279272127082"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.24.0-canary.1e5a9883.0":{"name":"@material/mwc-formfield","version":"0.24.0-canary.1e5a9883.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=13.0.0-canary.d4e16a6c4.0","@material/mwc-base":"0.24.0-canary.1e5a9883.0","lit-element":"3.0.0-rc.4","lit-html":"2.0.0-rc.5","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-checkbox":"0.24.0-canary.1e5a9883.0","@material/mwc-radio":"0.24.0-canary.1e5a9883.0","@material/mwc-switch":"0.24.0-canary.1e5a9883.0","@material/rtl":"=13.0.0-canary.d4e16a6c4.0","@material/theme":"=13.0.0-canary.d4e16a6c4.0","@material/typography":"=13.0.0-canary.d4e16a6c4.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-formfield.scss"},"publishConfig":{"access":"public"},"gitHead":"5b1cd8120da2d6449203e71bb01079f709aa19bd","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-web/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-web/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-web/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-web/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5b1cd8120da2d6449203e71bb01079f709aa19bd/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5b1cd8120da2d6449203e71bb01079f709aa19bd/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5b1cd8120da2d6449203e71bb01079f709aa19bd/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5b1cd8120da2d6449203e71bb01079f709aa19bd/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n|----  | -----------\n| `--mdc-typography-body2-<PROPERTY>` | Styles the typography of the formfield.\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.24.0-canary.1e5a9883.0","_nodeVersion":"14.17.6","_npmVersion":"lerna/3.22.1/node@v14.17.6+x64 (linux)","dist":{"integrity":"sha512-XBakEwGxWrOdb6m7EumjUo/4jsh+dFxNOIiId8YBzwg7JiGICiJkJhwbTTbxub4AfjAbCCRaPM+95UNIJJL6+Q==","shasum":"a9503d5c5c324b6430f7cddc3667ea1f9eb3d599","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.24.0-canary.1e5a9883.0.tgz","fileCount":13,"unpackedSize":36000,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC1Q6MO8YUMAfHm0t8aBxE4EJiOFY6BYk5FKoaibTB3UQIhAIdlqk6UupyuUDc+iMsYcbOXjto6x7bNpJCPl0YxhV7r"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"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"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-formfield_0.24.0-canary.1e5a9883.0_1631911131710_0.4362324274312035"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.24.0-canary.32c830ee.0":{"name":"@material/mwc-formfield","version":"0.24.0-canary.32c830ee.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=13.0.0-canary.65125b3a6.0","@material/mwc-base":"0.24.0-canary.32c830ee.0","lit-element":"3.0.0-rc.4","lit-html":"2.0.0-rc.5","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-checkbox":"0.24.0-canary.32c830ee.0","@material/mwc-radio":"0.24.0-canary.32c830ee.0","@material/mwc-switch":"0.24.0-canary.32c830ee.0","@material/rtl":"=13.0.0-canary.65125b3a6.0","@material/theme":"=13.0.0-canary.65125b3a6.0","@material/typography":"=13.0.0-canary.65125b3a6.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-formfield.scss"},"publishConfig":{"access":"public"},"gitHead":"72f380d7ef6cb00e8a03c42048cbf0cc09820ae9","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-web/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-web/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-web/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-web/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/72f380d7ef6cb00e8a03c42048cbf0cc09820ae9/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/72f380d7ef6cb00e8a03c42048cbf0cc09820ae9/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/72f380d7ef6cb00e8a03c42048cbf0cc09820ae9/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/72f380d7ef6cb00e8a03c42048cbf0cc09820ae9/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n|----  | -----------\n| `--mdc-typography-body2-<PROPERTY>` | Styles the typography of the formfield.\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.24.0-canary.32c830ee.0","_nodeVersion":"14.17.6","_npmVersion":"lerna/3.22.1/node@v14.17.6+x64 (linux)","dist":{"integrity":"sha512-EVqXqoJRLqkAWg+su09q4plfBP8xlXi2pBCHXFcUMjrQ983ahPbTZ5w3uRb+d/QrmcaMHMEbMLumym4mV/tHew==","shasum":"e3073d67a2b877f67b1dabdadcbbd107d365ee1e","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.24.0-canary.32c830ee.0.tgz","fileCount":13,"unpackedSize":36000,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDhscRwEPtskOlPvqZkaDOiuzdcbgfMgO/4IhVLgJTv7wIhAJBU9IMc6Fj5LvW2hp7byyS0+Y2fpUIvJ5JmCCiCkdmz"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"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"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-formfield_0.24.0-canary.32c830ee.0_1631920108025_0.36906167394097333"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.24.0-canary.1de87bb7.0":{"name":"@material/mwc-formfield","version":"0.24.0-canary.1de87bb7.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=13.0.0-canary.65125b3a6.0","@material/mwc-base":"0.24.0-canary.1de87bb7.0","lit-element":"3.0.0-rc.4","lit-html":"2.0.0-rc.5","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-checkbox":"0.24.0-canary.1de87bb7.0","@material/mwc-radio":"0.24.0-canary.1de87bb7.0","@material/mwc-switch":"0.24.0-canary.1de87bb7.0","@material/rtl":"=13.0.0-canary.65125b3a6.0","@material/theme":"=13.0.0-canary.65125b3a6.0","@material/typography":"=13.0.0-canary.65125b3a6.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-formfield.scss"},"publishConfig":{"access":"public"},"gitHead":"a3215ff82b8bd0ba323b98cc29ed77fca57b8643","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-web/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-web/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-web/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-web/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a3215ff82b8bd0ba323b98cc29ed77fca57b8643/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a3215ff82b8bd0ba323b98cc29ed77fca57b8643/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a3215ff82b8bd0ba323b98cc29ed77fca57b8643/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a3215ff82b8bd0ba323b98cc29ed77fca57b8643/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n|----  | -----------\n| `--mdc-typography-body2-<PROPERTY>` | Styles the typography of the formfield.\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.24.0-canary.1de87bb7.0","_nodeVersion":"14.17.6","_npmVersion":"lerna/3.22.1/node@v14.17.6+x64 (linux)","dist":{"integrity":"sha512-hzQadNqGuAgFWgDuLZhXJ37dc5o3m7BIbxvaRZCZUPnNsn9lDMIROsAsCAM15WtnrF0dKxB0X3SiVnQUm8uIHw==","shasum":"e3d8507a8a08754fd633ff6220a91e61d8833c8b","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.24.0-canary.1de87bb7.0.tgz","fileCount":13,"unpackedSize":36000,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDxaLveMIyGYsB4K2gqVEsVrMrTU31UNreb3LqQssPPJQIgHsxowzFIa9NZqUMGzlskBKwnI2HPk/ZSSl9e+sut1rw="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"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"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-formfield_0.24.0-canary.1de87bb7.0_1631991114291_0.5754754225346521"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.24.0-canary.f2ea80c4.0":{"name":"@material/mwc-formfield","version":"0.24.0-canary.f2ea80c4.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=13.0.0-canary.65125b3a6.0","@material/mwc-base":"0.24.0-canary.f2ea80c4.0","lit-element":"3.0.0-rc.4","lit-html":"2.0.0-rc.5","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-checkbox":"0.24.0-canary.f2ea80c4.0","@material/mwc-radio":"0.24.0-canary.f2ea80c4.0","@material/mwc-switch":"0.24.0-canary.f2ea80c4.0","@material/rtl":"=13.0.0-canary.65125b3a6.0","@material/theme":"=13.0.0-canary.65125b3a6.0","@material/typography":"=13.0.0-canary.65125b3a6.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-formfield.scss"},"publishConfig":{"access":"public"},"gitHead":"be75dd39a03705b3cc24c5614f2c7f2be7c3c93e","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-web/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-web/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-web/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-web/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/be75dd39a03705b3cc24c5614f2c7f2be7c3c93e/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/be75dd39a03705b3cc24c5614f2c7f2be7c3c93e/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/be75dd39a03705b3cc24c5614f2c7f2be7c3c93e/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/be75dd39a03705b3cc24c5614f2c7f2be7c3c93e/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n|----  | -----------\n| `--mdc-typography-body2-<PROPERTY>` | Styles the typography of the formfield.\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.24.0-canary.f2ea80c4.0","_nodeVersion":"14.17.6","_npmVersion":"lerna/3.22.1/node@v14.17.6+x64 (linux)","dist":{"integrity":"sha512-yVmF7qWsw1GGlpi7O2XmH19E0vctfd1QNeEGHPRmj35Q96f5c+/lTrHdEc77JfDva9/oS6/N82vuf3Gmf8S7RA==","shasum":"136311e088ece3eace209b492e53ff5cc9230fb7","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.24.0-canary.f2ea80c4.0.tgz","fileCount":13,"unpackedSize":36000,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCWNcMdWYYV92IK/wovlEaHurBkrQ57OVIsZ4sr6PMWfwIgECObkwY6f8MowZbs+WthQBpvpyhiUBNyygb4X/zmyjY="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"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"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-formfield_0.24.0-canary.f2ea80c4.0_1632160478860_0.6285766874644052"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.24.0-canary.569d739f.0":{"name":"@material/mwc-formfield","version":"0.24.0-canary.569d739f.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=13.0.0-canary.65125b3a6.0","@material/mwc-base":"0.24.0-canary.569d739f.0","lit-element":"3.0.0-rc.4","lit-html":"2.0.0-rc.5","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-checkbox":"0.24.0-canary.569d739f.0","@material/mwc-radio":"0.24.0-canary.569d739f.0","@material/mwc-switch":"0.24.0-canary.569d739f.0","@material/rtl":"=13.0.0-canary.65125b3a6.0","@material/theme":"=13.0.0-canary.65125b3a6.0","@material/typography":"=13.0.0-canary.65125b3a6.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-formfield.scss"},"publishConfig":{"access":"public"},"gitHead":"c2e841aead340c043b080dc4718873a82f109450","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-web/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-web/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-web/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-web/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c2e841aead340c043b080dc4718873a82f109450/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c2e841aead340c043b080dc4718873a82f109450/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c2e841aead340c043b080dc4718873a82f109450/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c2e841aead340c043b080dc4718873a82f109450/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n|----  | -----------\n| `--mdc-typography-body2-<PROPERTY>` | Styles the typography of the formfield.\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.24.0-canary.569d739f.0","_nodeVersion":"14.17.6","_npmVersion":"lerna/3.22.1/node@v14.17.6+x64 (linux)","dist":{"integrity":"sha512-5wOqacRbJeyxX5FUW+WZ6/QYyDHqTch+dNwNC3Nu7h+tAe2cSvbt7VmvfNt/8kJmBkUp9Fhxr861HDrAVioqDA==","shasum":"ea67c4321bc672f1dbfa836841f074ee4f1bf1bc","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.24.0-canary.569d739f.0.tgz","fileCount":13,"unpackedSize":36000,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICdcZUOyEN6D51kXuCr9ESTIrPwI6HbqqZ0eFgeWpapHAiEAyU7pk9API0rlhionQjv4tuAn28EyG14ZgeRf2q8DE9k="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"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"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-formfield_0.24.0-canary.569d739f.0_1632173002625_0.05887156426710738"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.24.0-canary.5a434a50.0":{"name":"@material/mwc-formfield","version":"0.24.0-canary.5a434a50.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=13.0.0-canary.65125b3a6.0","@material/mwc-base":"0.24.0-canary.5a434a50.0","lit-element":"^3.0.0","lit-html":"^2.0.0","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-checkbox":"0.24.0-canary.5a434a50.0","@material/mwc-radio":"0.24.0-canary.5a434a50.0","@material/mwc-switch":"0.24.0-canary.5a434a50.0","@material/rtl":"=13.0.0-canary.65125b3a6.0","@material/theme":"=13.0.0-canary.65125b3a6.0","@material/typography":"=13.0.0-canary.65125b3a6.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-formfield.scss"},"publishConfig":{"access":"public"},"gitHead":"7f2821932d60f65ba8b79446374be9a66f009858","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-web/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-web/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-web/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-web/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7f2821932d60f65ba8b79446374be9a66f009858/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7f2821932d60f65ba8b79446374be9a66f009858/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7f2821932d60f65ba8b79446374be9a66f009858/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7f2821932d60f65ba8b79446374be9a66f009858/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n|----  | -----------\n| `--mdc-typography-body2-<PROPERTY>` | Styles the typography of the formfield.\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.24.0-canary.5a434a50.0","_nodeVersion":"14.17.6","_npmVersion":"lerna/3.22.1/node@v14.17.6+x64 (linux)","dist":{"integrity":"sha512-ES5l8KxHVVxqkZYnibb4ZUyW9BTzhxFLhNj57ovm4fIIa1igdaaYZWf3vSSjfzdxbxRjyysD2STJ0/AFfvXvVw==","shasum":"a617e049ce03e11770c146ad5203e7a881c0d3ae","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.24.0-canary.5a434a50.0.tgz","fileCount":13,"unpackedSize":35992,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCUMMgfkLysINrkXy18xJUD9msmuCmC9kSS+P4Dp83eLgIhAPDHQDc/DhjaKA0DYCqe4doB9EMqJEJ5op9RyQ8VdhDU"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"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"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-formfield_0.24.0-canary.5a434a50.0_1632189621264_0.1211691338632539"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.6be1a13e.0":{"name":"@material/mwc-formfield","version":"0.26.0-canary.6be1a13e.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=13.0.0-canary.65125b3a6.0","@material/mwc-base":"0.26.0-canary.6be1a13e.0","lit-element":"^3.0.0","lit-html":"^2.0.0","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-checkbox":"0.26.0-canary.6be1a13e.0","@material/mwc-radio":"0.26.0-canary.6be1a13e.0","@material/mwc-switch":"0.26.0-canary.6be1a13e.0","@material/rtl":"=13.0.0-canary.65125b3a6.0","@material/theme":"=13.0.0-canary.65125b3a6.0","@material/typography":"=13.0.0-canary.65125b3a6.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-formfield.scss"},"publishConfig":{"access":"public"},"gitHead":"3ceaeaa7e4bf1c68a18e69c841acf156afc64dc3","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-web/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-web/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-web/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-web/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3ceaeaa7e4bf1c68a18e69c841acf156afc64dc3/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3ceaeaa7e4bf1c68a18e69c841acf156afc64dc3/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3ceaeaa7e4bf1c68a18e69c841acf156afc64dc3/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3ceaeaa7e4bf1c68a18e69c841acf156afc64dc3/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n|----  | -----------\n| `--mdc-typography-body2-<PROPERTY>` | Styles the typography of the formfield.\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.26.0-canary.6be1a13e.0","_nodeVersion":"14.17.6","_npmVersion":"lerna/3.22.1/node@v14.17.6+x64 (linux)","dist":{"integrity":"sha512-4o1b4tNDGRV8pbwQk+woyAg/0hI8xHqXH34VPnqbBMCnDoBs0YKztNJRbmolMWCWCl673KKjNdZhQ0nWRKJydQ==","shasum":"09c3fbfa3330592ea7e9a2fdc50ce7f77487d871","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.26.0-canary.6be1a13e.0.tgz","fileCount":13,"unpackedSize":35992,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIB/Nz/m+dMVBpyz3s+lsuoZM6csjh1ggvjRcfIv+B53iAiEAp7ifZtSAb7mSaOqOjZbxHCaanCxMM3ECG9v2wr/qr9g="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"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"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-formfield_0.26.0-canary.6be1a13e.0_1632192778701_0.05305732991562628"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.b1c1ab52.0":{"name":"@material/mwc-formfield","version":"0.26.0-canary.b1c1ab52.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=13.0.0-canary.65125b3a6.0","@material/mwc-base":"0.26.0-canary.b1c1ab52.0","lit-element":"^3.0.0","lit-html":"^2.0.0","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-checkbox":"0.26.0-canary.b1c1ab52.0","@material/mwc-radio":"0.26.0-canary.b1c1ab52.0","@material/mwc-switch":"0.26.0-canary.b1c1ab52.0","@material/rtl":"=13.0.0-canary.65125b3a6.0","@material/theme":"=13.0.0-canary.65125b3a6.0","@material/typography":"=13.0.0-canary.65125b3a6.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-formfield.scss"},"publishConfig":{"access":"public"},"gitHead":"320a093b73bd45cc5fa68abda305913c26c72310","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-web/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-web/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-web/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-web/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/320a093b73bd45cc5fa68abda305913c26c72310/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/320a093b73bd45cc5fa68abda305913c26c72310/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/320a093b73bd45cc5fa68abda305913c26c72310/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/320a093b73bd45cc5fa68abda305913c26c72310/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n|----  | -----------\n| `--mdc-typography-body2-<PROPERTY>` | Styles the typography of the formfield.\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.26.0-canary.b1c1ab52.0","_nodeVersion":"14.17.6","_npmVersion":"lerna/3.22.1/node@v14.17.6+x64 (linux)","dist":{"integrity":"sha512-wxm7S2D8QU9V1wqkrP7HEbGm2n7Y2hA9eLyTgH5HPStMRl6T3F/BUW7zshwZEQvKbly4lt5flxRNGsTBc4YfyA==","shasum":"5de38149eeb56cb13af8fdc49851f81a2d5bd56e","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.26.0-canary.b1c1ab52.0.tgz","fileCount":13,"unpackedSize":35992,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDQ5TM5SLRWn+hheMYJXZwRLvwNWUQnZScPoinEqpU2RwIgCBM+/Th1xnqSB6v6u/ZIaRfxF6KYBleAvbKcr+MRmPA="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"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"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-formfield_0.26.0-canary.b1c1ab52.0_1632193916007_0.9648934190252338"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.25.1":{"name":"@material/mwc-formfield","version":"0.25.1","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=13.0.0-canary.65125b3a6.0","@material/mwc-base":"^0.25.1","lit-element":"^3.0.0","lit-html":"^2.0.0","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-checkbox":"^0.25.1","@material/mwc-radio":"^0.25.1","@material/mwc-switch":"^0.25.1","@material/rtl":"=13.0.0-canary.65125b3a6.0","@material/theme":"=13.0.0-canary.65125b3a6.0","@material/typography":"=13.0.0-canary.65125b3a6.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-formfield.scss"},"publishConfig":{"access":"public"},"gitHead":"b1c1ab5230f56f6bce405387b9c75cc7111cacc2","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.25.1","_nodeVersion":"16.9.1","_npmVersion":"lerna/3.22.1/node@v16.9.1+x64 (darwin)","dist":{"integrity":"sha512-CkVUjSZAL50vtSjvtKSebflRICsdAzbQ0j6mooITp7N+M2TgCInVAdvQ4YViZN54aWtgVAVxcNPXqUdHKrohQw==","shasum":"06a227b2d6056ff2f05a3b98085eed5cdd7f427d","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.25.1.tgz","fileCount":16,"unpackedSize":43262,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHezMC43xtuVMfUKSGNn6BKD9luaVAp/096cNipkHHvbAiEAoXlD/V2C12IyT/YYq3W590IfrcTLiMeNOaUk7BGmSUQ="}]},"_npmUser":{"name":"emarquez","email":"emarquez@google.com"},"directories":{},"maintainers":[{"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"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-formfield_0.25.1_1632193958616_0.32506275651978966"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.ae060177.0":{"name":"@material/mwc-formfield","version":"0.26.0-canary.ae060177.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=13.0.0-canary.65125b3a6.0","@material/mwc-base":"0.26.0-canary.ae060177.0","lit-element":"^3.0.0","lit-html":"^2.0.0","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-checkbox":"0.26.0-canary.ae060177.0","@material/mwc-radio":"0.26.0-canary.ae060177.0","@material/mwc-switch":"0.26.0-canary.ae060177.0","@material/rtl":"=13.0.0-canary.65125b3a6.0","@material/theme":"=13.0.0-canary.65125b3a6.0","@material/typography":"=13.0.0-canary.65125b3a6.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-formfield.scss"},"publishConfig":{"access":"public"},"gitHead":"b919ae5340a9ffc926d328999cc5fe5704922e40","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-web/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-web/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-web/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-web/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b919ae5340a9ffc926d328999cc5fe5704922e40/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b919ae5340a9ffc926d328999cc5fe5704922e40/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b919ae5340a9ffc926d328999cc5fe5704922e40/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b919ae5340a9ffc926d328999cc5fe5704922e40/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n|----  | -----------\n| `--mdc-typography-body2-<PROPERTY>` | Styles the typography of the formfield.\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.26.0-canary.ae060177.0","_nodeVersion":"14.17.6","_npmVersion":"lerna/3.22.1/node@v14.17.6+x64 (linux)","dist":{"integrity":"sha512-4QKetps/qF0Xfi5HWEaw648xQB7zvi0rgeIjAhNLMDGVeYW8EjkZ4FJ5v+NGHHuvDIFw3hSwQ106ez+tasUddA==","shasum":"d35f793fafc277bb8f8791b43e8d5a6071ead300","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.26.0-canary.ae060177.0.tgz","fileCount":13,"unpackedSize":35992,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHveS8evk1QSlG/pEBQbQACcW+HRayK9q67EgmTI4Q6OAiA4vF17GXGeyFCbQXC9hVwIS/iHfPGI2V6JLNRmHaTjlw=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"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"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-formfield_0.26.0-canary.ae060177.0_1632235070958_0.7896928265034744"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.b6fe2a12.0":{"name":"@material/mwc-formfield","version":"0.26.0-canary.b6fe2a12.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=13.0.0-canary.65125b3a6.0","@material/mwc-base":"0.26.0-canary.b6fe2a12.0","lit-element":"^3.0.0","lit-html":"^2.0.0","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-checkbox":"0.26.0-canary.b6fe2a12.0","@material/mwc-radio":"0.26.0-canary.b6fe2a12.0","@material/mwc-switch":"0.26.0-canary.b6fe2a12.0","@material/rtl":"=13.0.0-canary.65125b3a6.0","@material/theme":"=13.0.0-canary.65125b3a6.0","@material/typography":"=13.0.0-canary.65125b3a6.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-formfield.scss"},"publishConfig":{"access":"public"},"gitHead":"06feede8e75d655952f3a43b5c971276c26fe92e","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-web/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-web/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-web/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-web/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/06feede8e75d655952f3a43b5c971276c26fe92e/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/06feede8e75d655952f3a43b5c971276c26fe92e/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/06feede8e75d655952f3a43b5c971276c26fe92e/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/06feede8e75d655952f3a43b5c971276c26fe92e/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n|----  | -----------\n| `--mdc-typography-body2-<PROPERTY>` | Styles the typography of the formfield.\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.26.0-canary.b6fe2a12.0","_nodeVersion":"14.17.6","_npmVersion":"lerna/3.22.1/node@v14.17.6+x64 (linux)","dist":{"integrity":"sha512-/yxlSomdG0KmmQMalxCDuaA7sCPuEhkf0L5BGTz1fHvy4JPsqpZbnrWeo/leQiXrIGNhFjwRDXdYsDG7VVg06Q==","shasum":"8c6bc3ed341a2b5eca8edb4fe68d7f5f05db0651","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.26.0-canary.b6fe2a12.0.tgz","fileCount":13,"unpackedSize":35992,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCCXNwyZFg5QrtNC7zzdOW+D1Nr+/s2R9QlW4WntZPwzwIgQO+9AXHQyAoCDwu0lZoLT6bEapBQeUaMZmzt8KgyJZU="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"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"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-formfield_0.26.0-canary.b6fe2a12.0_1632341760899_0.990139822284575"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.07e91417.0":{"name":"@material/mwc-formfield","version":"0.26.0-canary.07e91417.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=13.0.0-canary.65125b3a6.0","@material/mwc-base":"0.26.0-canary.07e91417.0","lit-element":"^3.0.0","lit-html":"^2.0.0","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-checkbox":"0.26.0-canary.07e91417.0","@material/mwc-radio":"0.26.0-canary.07e91417.0","@material/mwc-switch":"0.26.0-canary.07e91417.0","@material/rtl":"=13.0.0-canary.65125b3a6.0","@material/theme":"=13.0.0-canary.65125b3a6.0","@material/typography":"=13.0.0-canary.65125b3a6.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-formfield.scss"},"publishConfig":{"access":"public"},"gitHead":"9fcacc1890992ebd650dca508478ea3a276a1ebe","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-web/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-web/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-web/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-web/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9fcacc1890992ebd650dca508478ea3a276a1ebe/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9fcacc1890992ebd650dca508478ea3a276a1ebe/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9fcacc1890992ebd650dca508478ea3a276a1ebe/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9fcacc1890992ebd650dca508478ea3a276a1ebe/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n|----  | -----------\n| `--mdc-typography-body2-<PROPERTY>` | Styles the typography of the formfield.\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.26.0-canary.07e91417.0","_nodeVersion":"14.17.6","_npmVersion":"lerna/3.22.1/node@v14.17.6+x64 (linux)","dist":{"integrity":"sha512-eQSWQmb3baQ7dnNKbGwuZfqjNG68f9C8EQmdnXvKOyqQRcjX89QWN8TYUoTNZX6tSZ7ARlaliJ471Igm6fA33Q==","shasum":"8ef806f9199ee573bd7a2a5f3f5e7a5e49a6b093","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.26.0-canary.07e91417.0.tgz","fileCount":13,"unpackedSize":35992,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBSJsG5rVcWYx3i/3JkEQ6mKH7dYDAzoZZgUEKpZcWMYAiEAqU5w+EM74saHzUw7PdSVOYGEkMisZkG0Hv+pSa5HtmA="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"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"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-formfield_0.26.0-canary.07e91417.0_1632344728179_0.7450409527889652"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.e2203ffa.0":{"name":"@material/mwc-formfield","version":"0.26.0-canary.e2203ffa.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=13.0.0-canary.65125b3a6.0","@material/mwc-base":"0.26.0-canary.e2203ffa.0","lit-element":"^3.0.0","lit-html":"^2.0.0","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-checkbox":"0.26.0-canary.e2203ffa.0","@material/mwc-radio":"0.26.0-canary.e2203ffa.0","@material/mwc-switch":"0.26.0-canary.e2203ffa.0","@material/rtl":"=13.0.0-canary.65125b3a6.0","@material/theme":"=13.0.0-canary.65125b3a6.0","@material/typography":"=13.0.0-canary.65125b3a6.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-formfield.scss"},"publishConfig":{"access":"public"},"gitHead":"dccbe3e93b2694b3336adcf33188115ced04a52e","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-web/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-web/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-web/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-web/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/dccbe3e93b2694b3336adcf33188115ced04a52e/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/dccbe3e93b2694b3336adcf33188115ced04a52e/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/dccbe3e93b2694b3336adcf33188115ced04a52e/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/dccbe3e93b2694b3336adcf33188115ced04a52e/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n|----  | -----------\n| `--mdc-typography-body2-<PROPERTY>` | Styles the typography of the formfield.\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.26.0-canary.e2203ffa.0","_nodeVersion":"14.17.6","_npmVersion":"lerna/3.22.1/node@v14.17.6+x64 (linux)","dist":{"integrity":"sha512-LuHQS+v8J0XqQv80BD5HhwzZoIHdycfSvRm4jMKuYDfGywVpDrTsEOKj+hw+Q6EvpUxqrrz6wwQw50KTq32W1A==","shasum":"5494d0ca0db0094d56b4c8c9143c23a94040c5b0","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.26.0-canary.e2203ffa.0.tgz","fileCount":13,"unpackedSize":35992,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICjyvd0b/y7o9nIcWfkySjwkf5cQIhNm9PFL7UIIOECNAiAWdqp1hVluV2zO7M7en8x+G/0atuqSj0O36TAcogDBNQ=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"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"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-formfield_0.26.0-canary.e2203ffa.0_1632421639939_0.11226992516921053"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.4abe237e.0":{"name":"@material/mwc-formfield","version":"0.26.0-canary.4abe237e.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=13.0.0-canary.c79aa0cdd.0","@material/mwc-base":"0.26.0-canary.4abe237e.0","lit-element":"^3.0.0","lit-html":"^2.0.0","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-checkbox":"0.26.0-canary.4abe237e.0","@material/mwc-radio":"0.26.0-canary.4abe237e.0","@material/mwc-switch":"0.26.0-canary.4abe237e.0","@material/rtl":"=13.0.0-canary.c79aa0cdd.0","@material/theme":"=13.0.0-canary.c79aa0cdd.0","@material/typography":"=13.0.0-canary.c79aa0cdd.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-formfield.scss"},"publishConfig":{"access":"public"},"gitHead":"c0c828f0240aea9472d319d4a1bb77871c960873","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-web/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-web/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-web/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-web/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c0c828f0240aea9472d319d4a1bb77871c960873/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c0c828f0240aea9472d319d4a1bb77871c960873/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c0c828f0240aea9472d319d4a1bb77871c960873/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c0c828f0240aea9472d319d4a1bb77871c960873/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n|----  | -----------\n| `--mdc-typography-body2-<PROPERTY>` | Styles the typography of the formfield.\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.26.0-canary.4abe237e.0","_nodeVersion":"14.17.6","_npmVersion":"lerna/3.22.1/node@v14.17.6+x64 (linux)","dist":{"integrity":"sha512-LD4f2z3Gnev+lMcvRq7ecU4WhBewmHlOBieWk1m6B/LuKbbkdO5bJLmiSbQe2rD3iCh/yGLaIVM/LTNKS3TyaQ==","shasum":"a6cfd93d159437f2548babb2ec4c45eec3af3ad0","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.26.0-canary.4abe237e.0.tgz","fileCount":13,"unpackedSize":35992,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEyZ0NYH+3iyifaNmxRWG5iBwzDzsr0fYOhzmd18wcrzAiBgydNmHD+o/cUrqDir6KvGvdEJNVEDj+5l64AaKChK2Q=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"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"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-formfield_0.26.0-canary.4abe237e.0_1632504650854_0.1403547039210753"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.6278ee5d.0":{"name":"@material/mwc-formfield","version":"0.26.0-canary.6278ee5d.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=13.0.0-canary.c79aa0cdd.0","@material/mwc-base":"0.26.0-canary.6278ee5d.0","lit":"^2.0.0","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-checkbox":"0.26.0-canary.6278ee5d.0","@material/mwc-radio":"0.26.0-canary.6278ee5d.0","@material/mwc-switch":"0.26.0-canary.6278ee5d.0","@material/rtl":"=13.0.0-canary.c79aa0cdd.0","@material/theme":"=13.0.0-canary.c79aa0cdd.0","@material/typography":"=13.0.0-canary.c79aa0cdd.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-formfield.scss"},"publishConfig":{"access":"public"},"gitHead":"85137ac5f9a59dd64512524f380c65b268a2344f","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-web/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-web/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-web/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-web/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/85137ac5f9a59dd64512524f380c65b268a2344f/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/85137ac5f9a59dd64512524f380c65b268a2344f/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/85137ac5f9a59dd64512524f380c65b268a2344f/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/85137ac5f9a59dd64512524f380c65b268a2344f/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n|----  | -----------\n| `--mdc-typography-body2-<PROPERTY>` | Styles the typography of the formfield.\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.26.0-canary.6278ee5d.0","_nodeVersion":"14.17.6","_npmVersion":"lerna/3.22.1/node@v14.17.6+x64 (linux)","dist":{"integrity":"sha512-TDBG/YFpBQpBmL1+W6LaHTn/2lqRGjm0cNLtHZNRWTAYtee2bfQdcjaZ+4QKec81WR41C/qTTxBlYm/yZZ2N+w==","shasum":"fa1edd943839e43a5632f02dab124d770a47df87","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.26.0-canary.6278ee5d.0.tgz","fileCount":13,"unpackedSize":36042,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBLEfKjiUmy11hPVFztQWbdB2n0QN4a/ubG0UJKQ8kynAiBO0Pl0A8KG4sFB/Re2++fVJTJGEpjo+JiP/4ccMQ/hPA=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"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"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-formfield_0.26.0-canary.6278ee5d.0_1632767466153_0.8066424625669324"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.3a5d5f34.0":{"name":"@material/mwc-formfield","version":"0.26.0-canary.3a5d5f34.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=13.0.0-canary.c79aa0cdd.0","@material/mwc-base":"0.26.0-canary.3a5d5f34.0","lit":"^2.0.0","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-checkbox":"0.26.0-canary.3a5d5f34.0","@material/mwc-radio":"0.26.0-canary.3a5d5f34.0","@material/mwc-switch":"0.26.0-canary.3a5d5f34.0","@material/rtl":"=13.0.0-canary.c79aa0cdd.0","@material/theme":"=13.0.0-canary.c79aa0cdd.0","@material/typography":"=13.0.0-canary.c79aa0cdd.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-formfield.scss"},"publishConfig":{"access":"public"},"gitHead":"0708ad010478b6186d6be52d3494f33bd4d40e17","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-web/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-web/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-web/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-web/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0708ad010478b6186d6be52d3494f33bd4d40e17/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0708ad010478b6186d6be52d3494f33bd4d40e17/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0708ad010478b6186d6be52d3494f33bd4d40e17/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0708ad010478b6186d6be52d3494f33bd4d40e17/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n|----  | -----------\n| `--mdc-typography-body2-<PROPERTY>` | Styles the typography of the formfield.\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.26.0-canary.3a5d5f34.0","_nodeVersion":"14.17.6","_npmVersion":"lerna/3.22.1/node@v14.17.6+x64 (linux)","dist":{"integrity":"sha512-1zxIr1CUGb4xEpufiSkWoGqnk3EWPJ8wxf1kLwdntk33HqgnlqtU3AT0dlqAg6QhFy6cSjJI18HrCpU66EUShQ==","shasum":"039866126e60720f3408d2cf293bedc492471508","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.26.0-canary.3a5d5f34.0.tgz","fileCount":13,"unpackedSize":36042,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIE52n45/ke1FnqreZTxghETNKG3hcyNGQ7yx2qaeyn6NAiEAjsX4kKVl3jeyT65V88AOPgEouaMCEWtrQtd/xSQSzjQ="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"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"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-formfield_0.26.0-canary.3a5d5f34.0_1632782475680_0.339766658005187"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.143ed3c8.0":{"name":"@material/mwc-formfield","version":"0.26.0-canary.143ed3c8.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=14.0.0-canary.86b50ef74.0","@material/mwc-base":"0.26.0-canary.143ed3c8.0","lit":"^2.0.0","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-checkbox":"0.26.0-canary.143ed3c8.0","@material/mwc-radio":"0.26.0-canary.143ed3c8.0","@material/mwc-switch":"0.26.0-canary.143ed3c8.0","@material/rtl":"=14.0.0-canary.86b50ef74.0","@material/theme":"=14.0.0-canary.86b50ef74.0","@material/typography":"=14.0.0-canary.86b50ef74.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-formfield.scss"},"publishConfig":{"access":"public"},"gitHead":"d25beb586046dd7cd30a302cdbcf1114a66b7770","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-web/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-web/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-web/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-web/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d25beb586046dd7cd30a302cdbcf1114a66b7770/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d25beb586046dd7cd30a302cdbcf1114a66b7770/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d25beb586046dd7cd30a302cdbcf1114a66b7770/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d25beb586046dd7cd30a302cdbcf1114a66b7770/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n|----  | -----------\n| `--mdc-typography-body2-<PROPERTY>` | Styles the typography of the formfield.\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.26.0-canary.143ed3c8.0","_nodeVersion":"14.17.6","_npmVersion":"lerna/3.22.1/node@v14.17.6+x64 (linux)","dist":{"integrity":"sha512-YFZuLl05vcC0d0dlROgc0zqr0iJ1noPwH67/2LOR8fp9z6uVkQPCvw9nYxR9Ka/Bk43ZplTqr2/S+lcHDDJypg==","shasum":"436e7f4824e47ba0e0e628d6368412a189ebbd75","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.26.0-canary.143ed3c8.0.tgz","fileCount":13,"unpackedSize":36042,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC1bPPje2aBQoulwcdGb17VGiG5acoltfWfvzT/Iz4aegIgb8OLAcMnaozPty5c9GP+eJXGdhqg/xSsN87ht0pYg28="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"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"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-formfield_0.26.0-canary.143ed3c8.0_1632880234175_0.1875275025179466"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.e5923d68.0":{"name":"@material/mwc-formfield","version":"0.26.0-canary.e5923d68.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=14.0.0-canary.86b50ef74.0","@material/mwc-base":"0.26.0-canary.e5923d68.0","lit":"^2.0.0","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-checkbox":"0.26.0-canary.e5923d68.0","@material/mwc-radio":"0.26.0-canary.e5923d68.0","@material/mwc-switch":"0.26.0-canary.e5923d68.0","@material/rtl":"=14.0.0-canary.86b50ef74.0","@material/theme":"=14.0.0-canary.86b50ef74.0","@material/typography":"=14.0.0-canary.86b50ef74.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-formfield.scss"},"publishConfig":{"access":"public"},"gitHead":"41f6e947d4028d5479ec62a20cbf1e1fce3c3a27","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-web/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-web/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-web/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-web/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/41f6e947d4028d5479ec62a20cbf1e1fce3c3a27/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/41f6e947d4028d5479ec62a20cbf1e1fce3c3a27/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/41f6e947d4028d5479ec62a20cbf1e1fce3c3a27/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/41f6e947d4028d5479ec62a20cbf1e1fce3c3a27/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n|----  | -----------\n| `--mdc-typography-body2-<PROPERTY>` | Styles the typography of the formfield.\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.26.0-canary.e5923d68.0","_nodeVersion":"14.17.6","_npmVersion":"lerna/3.22.1/node@v14.17.6+x64 (linux)","dist":{"integrity":"sha512-xMkVRJc2gpVTzVIsp11Dzp77vwdwKbY8zguCwqe68vQluZ2XWvCKBH6COlgHhbNoSFN+2PzNhotsITm4/iu8Dg==","shasum":"7aa13c2842e081f495c3d7e64e30b87971f0c663","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.26.0-canary.e5923d68.0.tgz","fileCount":13,"unpackedSize":36042,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAfo6CmbXJGe83/aeZGeOooWxdj8DI6X9vH2Tmbm+nq9AiAYFL3ZeK8rU0oVSm5RkjALVV9Vj24qR56fQSNoZdcBRQ=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"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"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-formfield_0.26.0-canary.e5923d68.0_1632960332629_0.29754283195420883"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.d8ed5109.0":{"name":"@material/mwc-formfield","version":"0.26.0-canary.d8ed5109.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=14.0.0-canary.586e740dd.0","@material/mwc-base":"0.26.0-canary.d8ed5109.0","lit":"^2.0.0","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-checkbox":"0.26.0-canary.d8ed5109.0","@material/mwc-radio":"0.26.0-canary.d8ed5109.0","@material/mwc-switch":"0.26.0-canary.d8ed5109.0","@material/rtl":"=14.0.0-canary.586e740dd.0","@material/theme":"=14.0.0-canary.586e740dd.0","@material/typography":"=14.0.0-canary.586e740dd.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-formfield.scss"},"publishConfig":{"access":"public"},"gitHead":"7cb638711a37e4d716e9aecb64598a665d377e7c","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-web/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-web/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-web/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-web/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7cb638711a37e4d716e9aecb64598a665d377e7c/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7cb638711a37e4d716e9aecb64598a665d377e7c/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7cb638711a37e4d716e9aecb64598a665d377e7c/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7cb638711a37e4d716e9aecb64598a665d377e7c/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n|----  | -----------\n| `--mdc-typography-body2-<PROPERTY>` | Styles the typography of the formfield.\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.26.0-canary.d8ed5109.0","_nodeVersion":"14.18.0","_npmVersion":"lerna/3.22.1/node@v14.18.0+x64 (linux)","dist":{"integrity":"sha512-qnTsKtnjYGIZu8XU1OjEouVuzsG/QqmcY09TKumKY9vAuY0m6pVyYu1PYNkQfcFm+TDa7igXgfWQp604qO6rzg==","shasum":"40956c81b916cf8491225cb3cbc80767ed6e67ef","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.26.0-canary.d8ed5109.0.tgz","fileCount":13,"unpackedSize":36042,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC05xnwomCA/GGkxvnnEvfhPaIVljqJmoVw46cmB9hvHAIgXh8ydDk7J3+cWWJedzT7seSWmsUK+X3B1hpfGkjidEE="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"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"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-formfield_0.26.0-canary.d8ed5109.0_1633044817205_0.7271572972963574"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.0efb9c2c.0":{"name":"@material/mwc-formfield","version":"0.26.0-canary.0efb9c2c.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=14.0.0-canary.586e740dd.0","@material/mwc-base":"0.26.0-canary.0efb9c2c.0","lit":"^2.0.0","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-checkbox":"0.26.0-canary.0efb9c2c.0","@material/mwc-radio":"0.26.0-canary.0efb9c2c.0","@material/mwc-switch":"0.26.0-canary.0efb9c2c.0","@material/rtl":"=14.0.0-canary.586e740dd.0","@material/theme":"=14.0.0-canary.586e740dd.0","@material/typography":"=14.0.0-canary.586e740dd.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-formfield.scss"},"publishConfig":{"access":"public"},"gitHead":"878935c40ce21b0cfddbf2aab964ba07d23dbb94","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-web/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-web/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-web/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-web/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/878935c40ce21b0cfddbf2aab964ba07d23dbb94/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/878935c40ce21b0cfddbf2aab964ba07d23dbb94/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/878935c40ce21b0cfddbf2aab964ba07d23dbb94/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/878935c40ce21b0cfddbf2aab964ba07d23dbb94/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n|----  | -----------\n| `--mdc-typography-body2-<PROPERTY>` | Styles the typography of the formfield.\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.26.0-canary.0efb9c2c.0","_nodeVersion":"14.18.0","_npmVersion":"lerna/3.22.1/node@v14.18.0+x64 (linux)","dist":{"integrity":"sha512-DPSdZClSzUxHvJQ8Ly7/tCDeY5EwpomKMEjbTSYyPtyEIIvZypRg18LP2Lap52W3gJV/U/UlMDEHYMEkPxgXYw==","shasum":"8c188407a96a1cf4f76fdc2e9336b798a83a1b28","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.26.0-canary.0efb9c2c.0.tgz","fileCount":13,"unpackedSize":36214,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAEeqc6fG9lgf3D1lYnSJ82QDW9r0oDwn1WIkAHW0v26AiEAghElibmwgpV3/T1cfA1hy8mLwgOPNWIWjuriT/YY2rY="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"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"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-formfield_0.26.0-canary.0efb9c2c.0_1633140479107_0.8486963877047962"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.1c9adcb3.0":{"name":"@material/mwc-formfield","version":"0.26.0-canary.1c9adcb3.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=14.0.0-canary.586e740dd.0","@material/mwc-base":"0.26.0-canary.1c9adcb3.0","lit":"^2.0.0","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-checkbox":"0.26.0-canary.1c9adcb3.0","@material/mwc-radio":"0.26.0-canary.1c9adcb3.0","@material/mwc-switch":"0.26.0-canary.1c9adcb3.0","@material/rtl":"=14.0.0-canary.586e740dd.0","@material/theme":"=14.0.0-canary.586e740dd.0","@material/typography":"=14.0.0-canary.586e740dd.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-formfield.scss"},"publishConfig":{"access":"public"},"gitHead":"432b66e41cc474278a452cfd5bd850754fd8b9f3","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-web/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-web/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-web/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-web/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/432b66e41cc474278a452cfd5bd850754fd8b9f3/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/432b66e41cc474278a452cfd5bd850754fd8b9f3/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/432b66e41cc474278a452cfd5bd850754fd8b9f3/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/432b66e41cc474278a452cfd5bd850754fd8b9f3/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n|----  | -----------\n| `--mdc-typography-body2-<PROPERTY>` | Styles the typography of the formfield.\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.26.0-canary.1c9adcb3.0","_nodeVersion":"14.18.0","_npmVersion":"lerna/3.22.1/node@v14.18.0+x64 (linux)","dist":{"integrity":"sha512-5SEjJsXtJZzObMnvmPO+xUiSWt0t/9d+90eqyFU5uu2g9oUAPp4xaC091wLVCtlWp9PRiC/XmkoiulvQU/iNhg==","shasum":"0adc5314519418eb286f9b49e04b241b4b7c2927","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.26.0-canary.1c9adcb3.0.tgz","fileCount":13,"unpackedSize":36214,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDZ+wCvNwuxbNEGud7FiYPnDKMr+5GP+FTB4nm9m78OoAiAhnJFbHbniai0ERQEN9IT6eSmoTYOXkWNDXOz1tXKTBg=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"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"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-formfield_0.26.0-canary.1c9adcb3.0_1633368797148_0.025454273586376308"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.dfc00d60.0":{"name":"@material/mwc-formfield","version":"0.26.0-canary.dfc00d60.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=14.0.0-canary.353ca7e9f.0","@material/mwc-base":"0.26.0-canary.dfc00d60.0","lit":"^2.0.0","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-checkbox":"0.26.0-canary.dfc00d60.0","@material/mwc-radio":"0.26.0-canary.dfc00d60.0","@material/mwc-switch":"0.26.0-canary.dfc00d60.0","@material/rtl":"=14.0.0-canary.353ca7e9f.0","@material/theme":"=14.0.0-canary.353ca7e9f.0","@material/typography":"=14.0.0-canary.353ca7e9f.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-formfield.scss"},"publishConfig":{"access":"public"},"gitHead":"3edf5d72f0c17bcf7c2e7377e2c0b4579168d2b0","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-web/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-web/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-web/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-web/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3edf5d72f0c17bcf7c2e7377e2c0b4579168d2b0/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3edf5d72f0c17bcf7c2e7377e2c0b4579168d2b0/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3edf5d72f0c17bcf7c2e7377e2c0b4579168d2b0/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3edf5d72f0c17bcf7c2e7377e2c0b4579168d2b0/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n|----  | -----------\n| `--mdc-typography-body2-<PROPERTY>` | Styles the typography of the formfield.\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.26.0-canary.dfc00d60.0","_nodeVersion":"14.18.0","_npmVersion":"lerna/3.22.1/node@v14.18.0+x64 (linux)","dist":{"integrity":"sha512-8p/LwRWHj2zcRaPCas6LT2QD7jzwviqek9rARkaF8W8GIR8RU+rpqg9h8ylNVRSSeFXb6obMGPcaJnL22LypYw==","shasum":"209f1c3a57d55297f57615acd6e2176963552bec","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.26.0-canary.dfc00d60.0.tgz","fileCount":13,"unpackedSize":36214,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFV/Re9B5xUz1rF9XYNQvS06D2u3oJzL4F70BdNXFJwTAiEAojtxA0Eg9geRySjbEZmVzJZ0U71tuy/ANCjdRX3ljnQ="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"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"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-formfield_0.26.0-canary.dfc00d60.0_1633741019634_0.061687887073894165"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.c3aa844c.0":{"name":"@material/mwc-formfield","version":"0.26.0-canary.c3aa844c.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=14.0.0-canary.353ca7e9f.0","@material/mwc-base":"0.26.0-canary.c3aa844c.0","lit":"^2.0.0","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-checkbox":"0.26.0-canary.c3aa844c.0","@material/mwc-radio":"0.26.0-canary.c3aa844c.0","@material/mwc-switch":"0.26.0-canary.c3aa844c.0","@material/rtl":"=14.0.0-canary.353ca7e9f.0","@material/theme":"=14.0.0-canary.353ca7e9f.0","@material/typography":"=14.0.0-canary.353ca7e9f.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-formfield.scss"},"publishConfig":{"access":"public"},"gitHead":"a792c732afb00bf097879fdcd7a1ac2a0c5d9506","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-web/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-web/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-web/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-web/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a792c732afb00bf097879fdcd7a1ac2a0c5d9506/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a792c732afb00bf097879fdcd7a1ac2a0c5d9506/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a792c732afb00bf097879fdcd7a1ac2a0c5d9506/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a792c732afb00bf097879fdcd7a1ac2a0c5d9506/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n|----  | -----------\n| `--mdc-typography-body2-<PROPERTY>` | Styles the typography of the formfield.\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.26.0-canary.c3aa844c.0","_nodeVersion":"14.18.0","_npmVersion":"lerna/3.22.1/node@v14.18.0+x64 (linux)","dist":{"integrity":"sha512-yyFFi4chXwVDodVAa7Hm9ETfnad8SK8KNzAMfoMZnGUzmTB3iW2rhKaKtXiR7llaFZvo5RJ6AVz15tkToWTaTg==","shasum":"ea9d1ba050852dc15c0617722573d45324bf986e","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.26.0-canary.c3aa844c.0.tgz","fileCount":13,"unpackedSize":36214,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDS7BjC9Gt9NYw5tGGheuLTY6DTjn2ZuvxvIplaThmbEwIhAPXHaCMmUEJOnNEoTi2NSiw1CUdTqV6D5SXBUugNj/7S"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"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"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-formfield_0.26.0-canary.c3aa844c.0_1633994045873_0.9284610307142995"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.25.2":{"name":"@material/mwc-formfield","version":"0.25.2","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=14.0.0-canary.353ca7e9f.0","@material/mwc-base":"^0.25.2","lit":"^2.0.0","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-checkbox":"^0.25.2","@material/mwc-radio":"^0.25.2","@material/mwc-switch":"^0.25.2","@material/rtl":"=14.0.0-canary.353ca7e9f.0","@material/theme":"=14.0.0-canary.353ca7e9f.0","@material/typography":"=14.0.0-canary.353ca7e9f.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-formfield.scss"},"publishConfig":{"access":"public"},"gitHead":"c3aa844c2a09ff9868820ce946f25f9df7714560","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.25.2","_nodeVersion":"12.22.5","_npmVersion":"lerna/3.22.1/node@v12.22.5+x64 (linux)","dist":{"integrity":"sha512-ECmLgyPF05np7I/pILYpVc2Siz9S7EjfTPISMb8+AIZr5Ahs3Olk1LvI/fYA9BggVP6Voin1rYuf1Q/GiCr/GA==","shasum":"88c3da33944f236b14d5f7281e43a4bb1e9e8612","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.25.2.tgz","fileCount":13,"unpackedSize":36128,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHniDbanxVpyxfMv+fAQzeqDOvOeQLOq4J1xbAyMaxNIAiAocMicrP5bVgLep6N6wdHUw6OQNVKu10ZJ3W5dEpqHQg=="}]},"_npmUser":{"name":"taylorv","email":"brian.t.vann@gmail.com"},"directories":{},"maintainers":[{"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"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-formfield_0.25.2_1633994309117_0.6365176224941633"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.406d6fe1.0":{"name":"@material/mwc-formfield","version":"0.26.0-canary.406d6fe1.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=14.0.0-canary.353ca7e9f.0","@material/mwc-base":"0.26.0-canary.406d6fe1.0","lit":"^2.0.0","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-checkbox":"0.26.0-canary.406d6fe1.0","@material/mwc-radio":"0.26.0-canary.406d6fe1.0","@material/mwc-switch":"0.26.0-canary.406d6fe1.0","@material/rtl":"=14.0.0-canary.353ca7e9f.0","@material/theme":"=14.0.0-canary.353ca7e9f.0","@material/typography":"=14.0.0-canary.353ca7e9f.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-formfield.scss"},"publishConfig":{"access":"public"},"gitHead":"d1410f3120b13ff08ccd731739c038b9fb14af78","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-web/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-web/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-web/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-web/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d1410f3120b13ff08ccd731739c038b9fb14af78/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d1410f3120b13ff08ccd731739c038b9fb14af78/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d1410f3120b13ff08ccd731739c038b9fb14af78/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d1410f3120b13ff08ccd731739c038b9fb14af78/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n|----  | -----------\n| `--mdc-typography-body2-<PROPERTY>` | Styles the typography of the formfield.\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.26.0-canary.406d6fe1.0","_nodeVersion":"14.18.0","_npmVersion":"lerna/3.22.1/node@v14.18.0+x64 (linux)","dist":{"integrity":"sha512-+tLBeIyU2kCtNDjhWIpOwQMCiO/WyiCfR41N66MXU4ZAUSGkqUvSNXY5V9inBtN6m4yUheOi9h88Y/zNL48fgA==","shasum":"a7d80c0a7800a3275b9a6554fabcb7135111c574","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.26.0-canary.406d6fe1.0.tgz","fileCount":13,"unpackedSize":36190,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBFsbjBj4itE4qlBcbD83knFK2UKP6+bR76rogMw780OAiEA41yI+9l8+NWB/KFnooTG0n1P0qgbWeeBf5CtwyK2yAs="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"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"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-formfield_0.26.0-canary.406d6fe1.0_1634158751141_0.8802980546568357"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.ca0a674f.0":{"name":"@material/mwc-formfield","version":"0.26.0-canary.ca0a674f.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=14.0.0-canary.353ca7e9f.0","@material/mwc-base":"0.26.0-canary.ca0a674f.0","lit":"^2.0.0","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-checkbox":"0.26.0-canary.ca0a674f.0","@material/mwc-radio":"0.26.0-canary.ca0a674f.0","@material/mwc-switch":"0.26.0-canary.ca0a674f.0","@material/rtl":"=14.0.0-canary.353ca7e9f.0","@material/theme":"=14.0.0-canary.353ca7e9f.0","@material/typography":"=14.0.0-canary.353ca7e9f.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-formfield.scss"},"publishConfig":{"access":"public"},"gitHead":"b8e99d19dfc1b6d5062ada3345d461e9a77f18f1","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-web/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-web/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-web/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-web/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b8e99d19dfc1b6d5062ada3345d461e9a77f18f1/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b8e99d19dfc1b6d5062ada3345d461e9a77f18f1/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b8e99d19dfc1b6d5062ada3345d461e9a77f18f1/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b8e99d19dfc1b6d5062ada3345d461e9a77f18f1/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n|----  | -----------\n| `--mdc-typography-body2-<PROPERTY>` | Styles the typography of the formfield.\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.26.0-canary.ca0a674f.0","_nodeVersion":"14.18.0","_npmVersion":"lerna/3.22.1/node@v14.18.0+x64 (linux)","dist":{"integrity":"sha512-4uUSfavCwgsqTSdVuWdsQYtXA3dEJYxMWAS+6MLSLfEsWNI/teZ2O7XH64F0KoCiGbvRhoLyqoicjC4Kz8w3Rw==","shasum":"f1aa8826845efe29f2a99bd07f6f8b68179e2920","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.26.0-canary.ca0a674f.0.tgz","fileCount":13,"unpackedSize":36190,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIG6EcdFDPCwsRNQywnuYPlHVsoIdolHQiWCPVHqD4LABAiEArjokFJhroTRKsRSEdKTzRUg4TfR6iaq/imBGC+JS31g="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"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"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-formfield_0.26.0-canary.ca0a674f.0_1634592995685_0.7812675891070369"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.eefcf660.0":{"name":"@material/mwc-formfield","version":"0.26.0-canary.eefcf660.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=14.0.0-canary.261f2db59.0","@material/mwc-base":"0.26.0-canary.eefcf660.0","lit":"^2.0.0","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-checkbox":"0.26.0-canary.eefcf660.0","@material/mwc-radio":"0.26.0-canary.eefcf660.0","@material/mwc-switch":"0.26.0-canary.eefcf660.0","@material/rtl":"=14.0.0-canary.261f2db59.0","@material/theme":"=14.0.0-canary.261f2db59.0","@material/typography":"=14.0.0-canary.261f2db59.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-formfield.scss"},"publishConfig":{"access":"public"},"gitHead":"70552d8e831f6542ab42f41bb5d338adcff0500e","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-web/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-web/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-web/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-web/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/70552d8e831f6542ab42f41bb5d338adcff0500e/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/70552d8e831f6542ab42f41bb5d338adcff0500e/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/70552d8e831f6542ab42f41bb5d338adcff0500e/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/70552d8e831f6542ab42f41bb5d338adcff0500e/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n|----  | -----------\n| `--mdc-typography-body2-<PROPERTY>` | Styles the typography of the formfield.\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.26.0-canary.eefcf660.0","_nodeVersion":"14.18.0","_npmVersion":"lerna/3.22.1/node@v14.18.0+x64 (linux)","dist":{"integrity":"sha512-6e8vSlukplDG6lMhWa4rzs1L6La07IdB+Loy5+6bELYrWDVhaICXc5CU3ZR5YwjpVqaEBaj/X7hCvz2UfkNg3w==","shasum":"361d1e8953f0c221604732769fc4a2b226e2866e","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.26.0-canary.eefcf660.0.tgz","fileCount":13,"unpackedSize":36190,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICUI6WKbD1jK5W4qGqX7/SZmXpnzhqYbHGjuYMsjvwDZAiEA1q0U9xk8nOGarkU8F6532pPzmF3LxcdBgNJcmgaaUJk="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"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"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-formfield_0.26.0-canary.eefcf660.0_1634765001316_0.16307324173656212"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.d21acc8f.0":{"name":"@material/mwc-formfield","version":"0.26.0-canary.d21acc8f.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=14.0.0-canary.261f2db59.0","@material/mwc-base":"0.26.0-canary.d21acc8f.0","lit":"^2.0.0","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-checkbox":"0.26.0-canary.d21acc8f.0","@material/mwc-radio":"0.26.0-canary.d21acc8f.0","@material/mwc-switch":"0.26.0-canary.d21acc8f.0","@material/rtl":"=14.0.0-canary.261f2db59.0","@material/theme":"=14.0.0-canary.261f2db59.0","@material/typography":"=14.0.0-canary.261f2db59.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-formfield.scss"},"publishConfig":{"access":"public"},"gitHead":"13f43aef10317d911611c572ecc044445a012a2f","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-web/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-web/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-web/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-web/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/13f43aef10317d911611c572ecc044445a012a2f/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/13f43aef10317d911611c572ecc044445a012a2f/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/13f43aef10317d911611c572ecc044445a012a2f/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/13f43aef10317d911611c572ecc044445a012a2f/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n|----  | -----------\n| `--mdc-typography-body2-<PROPERTY>` | Styles the typography of the formfield.\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.26.0-canary.d21acc8f.0","_nodeVersion":"14.18.0","_npmVersion":"lerna/3.22.1/node@v14.18.0+x64 (linux)","dist":{"integrity":"sha512-nhtjspFvQAAZBsZ+4WyU6HZPWJcVP0EaJrrsHgN4Tht7Sv2vL/vRUXANv0XqHHUlKpS2CJeiiLPhmJCkNiD+sw==","shasum":"6abf543fef3b4abba0488c1b300df2bceccdafc1","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.26.0-canary.d21acc8f.0.tgz","fileCount":13,"unpackedSize":36190,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICYJRycvaBVEt1jAmgNc2o1Y7RAZdc2L8xfG1PTEAQEzAiA+xyMOJbHn6N5pNDl8M0VP0QUgGR7zA81ZhGmKSsRfcg=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"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"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-formfield_0.26.0-canary.d21acc8f.0_1634769133574_0.14575625122731295"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.25.3":{"name":"@material/mwc-formfield","version":"0.25.3","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=14.0.0-canary.261f2db59.0","@material/mwc-base":"^0.25.3","lit":"^2.0.0","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-checkbox":"^0.25.3","@material/mwc-radio":"^0.25.3","@material/mwc-switch":"^0.25.3","@material/rtl":"=14.0.0-canary.261f2db59.0","@material/theme":"=14.0.0-canary.261f2db59.0","@material/typography":"=14.0.0-canary.261f2db59.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-formfield.scss"},"publishConfig":{"access":"public"},"gitHead":"1f19804bea995fc84ab35feb67668d9874ff10f9","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.25.3","_nodeVersion":"12.22.5","_npmVersion":"lerna/3.22.1/node@v12.22.5+x64 (linux)","dist":{"integrity":"sha512-JP/ZgsWok0ZVwUQfYgaov0Ocn1zDiiw7Po6q8k/n5tOS67S41XUB/ctiUg1gh00LAM0v3eZAexa9ZmKarviVJA==","shasum":"3e8052ddae2bd7280796d1bdafe276a1313e49f7","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.25.3.tgz","fileCount":13,"unpackedSize":36104,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFKopm0vlzPZlj16FoIFJbK1wVgmWDuIZ68MTvjxXl83AiEAmRwC4EMU7166XHAd2GpRNfh2wuPfRs/X6VmLdWl30jI="}]},"_npmUser":{"name":"taylorv","email":"brian.t.vann@gmail.com"},"directories":{},"maintainers":[{"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"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-formfield_0.25.3_1634838939117_0.2745775915841189"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.60449b7b.0":{"name":"@material/mwc-formfield","version":"0.26.0-canary.60449b7b.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=14.0.0-canary.9803d2dc1.0","@material/mwc-base":"0.26.0-canary.60449b7b.0","lit":"^2.0.0","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-checkbox":"0.26.0-canary.60449b7b.0","@material/mwc-radio":"0.26.0-canary.60449b7b.0","@material/mwc-switch":"0.26.0-canary.60449b7b.0","@material/rtl":"=14.0.0-canary.9803d2dc1.0","@material/theme":"=14.0.0-canary.9803d2dc1.0","@material/typography":"=14.0.0-canary.9803d2dc1.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-formfield.scss"},"publishConfig":{"access":"public"},"gitHead":"cb5b8ebecb046df6d10001a163b69a26954c94bf","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-web/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-web/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-web/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-web/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/cb5b8ebecb046df6d10001a163b69a26954c94bf/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/cb5b8ebecb046df6d10001a163b69a26954c94bf/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/cb5b8ebecb046df6d10001a163b69a26954c94bf/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/cb5b8ebecb046df6d10001a163b69a26954c94bf/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n|----  | -----------\n| `--mdc-typography-body2-<PROPERTY>` | Styles the typography of the formfield.\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.26.0-canary.60449b7b.0","_nodeVersion":"14.18.1","_npmVersion":"lerna/3.22.1/node@v14.18.1+x64 (linux)","dist":{"integrity":"sha512-YZPaSUos5IhMJuQD8EMPIfksqWlwqAgAoZ0lRXAmZJODVl5n2LCFyNdkrcUrtMxsnIISUustR8pJlbdsz/DYJw==","shasum":"34dfb0bb5a9558f742222e5795f81ad5ad822bc7","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.26.0-canary.60449b7b.0.tgz","fileCount":13,"unpackedSize":36190,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEiXsKm2IGIpNZR5E8gulTx9u6GUJUPabr/c6hYkT4d6AiEArcw+ofpp+wL3cEp3Ben/NO/8lSxIzM7itipIbOCcaz0="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"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"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-formfield_0.26.0-canary.60449b7b.0_1634840226719_0.8197713775981315"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.0d8084ed.0":{"name":"@material/mwc-formfield","version":"0.26.0-canary.0d8084ed.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=14.0.0-canary.9803d2dc1.0","@material/mwc-base":"0.26.0-canary.0d8084ed.0","lit":"^2.0.0","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-checkbox":"0.26.0-canary.0d8084ed.0","@material/mwc-radio":"0.26.0-canary.0d8084ed.0","@material/mwc-switch":"0.26.0-canary.0d8084ed.0","@material/rtl":"=14.0.0-canary.9803d2dc1.0","@material/theme":"=14.0.0-canary.9803d2dc1.0","@material/typography":"=14.0.0-canary.9803d2dc1.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-formfield.scss"},"publishConfig":{"access":"public"},"gitHead":"ca8c4979ee49843dba32b345040faa8c1e8a22a4","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-web/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-web/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-web/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-web/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ca8c4979ee49843dba32b345040faa8c1e8a22a4/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ca8c4979ee49843dba32b345040faa8c1e8a22a4/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ca8c4979ee49843dba32b345040faa8c1e8a22a4/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ca8c4979ee49843dba32b345040faa8c1e8a22a4/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n|----  | -----------\n| `--mdc-typography-body2-<PROPERTY>` | Styles the typography of the formfield.\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.26.0-canary.0d8084ed.0","_nodeVersion":"14.18.1","_npmVersion":"lerna/3.22.1/node@v14.18.1+x64 (linux)","dist":{"integrity":"sha512-UkVjYz/8HmAzjoGZLdClvoP/fxmDsvqHXMCYPL5Yb+5l62PLu3yQPLIKfE5aIGid8YnRgVIzLj3MtT/WzEdqEA==","shasum":"d583a3154bf13e4410b490f56d7b5c727afd81cf","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.26.0-canary.0d8084ed.0.tgz","fileCount":13,"unpackedSize":36190,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFD5vOzPCVFRFQ7vEFlpO3s+EvcZQTnn9EX9ABBMEOykAiEAmg8y4XdVvp5uDbb0BdDDwwKVVtHhdyAu+pudh9KbL/w="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"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"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-formfield_0.26.0-canary.0d8084ed.0_1635443078443_0.1800580772406748"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.232327ee.0":{"name":"@material/mwc-formfield","version":"0.26.0-canary.232327ee.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=14.0.0-canary.a986df922.0","@material/mwc-base":"0.26.0-canary.232327ee.0","lit":"^2.0.0","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-checkbox":"0.26.0-canary.232327ee.0","@material/mwc-radio":"0.26.0-canary.232327ee.0","@material/mwc-switch":"0.26.0-canary.232327ee.0","@material/rtl":"=14.0.0-canary.a986df922.0","@material/theme":"=14.0.0-canary.a986df922.0","@material/typography":"=14.0.0-canary.a986df922.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-formfield.scss"},"publishConfig":{"access":"public"},"gitHead":"0645d0b4b0eac5799fc20a3bd279788eb66a7564","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-web/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-web/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-web/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-web/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0645d0b4b0eac5799fc20a3bd279788eb66a7564/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0645d0b4b0eac5799fc20a3bd279788eb66a7564/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0645d0b4b0eac5799fc20a3bd279788eb66a7564/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0645d0b4b0eac5799fc20a3bd279788eb66a7564/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n|----  | -----------\n| `--mdc-typography-body2-<PROPERTY>` | Styles the typography of the formfield.\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.26.0-canary.232327ee.0","_nodeVersion":"14.18.1","_npmVersion":"lerna/3.22.1/node@v14.18.1+x64 (linux)","dist":{"integrity":"sha512-9+ctXXFVmdekbQj8+lUtBElBp1iXtKAVxJZ7+Fcx4/cmshdGMeOgtoKxCzFbpNhUGPjMyb9KDLkTIDxJsFC1ow==","shasum":"849f2cbfe2e62351ec895221b054f13ee3a58ac7","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.26.0-canary.232327ee.0.tgz","fileCount":13,"unpackedSize":36190,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAbiH9aGK6UARGfuerFyWsWNxbdDqKo3FE8d84ZrJXC0AiEApkvF3u/1COUOJyuE26R46lLIlo7SB0p0F7u7Ng/5IM0="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"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"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-formfield_0.26.0-canary.232327ee.0_1635797729091_0.9058263184341344"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.0a492ae8.0":{"name":"@material/mwc-formfield","version":"0.26.0-canary.0a492ae8.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=14.0.0-canary.a986df922.0","@material/mwc-base":"0.26.0-canary.0a492ae8.0","lit":"^2.0.0","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-checkbox":"0.26.0-canary.0a492ae8.0","@material/mwc-radio":"0.26.0-canary.0a492ae8.0","@material/mwc-switch":"0.26.0-canary.0a492ae8.0","@material/rtl":"=14.0.0-canary.a986df922.0","@material/theme":"=14.0.0-canary.a986df922.0","@material/typography":"=14.0.0-canary.a986df922.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-formfield.scss"},"publishConfig":{"access":"public"},"gitHead":"9f520a49648fd39a7140df761448008fe0fbb492","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-web/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-web/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-web/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-web/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9f520a49648fd39a7140df761448008fe0fbb492/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9f520a49648fd39a7140df761448008fe0fbb492/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9f520a49648fd39a7140df761448008fe0fbb492/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9f520a49648fd39a7140df761448008fe0fbb492/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n|----  | -----------\n| `--mdc-typography-body2-<PROPERTY>` | Styles the typography of the formfield.\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.26.0-canary.0a492ae8.0","_nodeVersion":"14.18.1","_npmVersion":"lerna/3.22.1/node@v14.18.1+x64 (linux)","dist":{"integrity":"sha512-h01xB3X3cSs6cVQzRRxh3TDdIMR2W4erNxlmel5f3EGhMDVC5CTbgrgBWwFA+7eSamT4jlsV6TcPDCupfINGvg==","shasum":"223d7d4ea1ed8569e77c09a49d1d115a9225ee7e","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.26.0-canary.0a492ae8.0.tgz","fileCount":13,"unpackedSize":36190,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD/ahz+fdmoIl83ryid7Peim5raaNxaR453Vf0eSNv/fwIgfIKyRJ8efkAD08Cn+RESQhnd/mxvyDvnGAvRlV6oDGQ="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"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"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-formfield_0.26.0-canary.0a492ae8.0_1635847209567_0.8650718234944699"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.0aa18745.0":{"name":"@material/mwc-formfield","version":"0.26.0-canary.0aa18745.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=14.0.0-canary.a986df922.0","@material/mwc-base":"0.26.0-canary.0aa18745.0","lit":"^2.0.0","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-checkbox":"0.26.0-canary.0aa18745.0","@material/mwc-radio":"0.26.0-canary.0aa18745.0","@material/mwc-switch":"0.26.0-canary.0aa18745.0","@material/rtl":"=14.0.0-canary.a986df922.0","@material/theme":"=14.0.0-canary.a986df922.0","@material/typography":"=14.0.0-canary.a986df922.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-formfield.scss"},"publishConfig":{"access":"public"},"gitHead":"5345838b7f3a3ec41bf4ef997759be6aae3cd340","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-web/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-web/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-web/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-web/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5345838b7f3a3ec41bf4ef997759be6aae3cd340/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5345838b7f3a3ec41bf4ef997759be6aae3cd340/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5345838b7f3a3ec41bf4ef997759be6aae3cd340/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5345838b7f3a3ec41bf4ef997759be6aae3cd340/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n|----  | -----------\n| `--mdc-typography-body2-<PROPERTY>` | Styles the typography of the formfield.\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.26.0-canary.0aa18745.0","_nodeVersion":"14.18.1","_npmVersion":"lerna/3.22.1/node@v14.18.1+x64 (linux)","dist":{"integrity":"sha512-yHF2kv+Hyei7S5HzrKwHXq+7F62DoGObIbtPvBzzJpAH0TVu0we2ywaYyDzLjuqDN4xgapS7kGVNKC0bTPG0/g==","shasum":"277450df4d69e23c8b68a0a179bf3e66d5fdf8ef","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.26.0-canary.0aa18745.0.tgz","fileCount":13,"unpackedSize":36190,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDnHG/aRKniwXlSYn6eF1No+sO7wYHmYBTlztE50NoCdAiEAx203gRwWq0Ijp1ZzzAlbhw6frp6ENkEyK7K65w5FDhk="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"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"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-formfield_0.26.0-canary.0aa18745.0_1635876453771_0.1844435478351225"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.f3e28323.0":{"name":"@material/mwc-formfield","version":"0.26.0-canary.f3e28323.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=14.0.0-canary.a986df922.0","@material/mwc-base":"0.26.0-canary.f3e28323.0","lit":"^2.0.0","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-checkbox":"0.26.0-canary.f3e28323.0","@material/mwc-radio":"0.26.0-canary.f3e28323.0","@material/mwc-switch":"0.26.0-canary.f3e28323.0","@material/rtl":"=14.0.0-canary.a986df922.0","@material/theme":"=14.0.0-canary.a986df922.0","@material/typography":"=14.0.0-canary.a986df922.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-formfield.scss"},"publishConfig":{"access":"public"},"gitHead":"ebbbec0b1b0e29da237ec87bebd889c3af847f1b","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-web/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-web/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-web/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-web/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ebbbec0b1b0e29da237ec87bebd889c3af847f1b/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ebbbec0b1b0e29da237ec87bebd889c3af847f1b/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ebbbec0b1b0e29da237ec87bebd889c3af847f1b/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ebbbec0b1b0e29da237ec87bebd889c3af847f1b/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n|----  | -----------\n| `--mdc-typography-body2-<PROPERTY>` | Styles the typography of the formfield.\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.26.0-canary.f3e28323.0","_nodeVersion":"14.18.1","_npmVersion":"lerna/3.22.1/node@v14.18.1+x64 (linux)","dist":{"integrity":"sha512-WyWZzap04v3+UeitCHJwXZC01gH0I0cSCIUK/xItF6x2arN2WhQIefHrYPif2nJBSvdoWWyfwP7hS5Mzj5Stjw==","shasum":"38dd6c1e361435f94a912dcd09d20cfd03ff0222","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.26.0-canary.f3e28323.0.tgz","fileCount":13,"unpackedSize":36190,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIC6w1G8hkMtd5HlnCGyeDDOg91EOJ9eAKzvcYEDs7hOgAiEAuF06XUFIXPNV5tpp7CV+DOvKqDeNgWSaaTsbXDgi23I="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"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"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-formfield_0.26.0-canary.f3e28323.0_1635879552767_0.5984369383538037"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.27e05c5d.0":{"name":"@material/mwc-formfield","version":"0.26.0-canary.27e05c5d.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=14.0.0-canary.a986df922.0","@material/mwc-base":"0.26.0-canary.27e05c5d.0","lit":"^2.0.0","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-checkbox":"0.26.0-canary.27e05c5d.0","@material/mwc-radio":"0.26.0-canary.27e05c5d.0","@material/mwc-switch":"0.26.0-canary.27e05c5d.0","@material/rtl":"=14.0.0-canary.a986df922.0","@material/theme":"=14.0.0-canary.a986df922.0","@material/typography":"=14.0.0-canary.a986df922.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-formfield.scss"},"publishConfig":{"access":"public"},"gitHead":"c052b0acfe9f929e6bae475576f23f8349bde578","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-web/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-web/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-web/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-web/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c052b0acfe9f929e6bae475576f23f8349bde578/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c052b0acfe9f929e6bae475576f23f8349bde578/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c052b0acfe9f929e6bae475576f23f8349bde578/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c052b0acfe9f929e6bae475576f23f8349bde578/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n|----  | -----------\n| `--mdc-typography-body2-<PROPERTY>` | Styles the typography of the formfield.\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.26.0-canary.27e05c5d.0","_nodeVersion":"14.18.1","_npmVersion":"lerna/3.22.1/node@v14.18.1+x64 (linux)","dist":{"integrity":"sha512-j0DD0mzhDfHw1NZt3hMyfiwxHkBZFS/FHuSjKcSrT3IOq94zGaQIlFfE74KLXMX+yZVy8phz6Xaag4ORLbgBog==","shasum":"53292d2eae61a0da667d8305538303ed7f7272d9","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.26.0-canary.27e05c5d.0.tgz","fileCount":13,"unpackedSize":36190,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICyaPSl4D0OFYp8M+tkcHe80SCakGLixZ1DBW4faN0dKAiACvg7vpN7xeARD1Teg/sHMua0FceQEcBhI4pkCPd/xkg=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"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"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-formfield_0.26.0-canary.27e05c5d.0_1635965082786_0.049230050914559564"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.b9e44af7.0":{"name":"@material/mwc-formfield","version":"0.26.0-canary.b9e44af7.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=14.0.0-canary.a986df922.0","@material/mwc-base":"0.26.0-canary.b9e44af7.0","lit":"^2.0.0","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-checkbox":"0.26.0-canary.b9e44af7.0","@material/mwc-radio":"0.26.0-canary.b9e44af7.0","@material/mwc-switch":"0.26.0-canary.b9e44af7.0","@material/rtl":"=14.0.0-canary.a986df922.0","@material/theme":"=14.0.0-canary.a986df922.0","@material/typography":"=14.0.0-canary.a986df922.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-formfield.scss"},"publishConfig":{"access":"public"},"gitHead":"93bbd63ef108db911df936720517c5068ef30dcb","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-web/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-web/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-web/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-web/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/93bbd63ef108db911df936720517c5068ef30dcb/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/93bbd63ef108db911df936720517c5068ef30dcb/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/93bbd63ef108db911df936720517c5068ef30dcb/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/93bbd63ef108db911df936720517c5068ef30dcb/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n|----  | -----------\n| `--mdc-typography-body2-<PROPERTY>` | Styles the typography of the formfield.\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.26.0-canary.b9e44af7.0","_nodeVersion":"14.18.1","_npmVersion":"lerna/3.22.1/node@v14.18.1+x64 (linux)","dist":{"integrity":"sha512-D6Nf80lVnVoz+M16sJHTkqWBQu2VMAnyibSIEMe+87oEf6vGf0DYbUs2mjF09n2Zf8rYymHHL5hB9FWBGLp7zQ==","shasum":"e8e3e1c0b855bcec44f78d26f0234997b9ef0ddf","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.26.0-canary.b9e44af7.0.tgz","fileCount":13,"unpackedSize":36190,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCURWya7MZloEPsqVUpGwyccITwRA1CiKEB/GqitXD6NQIhANUMMB5caqSeZctb3YygfCNT34QTL32pIc+FHDbCzj08"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"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"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-formfield_0.26.0-canary.b9e44af7.0_1635966226352_0.5695777478317305"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.448f6cb9.0":{"name":"@material/mwc-formfield","version":"0.26.0-canary.448f6cb9.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=14.0.0-canary.a986df922.0","@material/mwc-base":"0.26.0-canary.448f6cb9.0","lit":"^2.0.0","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-checkbox":"0.26.0-canary.448f6cb9.0","@material/mwc-radio":"0.26.0-canary.448f6cb9.0","@material/mwc-switch":"0.26.0-canary.448f6cb9.0","@material/rtl":"=14.0.0-canary.a986df922.0","@material/theme":"=14.0.0-canary.a986df922.0","@material/typography":"=14.0.0-canary.a986df922.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-formfield.scss"},"publishConfig":{"access":"public"},"gitHead":"b9833961f155dca92373d3a6f0476bc8cef934a2","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-web/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-web/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-web/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-web/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b9833961f155dca92373d3a6f0476bc8cef934a2/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b9833961f155dca92373d3a6f0476bc8cef934a2/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b9833961f155dca92373d3a6f0476bc8cef934a2/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b9833961f155dca92373d3a6f0476bc8cef934a2/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n|----  | -----------\n| `--mdc-typography-body2-<PROPERTY>` | Styles the typography of the formfield.\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.26.0-canary.448f6cb9.0","_nodeVersion":"14.18.1","_npmVersion":"lerna/3.22.1/node@v14.18.1+x64 (linux)","dist":{"integrity":"sha512-d+0pNdiK1VfCZEGQeocBiUzXT2CZbPj+lycvgQ91n1AxrlHEUCwTseQSvGLkyr14mvIirIbd/VxshmV9pJy3ZQ==","shasum":"fd26286db20ed59e0aa23b175cdf5aa730982b93","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.26.0-canary.448f6cb9.0.tgz","fileCount":13,"unpackedSize":36190,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICubBKsxHRxdR/LRlUCQ9nXsJ9Iv6rNhA+/wJoPpq2dhAiEA7Wzh1cvAsf7e6D5sLLJuBskStRBj5Aj1xLlOjMz/YNc="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"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"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-formfield_0.26.0-canary.448f6cb9.0_1636049259552_0.36672067496025873"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.8067ce28.0":{"name":"@material/mwc-formfield","version":"0.26.0-canary.8067ce28.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=14.0.0-canary.a986df922.0","@material/mwc-base":"0.26.0-canary.8067ce28.0","lit":"^2.0.0","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-checkbox":"0.26.0-canary.8067ce28.0","@material/mwc-radio":"0.26.0-canary.8067ce28.0","@material/mwc-switch":"0.26.0-canary.8067ce28.0","@material/rtl":"=14.0.0-canary.a986df922.0","@material/theme":"=14.0.0-canary.a986df922.0","@material/typography":"=14.0.0-canary.a986df922.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-formfield.scss"},"publishConfig":{"access":"public"},"gitHead":"a4d0d35b15bd6e7a29375f11c520886e5b9d168e","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-web/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-web/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-web/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-web/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a4d0d35b15bd6e7a29375f11c520886e5b9d168e/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a4d0d35b15bd6e7a29375f11c520886e5b9d168e/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a4d0d35b15bd6e7a29375f11c520886e5b9d168e/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a4d0d35b15bd6e7a29375f11c520886e5b9d168e/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n|----  | -----------\n| `--mdc-typography-body2-<PROPERTY>` | Styles the typography of the formfield.\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.26.0-canary.8067ce28.0","_nodeVersion":"14.18.1","_npmVersion":"lerna/3.22.1/node@v14.18.1+x64 (linux)","dist":{"integrity":"sha512-M5HWLboVPyBFJ9GjphMN32I85FzV4ncNSMX6bLYsK8MeWSKMSdZho9fU+Y7v15KPyGtPlss9N6MMS0ZbaHbCdQ==","shasum":"cced6a06d8b58c849e742757050141cda6e6ce92","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.26.0-canary.8067ce28.0.tgz","fileCount":13,"unpackedSize":36190,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFH161mD9QWedgjb3F4wiejr3QawPUVnUi/A93xMavx3AiEAxgzxLhUHmBjSorDucivaA9OIdkI5Qp1wl0lXERfAqy8="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"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"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-formfield_0.26.0-canary.8067ce28.0_1636064530501_0.966156892016732"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.345c2bb9.0":{"name":"@material/mwc-formfield","version":"0.26.0-canary.345c2bb9.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=14.0.0-canary.43d08ba77.0","@material/mwc-base":"0.26.0-canary.345c2bb9.0","lit":"^2.0.0","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-checkbox":"0.26.0-canary.345c2bb9.0","@material/mwc-radio":"0.26.0-canary.345c2bb9.0","@material/mwc-switch":"0.26.0-canary.345c2bb9.0","@material/rtl":"=14.0.0-canary.43d08ba77.0","@material/theme":"=14.0.0-canary.43d08ba77.0","@material/typography":"=14.0.0-canary.43d08ba77.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-formfield.scss"},"publishConfig":{"access":"public"},"gitHead":"3e7898316da6adc11d19b54d685e52bc4bb79733","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-web/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-web/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-web/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-web/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3e7898316da6adc11d19b54d685e52bc4bb79733/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3e7898316da6adc11d19b54d685e52bc4bb79733/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3e7898316da6adc11d19b54d685e52bc4bb79733/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3e7898316da6adc11d19b54d685e52bc4bb79733/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n|----  | -----------\n| `--mdc-typography-body2-<PROPERTY>` | Styles the typography of the formfield.\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.26.0-canary.345c2bb9.0","_nodeVersion":"14.18.1","_npmVersion":"lerna/3.22.1/node@v14.18.1+x64 (linux)","dist":{"integrity":"sha512-XB/UfA3rGVNYPY4FYRSDqmJBHuZNchFyvi7iadQv4JJ21y3PkgpK0fBQzXd+UxrHdUGfjoPlFaGO826mmnX1Jg==","shasum":"d7893d4d9ffe953fcbdfc2a7f242368bbf837bb3","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.26.0-canary.345c2bb9.0.tgz","fileCount":13,"unpackedSize":36190,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhqP3VCRA9TVsSAnZWagAAa7QP/jV0PLed+eFJ76inE9N/\n/Uubi+vwq9sA6F5sp2VLMN0USgzLNKZ/TEnQenpclw9weqhvPLWXAyYawM6a\n1ghWP+T/YZ285qUrmPQ1kSV3I3K0rpDwOBrw2mcoMcEvYKGuHH8VNmEYa/y5\n5afFAMrWKhHgejxY6HNrmp/FfHh3lsEFkjNVkk4MZsFhvX4SjruHYNPSt4c1\nqXGp78p8Nzyugx81gMorzIRRVGG6PQOGTkKfe7JOBELhN2NOiJL8qse1D3nO\npTkP1MP9WSPMV532kAxh6m2W27Sq/ADt0L52oxphpgtDFpLaVHwbRdrQ0mT9\nShxAhHx1yH0JX1/u3jV0if6z+OuayLuy91Z7jRWtARmoREqv3T9+4D9SFaXY\n5NiRGU/07bI+SEpF8KRlK+BN3DohE3B2pKJExPkTTOqWCFfTEBgOKbEjoXg1\nQ8mDOt0Fd+l6dca4qexD9fdBaZuRMNLsk0RLaY/QNCCIPhuPm7c0FTDRo2sc\nE5T104dN43Xobsoc3e2GJpR4dch9OKR1zr4Pu004evRepGl9ffZjTByk+W5o\nXLEjqy8HFD+XJR4l2Enyv79TuJojUlaxy2z7sS7DT58QYowmSVQ5028OE4rT\ntP8Q6AH6SleP2DkpVrY4+x4nE0bE4nSCdBjVIChonnVnPRcbfA4XZZwh6/IO\nThhz\r\n=Lr//\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIF5akYmB0cWp3vj3rtifOJKNx8NPAKdPQ5F6IGYoQhc6AiEAsXGPCERX8lwblDS205TR1xtMhMpfU1E+jsLi/Q9wb3g="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"yefim","email":"hi@yef.im"},{"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":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-formfield_0.26.0-canary.345c2bb9.0_1638464981072_0.8296123569544656"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.0547aeeb.0":{"name":"@material/mwc-formfield","version":"0.26.0-canary.0547aeeb.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=14.0.0-canary.17a072535.0","@material/mwc-base":"0.26.0-canary.0547aeeb.0","lit":"^2.0.0","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-checkbox":"0.26.0-canary.0547aeeb.0","@material/mwc-radio":"0.26.0-canary.0547aeeb.0","@material/mwc-switch":"0.26.0-canary.0547aeeb.0","@material/rtl":"=14.0.0-canary.17a072535.0","@material/theme":"=14.0.0-canary.17a072535.0","@material/typography":"=14.0.0-canary.17a072535.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-formfield.scss"},"publishConfig":{"access":"public"},"gitHead":"2115410a9593d1f2c95099961aed3e6e61255f88","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-web/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-web/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-web/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-web/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2115410a9593d1f2c95099961aed3e6e61255f88/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2115410a9593d1f2c95099961aed3e6e61255f88/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2115410a9593d1f2c95099961aed3e6e61255f88/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2115410a9593d1f2c95099961aed3e6e61255f88/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n|----  | -----------\n| `--mdc-typography-body2-<PROPERTY>` | Styles the typography of the formfield.\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.26.0-canary.0547aeeb.0","_nodeVersion":"14.18.1","_npmVersion":"lerna/3.22.1/node@v14.18.1+x64 (linux)","dist":{"integrity":"sha512-ilmqRachRyuosFXwgc6vec2DOc2gZaFpgT2KswbUumlFfaijMcAI0Rwi0que1GhVTqd/GhCSjGdu9c2B281tQg==","shasum":"09c70b3e1b24085ee9b4172d318c167406f9c818","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.26.0-canary.0547aeeb.0.tgz","fileCount":13,"unpackedSize":36190,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhrjvWCRA9TVsSAnZWagAAiNAP/1nlqdRkyyLp1styA+Xl\ns+QMwPhykNqf4QNjuuIoxdJnzhDekw02qCCmZmz/qUjAznlwl/B4c5E2d1pc\nnq1JZpYlhbZsHIWcK0v36CFgK5CJXN3VZbr3becIEA8ricZSVtYBCFmMD2I1\nNEXu05Cj8+gsLNAVTk7knWMULuXlPdrYmKclXf/lRkjjw14hg4XpbtPCdLC8\ngY4TcK5Lr+8+GEUxx9d7CM7ICGd03x5BFSKDDsr2ZjhGr+XDGYvljJmFD9Cu\nsZ8PAVRjVG48FpDsI+b0AXRgSrSEW3mw+LQUAiav0b+P+2ztLYQ+zlkdk058\nEk62XfLuVWxT9UKuOzxG/a208TUBlohy6fwTRUorl2LyShwPREunpEOXmc63\nBFcp7jEe42SRuZi6T9kIXLxWABD47/6MuMLVb/TCXaZ1Gezcl+e4DywrNy7v\nVlD7PPHWRiWUgnuoKZ7SHIMomvu3B+9EOkPuGIN5GpTmHjzQ5ioiIHfs/dc9\njqbQk77abZzT5ecfofgkjb3BaSrkI2GfnRov+ANmfaPbDTRYvABZeziJUhL8\nnrRkjFxrhkq75+cd1hYvRNfpzOJdOBNFRBlYGvby+UJu4lKK5epHMcjzXb0v\nWIWq/GrgsoRMDrFZRyLRhci9cUvfsC6pA4nLypumP8CgpOxy0WE5UyYxeUvD\nmpUn\r\n=5xGM\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDt9cwlou2dX+CprJCBFLQOOIwMOI/jN6XeB7fBJHm/IAIhAK33TzJIgm2lkG+iTe0gfRtUvULSabHZdEpUCi7ohSF5"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"yefim","email":"hi@yef.im"},{"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":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-formfield_0.26.0-canary.0547aeeb.0_1638808534061_0.5882020955054377"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.3b2452cc.0":{"name":"@material/mwc-formfield","version":"0.26.0-canary.3b2452cc.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=14.0.0-canary.b6510c8c1.0","@material/mwc-base":"0.26.0-canary.3b2452cc.0","lit":"^2.0.0","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-checkbox":"0.26.0-canary.3b2452cc.0","@material/mwc-radio":"0.26.0-canary.3b2452cc.0","@material/mwc-switch":"0.26.0-canary.3b2452cc.0","@material/rtl":"=14.0.0-canary.b6510c8c1.0","@material/theme":"=14.0.0-canary.b6510c8c1.0","@material/typography":"=14.0.0-canary.b6510c8c1.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-formfield.scss"},"publishConfig":{"access":"public"},"gitHead":"a95f7a1cbf5dd38cd64c9bb8e02e76d0b8927f1d","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-web/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-web/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-web/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-web/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a95f7a1cbf5dd38cd64c9bb8e02e76d0b8927f1d/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a95f7a1cbf5dd38cd64c9bb8e02e76d0b8927f1d/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a95f7a1cbf5dd38cd64c9bb8e02e76d0b8927f1d/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a95f7a1cbf5dd38cd64c9bb8e02e76d0b8927f1d/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n|----  | -----------\n| `--mdc-typography-body2-<PROPERTY>` | Styles the typography of the formfield.\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.26.0-canary.3b2452cc.0","_nodeVersion":"14.18.1","_npmVersion":"lerna/3.22.1/node@v14.18.1+x64 (linux)","dist":{"integrity":"sha512-2tgj5MPffNqTphMUKBuJd5ikDNN5Ts3+UG4tjc7exD+bWSuFd5nEOb6xX719vXXGrOCWBX9wgpcti/BULt3mXg==","shasum":"ad668d3c3b3cbc859ef3b7e09c4f7ded66e0c827","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.26.0-canary.3b2452cc.0.tgz","fileCount":13,"unpackedSize":36190,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhsUg6CRA9TVsSAnZWagAAPl0P/2GC2YgNm2U4oRDMZ88S\nSHMGNc48q/lqStF/6qS8Z/LIBguQVMc/aSa0WyR21O9EsYlpcTYdYZLoTyuB\nD3ba+0QzOWp9sPOqusNQm8QpQNF3ZC6iHFAgvyzTDRBMQOhVuQR+jBtE/T+a\na5Pc9wWIRMUawJcprWgpxuVwbowQj/+w9wD4GoURfOxcCGQTo6rWvPo2Jg/4\nprv3dXnCVWKBLYivDwawEeIMirhfK5+u9ZDFIfLs3xbSuREhhneRqCneOoV3\nLY606hwWKJjcXOWr3F6XYqKKM0i0Q12OBniZfPAE7tczdwrYds56AMLUont+\nmF1bTDhJNZ7Q8AR1fk8ziLmRov/s5mnqCIoi+vXgfasJA5qhEOAXWF8VrE28\n1jG68+gPAqcmvtEZki7toHNlJdlIK6jZuGskP72wB8euNMWDORB//RnaxZZg\nGshogA1GLz4yisU1aHr2HY7v5q5rV8C+CdDf+fWZrGqfIND2GMDFhwrEAMyL\nRzKHbgDZUNjmxEs0is75BF5QWk7kOpxl43XHw61uLm100seenfb00hJPcUkT\no0zoiX46YpMMikLW2MQe4lVs8XAUsu7RMAsu4f/FUnWMmQQuJVtZl6iPmDD9\neCcfRDu37nkeZM/pia2/ccbqvAMu+OT0JjTUwTLeEOYFvingyQQ+1YAZ1BB2\nim/O\r\n=/ujS\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFQ0zJwmJyMa1jH9fWiqPORzLUVV9eLS406nU6FgM1ZHAiEAkcO75oKiTRpeSrNlvpaQunuYzT0KR9uSXQueUm1FDls="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"yefim","email":"hi@yef.im"},{"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":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-formfield_0.26.0-canary.3b2452cc.0_1639008314191_0.5925391273897722"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.cf7ba5a9.0":{"name":"@material/mwc-formfield","version":"0.26.0-canary.cf7ba5a9.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=14.0.0-canary.f460e23da.0","@material/mwc-base":"0.26.0-canary.cf7ba5a9.0","lit":"^2.0.0","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-checkbox":"0.26.0-canary.cf7ba5a9.0","@material/mwc-radio":"0.26.0-canary.cf7ba5a9.0","@material/mwc-switch":"0.26.0-canary.cf7ba5a9.0","@material/rtl":"=14.0.0-canary.f460e23da.0","@material/theme":"=14.0.0-canary.f460e23da.0","@material/typography":"=14.0.0-canary.f460e23da.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-formfield.scss"},"publishConfig":{"access":"public"},"gitHead":"7e92aaee33b1c30269a52ec2c26232d0690d3d58","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-web/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-web/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-web/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-web/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7e92aaee33b1c30269a52ec2c26232d0690d3d58/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7e92aaee33b1c30269a52ec2c26232d0690d3d58/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7e92aaee33b1c30269a52ec2c26232d0690d3d58/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7e92aaee33b1c30269a52ec2c26232d0690d3d58/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n|----  | -----------\n| `--mdc-typography-body2-<PROPERTY>` | Styles the typography of the formfield.\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.26.0-canary.cf7ba5a9.0","_nodeVersion":"14.18.1","_npmVersion":"lerna/3.22.1/node@v14.18.1+x64 (linux)","dist":{"integrity":"sha512-EQnyb4uUWNcA0tGI4A3JzYTbSGuQzJu2m+3xxwtRV+FvZzXwczLq+Nnzf3HXYSsYCpilw3Q4J6318FrYPhLt9Q==","shasum":"685560afac2db3002e86f3edf8c49e50e1cf94c1","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.26.0-canary.cf7ba5a9.0.tgz","fileCount":13,"unpackedSize":36190,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhs6U0CRA9TVsSAnZWagAAm+sP/355MmihsOU4BR4KKb3w\nid/QsW8UQP/EBbwSme1AYzuNnM+oTT2IbG6wnCJW4qgLCDXdwQzu/tWdWflS\nKt8i+lk5RW/vM8QxmVnjwPld//D5afyvfX2uk7eWVZFXI1A0qSd5rSbUWi2L\nLof8+tkuPtB7wdZWsnE9alzgZRmir+akaAAnGVNGlOpHFW9Uzvy2uXiPKEmQ\nHmU1uNEMKjHKQt3gO6BTZ+xDVTkEh6j6ZztYq5IGK8rtK4MWvW5dz0Vqebnx\nUWmdAtBR01dHue1vZbejf3izKsd+FfjHqDIB98cyIJAlA9VL02gZXEmOH/r2\nRzgKNNsoOUZ0fIcBn/0pecxW1OkQzRCP3StkMG62uUALAju/kQZR7w80Joox\nBYg7tUXh2NYXIiL045YDc01ZW5J6je77lB/djjxmpAGna9EKMFCkkyvPipRy\nVdAm3tqkd9FA/hiF5Wc043QL6MDqiehA4Urh/6fiW7QV77twNL7x4veFHO6L\nZIs58VhOhk6KzEviohUuNHeVFki+Am0fmlOLEV5Ql4vTaGQ9hVi3FCPt3sJq\n7vjW364os+guO69nqx9pYZr+uotlkcv+I8mI74oSkDCfysSzx8PTB3DZZ4Fg\nK8IX0AKRkUQjNJvIn00WdOQUXsPgl6k2w6hY5H2xSlDCieBqre9NeQ7cMH1p\nXI93\r\n=jRc3\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD3jVZYEyuImnqq2NPI/ROV8qnMJBV9ComzvylxtlhgNgIgW5unLmFAwom/GM5c293xInwXwdyN29WdTMKd7pLc7cY="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"yefim","email":"hi@yef.im"},{"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":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-formfield_0.26.0-canary.cf7ba5a9.0_1639163188570_0.6216553221894305"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.e1bcf14e.0":{"name":"@material/mwc-formfield","version":"0.26.0-canary.e1bcf14e.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=14.0.0-canary.3366a71d7.0","@material/mwc-base":"0.26.0-canary.e1bcf14e.0","lit":"^2.0.0","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-checkbox":"0.26.0-canary.e1bcf14e.0","@material/mwc-radio":"0.26.0-canary.e1bcf14e.0","@material/mwc-switch":"0.26.0-canary.e1bcf14e.0","@material/rtl":"=14.0.0-canary.3366a71d7.0","@material/theme":"=14.0.0-canary.3366a71d7.0","@material/typography":"=14.0.0-canary.3366a71d7.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-formfield.scss"},"publishConfig":{"access":"public"},"gitHead":"3cb6bc85426db9ac617c732735c808fd66cd1572","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-web/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-web/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-web/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-web/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3cb6bc85426db9ac617c732735c808fd66cd1572/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3cb6bc85426db9ac617c732735c808fd66cd1572/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3cb6bc85426db9ac617c732735c808fd66cd1572/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3cb6bc85426db9ac617c732735c808fd66cd1572/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n|----  | -----------\n| `--mdc-typography-body2-<PROPERTY>` | Styles the typography of the formfield.\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.26.0-canary.e1bcf14e.0","_nodeVersion":"14.18.2","_npmVersion":"lerna/3.22.1/node@v14.18.2+x64 (linux)","dist":{"integrity":"sha512-Mh3mCg4kSH++nsua7u9PYeNakluQTkLor5xe/EJ4MkjgDH1kHjekEvCbTcVCMaayCyDibINCDCPWGlNdMuhE7g==","shasum":"509c024f22355d3027a5472bc109f44c93756879","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.26.0-canary.e1bcf14e.0.tgz","fileCount":13,"unpackedSize":36190,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhy3dYCRA9TVsSAnZWagAA89AP+wfysQwTdko6PMAfOfUF\nsIBU7Y2Km+x3EzPu4TPQL3wje752wplwUWg5Jc9AQc1GHfN9SHm3qb/gkaHs\nArZx1VmlgiY2bhvhm+bcEMaxSrr0Zqyk/iDaZZuawGxr0HaK15jkp0NltxaY\nCqrsgW16VpqKZCPCFnPIv6tWacFMElzlCacLp0AxT8/EEgSmKcsjtzx1Gmc7\n9QJ/C3czA/MQ/RWA/FrcuuNS/EnZWmgDNEmlB/dAlAsZn1gLZp3fv7F1ldc9\nWf5OAudE/YXmDOpyBmxpqQwiWFz20F9a18Vp+wY0XuRaOL031U4fQlvFBE12\neCHEA5z8O0aPvCZAwt8aTtAV+Z08sCqaardzCB9/10p2rODpwDBjX4g4exXm\nHJ6IGO1nUfr55hq1UVZ86rMa3y4va4gSvpiBM3wE4DO3KtCFQKpOMBeq3VAD\nKEzrwga0mtH6Ybd8BiKKHuk/6oXC5S4u4hmEaBjtRcdqyUuH3ax1/xbaJS/W\n6inAYc2RDHS0bMkFnCOGa1hmsX8LrrcNtn1fMiDTlU4DPYb6dppCQD5fmPvw\nBHNAkwPp2sm9V46POqW3HsCALE4vxUgMPYYfTdRGj4Vg87iBhBU+7ecFJ88W\nI6NsKNu5rn8XUjVNjA2zbCKS9sBPsGN0qibIrx8znzgU/VjoslLNqkmmRFJI\nD2eH\r\n=ukn+\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCH9aihOUugrgrQmUJQ7dI05PUz64er3HAOabyfswSqOwIgN8xYbIELbh/d1RBRr1IbneG0qeS/QJp9VuRsDX0E4SA="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"yefim","email":"hi@yef.im"},{"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":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-formfield_0.26.0-canary.e1bcf14e.0_1640724312295_0.7628153906027504"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.b9d35b69.0":{"name":"@material/mwc-formfield","version":"0.26.0-canary.b9d35b69.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=14.0.0-canary.c047f7c19.0","@material/mwc-base":"0.26.0-canary.b9d35b69.0","lit":"^2.0.0","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-checkbox":"0.26.0-canary.b9d35b69.0","@material/mwc-radio":"0.26.0-canary.b9d35b69.0","@material/mwc-switch":"0.26.0-canary.b9d35b69.0","@material/rtl":"=14.0.0-canary.c047f7c19.0","@material/theme":"=14.0.0-canary.c047f7c19.0","@material/typography":"=14.0.0-canary.c047f7c19.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-formfield.scss"},"publishConfig":{"access":"public"},"gitHead":"8ee41fe865471367787d08d3f94d1800c5712d3b","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-web/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-web/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-web/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-web/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8ee41fe865471367787d08d3f94d1800c5712d3b/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8ee41fe865471367787d08d3f94d1800c5712d3b/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8ee41fe865471367787d08d3f94d1800c5712d3b/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8ee41fe865471367787d08d3f94d1800c5712d3b/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n|----  | -----------\n| `--mdc-typography-body2-<PROPERTY>` | Styles the typography of the formfield.\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.26.0-canary.b9d35b69.0","_nodeVersion":"14.18.2","_npmVersion":"lerna/3.22.1/node@v14.18.2+x64 (linux)","dist":{"integrity":"sha512-fBG3nH/eLMAGcb56w0JYSr+9cKTGaBqiRjT4vlI5rh8e0HS4BgMQtrv5OQDdLctcWsS6AOOLo3VhU9wpc/EVuQ==","shasum":"560ce1b1b7e26df5347969c5239b7e41b1d7f0d5","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.26.0-canary.b9d35b69.0.tgz","fileCount":13,"unpackedSize":36190,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh1eLSCRA9TVsSAnZWagAAAaIP/RCRNkfKdc3Jh3ig4nDr\n19ZncMqHjVZz9OY4vZMky4ZQUWTjKPgWyDEOUWWDZr8Vtxg25K9ygwen3u7+\nfBbiQnCb9zPnl6vXC9DcmeeMBmpSFrqpj4VewAGZy7y9X2zEyMeLnuSbiOsy\nySmU9iN3IIy3jw31BY56PDmDpb9GEELkaB5TpITydROD8pEy4l0roWkb56fh\nd1hUr1pYmkNfO0TYTvShe4uZQTXb6delNw+2MUW1P0serDE4RsiYLj2cT6bX\nodYVYBZs+UECGz6VY71SEZQksLJmXcJenCRPOYQtofzW+hOTSYPlp65bgbS5\n+CYYn5BV1ByQWJzaqAppNKavs6vRYcVzxu2nqT3BRSA08AQuAMs1PqofYl8l\nsKHmevow/8wVLI+KV0qHwZw1Pmu4a6sE8U2ttefmplNgk/LsGg1xXiKQzfqF\nHTzHnAGMceXyvtfCI90enxvBlhALDwLR3J4ko3ppAFOApXDH/jApEGdWiDFz\nxFOKDtkxWMWyDoAyGP3POceqcGwd4Fl+WRCaD9n/VwJ0LFUxBboZ2uMCbU6U\n3WZ/Puhh8+F79ndZqDmwjtgn9LKrNrXIh/ILfKUCOG0A0hcLXK8hbS+v2aXS\nsad71QKacdAx8CDb3Sw1sHIbJhn8SWzhauunYphfqh7hMfx4Re3RyjXMJgsI\nEDLG\r\n=ycjg\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCdk5k24As4WS0YsFoF5UCML0si7PRp+59BMHzAYAkZlwIgAi0CgApC13EDMykyQL5w0VWa/SKGHxx2f1jUhVI+m+4="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"yefim","email":"hi@yef.im"},{"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":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-formfield_0.26.0-canary.b9d35b69.0_1641407186258_0.495694641402215"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.2afff08e.0":{"name":"@material/mwc-formfield","version":"0.26.0-canary.2afff08e.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=14.0.0-canary.05db65ec0.0","@material/mwc-base":"0.26.0-canary.2afff08e.0","lit":"^2.0.0","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-checkbox":"0.26.0-canary.2afff08e.0","@material/mwc-radio":"0.26.0-canary.2afff08e.0","@material/mwc-switch":"0.26.0-canary.2afff08e.0","@material/rtl":"=14.0.0-canary.05db65ec0.0","@material/theme":"=14.0.0-canary.05db65ec0.0","@material/typography":"=14.0.0-canary.05db65ec0.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-formfield.scss"},"publishConfig":{"access":"public"},"gitHead":"9bada09943cf93e3b0b697ef81fb87cc7b781379","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-web/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-web/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-web/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-web/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9bada09943cf93e3b0b697ef81fb87cc7b781379/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9bada09943cf93e3b0b697ef81fb87cc7b781379/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9bada09943cf93e3b0b697ef81fb87cc7b781379/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9bada09943cf93e3b0b697ef81fb87cc7b781379/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n|----  | -----------\n| `--mdc-typography-body2-<PROPERTY>` | Styles the typography of the formfield.\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.26.0-canary.2afff08e.0","_nodeVersion":"14.18.2","_npmVersion":"lerna/3.22.1/node@v14.18.2+x64 (linux)","dist":{"integrity":"sha512-S6MvQOsbYdlxIh6aMd8fcpBbKvK8r86pozPKBoE23cqnxXFCiwRxvs11bMznJSeAX+MkFZ9HgKoE4ZaoxcQVyQ==","shasum":"d2c09215c75165968dd9fcec1f94151a890c1e5c","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.26.0-canary.2afff08e.0.tgz","fileCount":13,"unpackedSize":36190,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh12uhCRA9TVsSAnZWagAAIvUQAIyr/B11ewaQvzT4Risw\nOWzi+ATiN9PczHtQzVNtZXk5VoSq6BIJj5vvaM4YXZA2UYMVeSWAJ9cf8yCH\nu35Srd4uwZTSVSGt5bWDhvuErK+sTMzyz3Yeq3K0Sf2wijuLq6Oj6LLfhS11\nYW0mEc2l/gJMl097hTaMEqkcaAJo1ej+mIH3m+99JoQNPa7XIPtrVG3Vf2sr\nXdDpndagQw5A/7TJbpe4FlyhA6NNOg5hpoyCNOLDS6boR0qZ4uqpyS5CRbwo\naPuvPgpuY2C8IILzhoT45FSFv0vp2LxkWnf4/2YhE1TeTjmIJ59xL0IdyTJ7\nBy9G5JtrgIdHrsFIEJPkH+c735fJlOeefEajna08Meo1OJsbMi6TGftrMbPb\nNKjdEfX29KsUIOAfV10J5m6I1HHS71J9Uui/pGUDAIFWHPM0UvIOZ3YEnMTu\nzgNac4Sgh8I+fiDA42wjFkY/Z1gAStWdT+fQf6p+/SxOWm7IJyMk8Cgt/tOt\nF0875DclNSw2pWNEdBAdA9jFy5hQeEKg96bRx5QoJHiVYmUUfR+bJrvlDQQL\nWL+2WmIwMMcEEhYZF290XVXPAPHTbLoP4c9COo9B4C2/Abw/zcxBBPB0MhrP\ng6UbmWgtIrxApBMJ1/8TgkpxGv00rzPX4hEJRMtbsM4cQXO5k6z+h/kPKOBQ\nLJdE\r\n=Dchq\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBewecYMJQGDXIV2eNEL1uHnMX7bB4NxzJkGnK8GdV2HAiEAsmZO75UJrmH2o7bopJAMlacJKR9zwMo/D7U5+stBIH4="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"yefim","email":"hi@yef.im"},{"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":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-formfield_0.26.0-canary.2afff08e.0_1641507745352_0.7777102922206072"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.893fc857.0":{"name":"@material/mwc-formfield","version":"0.26.0-canary.893fc857.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=14.0.0-canary.6ca8b8f85.0","@material/mwc-base":"0.26.0-canary.893fc857.0","lit":"^2.0.0","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-checkbox":"0.26.0-canary.893fc857.0","@material/mwc-radio":"0.26.0-canary.893fc857.0","@material/mwc-switch":"0.26.0-canary.893fc857.0","@material/rtl":"=14.0.0-canary.6ca8b8f85.0","@material/theme":"=14.0.0-canary.6ca8b8f85.0","@material/typography":"=14.0.0-canary.6ca8b8f85.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-formfield.scss"},"publishConfig":{"access":"public"},"gitHead":"6cbd6b098ea6e47fddfd2a5875df6d41262b532d","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-web/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-web/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-web/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-web/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6cbd6b098ea6e47fddfd2a5875df6d41262b532d/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6cbd6b098ea6e47fddfd2a5875df6d41262b532d/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6cbd6b098ea6e47fddfd2a5875df6d41262b532d/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6cbd6b098ea6e47fddfd2a5875df6d41262b532d/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n|----  | -----------\n| `--mdc-typography-body2-<PROPERTY>` | Styles the typography of the formfield.\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.26.0-canary.893fc857.0","_nodeVersion":"14.18.2","_npmVersion":"lerna/3.22.1/node@v14.18.2+x64 (linux)","dist":{"integrity":"sha512-BwYi6qfE7VLPluclfchE994XgzP7tzwm+TZ3EcdZ7JxuJY3XNt7hGipoRtyQEgRDFmmefgVpbcrtDXhthbvLrA==","shasum":"d15e61cddb6830f54eb06a678e2edf14c193c46f","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.26.0-canary.893fc857.0.tgz","fileCount":13,"unpackedSize":36190,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh2IwcCRA9TVsSAnZWagAAmlAP/34TOpbEORX7eHBC3uQA\nOOfHP59iZX0DK39sjCO12FKnkkvBoKAVnN5ltpwd6junrPS3FcSEDnRv98Kh\nt8zHSonoH5IpL/fvG+kokKxIcIYF4Q89SqnkxiX7k4CpZzW5HHoxzAcP3bQc\nuT1OlMke7uZ8IGX0WA8A5O+e+APe6abnUnR45/gBDrkj1kL6W1m10ipwRS6R\nRbJkWIUvn46OUK8J9WhGOyQSqM4NWIeVF2ZaQJ8WnxcIopw+LMZvehqiPPBI\n5P/2SfYCUxLni88QB2AftQB4AGj/540pe9tX8++5GB/XIIlQ27cz6TvErkLE\nDGp6Gl1/udjzR5B2KfyNeC/Sq+6rs4MkGbevl5ExbryF61AiwfiuGhsaJNYD\neiLB+OWChuNHggsdO0+DZxvyYc0TANTBduqpUNLW0MuOU/P8jmZcenn/6qBJ\n7YkzBldtwulCZaGJ31LPTnLP6KedTYYivtv46j+mNXTPnLg7izDr+JpSOLMM\nQFw93pQ7s7xpkFHHW5W+Fje3GMhzOtGi4gXr4e7n6pqOUq5T0bWOvpeHA0f3\nlzn3+pGLvqt0ZiqvQ936tipPYT2lUoUycYD2mHwYoMT2L1cWel/sly0NRmbE\nAVJk+iJQOHVQDWeCd7PswdrhpHD4H33GrnAtjWVT+n7kbO6OzWf/dcxnV7sr\nwkJP\r\n=YsqB\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAbXAfXhMteMOvzubIlN6AjMn8aTDWqKAWzQXuCqhnznAiEAoSELRgdY5bpmw+4oI/p06nSe/tlbfPLuhPPV5Ibraeg="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"yefim","email":"hi@yef.im"},{"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":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-formfield_0.26.0-canary.893fc857.0_1641581596206_0.8170983323098007"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.69ba13b7.0":{"name":"@material/mwc-formfield","version":"0.26.0-canary.69ba13b7.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=14.0.0-canary.c14e977ee.0","@material/mwc-base":"0.26.0-canary.69ba13b7.0","lit":"^2.0.0","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-checkbox":"0.26.0-canary.69ba13b7.0","@material/mwc-radio":"0.26.0-canary.69ba13b7.0","@material/mwc-switch":"0.26.0-canary.69ba13b7.0","@material/rtl":"=14.0.0-canary.c14e977ee.0","@material/theme":"=14.0.0-canary.c14e977ee.0","@material/typography":"=14.0.0-canary.c14e977ee.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-formfield.scss"},"publishConfig":{"access":"public"},"gitHead":"776b813e379c8d90abf2a0ded57168c12f62adff","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-web/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-web/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-web/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-web/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/776b813e379c8d90abf2a0ded57168c12f62adff/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/776b813e379c8d90abf2a0ded57168c12f62adff/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/776b813e379c8d90abf2a0ded57168c12f62adff/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/776b813e379c8d90abf2a0ded57168c12f62adff/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n|----  | -----------\n| `--mdc-typography-body2-<PROPERTY>` | Styles the typography of the formfield.\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.26.0-canary.69ba13b7.0","_nodeVersion":"14.18.3","_npmVersion":"lerna/3.22.1/node@v14.18.3+x64 (linux)","dist":{"integrity":"sha512-BoAWbP0KvpJgrmhwiSMS8BBkcwdp8xgnluW7yukLQPKMuXZi0E6trMhkn3B9fw1kAHeWViJffC+keh+A2yGg/g==","shasum":"c866c59b1477189d5e22ffafca6901a20b7a03b3","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.26.0-canary.69ba13b7.0.tgz","fileCount":13,"unpackedSize":36190,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh6I9XCRA9TVsSAnZWagAASA0P/Ak3yA0IXu/xl+f8CBdf\n5OJnu9Zcd3U5w9sdkANjL91TNZDwVz7mEsCsT6qbleMHqu4l7VN9gFNnbmkk\nzu5xr5lheauiGnVPy18sj6dypbcAyzKuZFVhAYgnf+UdQ3xVQPiG8NShw2j6\nC/QBIP7kJlZ/E6qgbLVpLj5HNKjlwqRx3GGC5aVZtMv9dFuxTsrriDGBu+XY\n/T/OjYdO42FKrGwgoul74f+wZCTTDjCXAsVFaD29mR4fqhNBHDtQ3K38A0MJ\nMeb1IpcAF3K8qIMABS8ust1b/doj06N0xOsx8kbE66bS4TDsxUypnkvDDdda\nMF7oCuQXvnppzgD9IlP3L9PmMe1e6Me2prJSpTpQhmZo1CJFE0lCtf+NTCEH\nM+dVjTa+FKnWBb9X7h1yDvYb8IxQKeK46R50hDLw3RiHEzxwtUae9trcVzVo\noH18YL7SaP2StjrRVFDl48yIDjVFrbmOEiDfEUp5ZY8eXYwWvnYlHokvMUso\nYcXG6IOxggIeOMeAe2YcJOWH4+iQ5XS+jHchmO3nldrUs+GZ1Lsp/12n2SiL\nZlNHIlkfikz6c5hI6/rAKucwVcSu3KtVcStOY2WB0Fv5vihVEy1vm9fS6IeO\nXqVtWQhOu+sAXWvkJcQ0rTJCFU5nZxdw0QXevrRFfUaXs6xVBYQcRwql2vXK\njvWc\r\n=e3Zp\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDckHFwvgBsxGNcjekCs05I7YC3w5F6igLQjwNJoX7pbAIgG74K7eraenEBZKD++Jm7vxTUWjHwIawHFXcEIQEPpCg="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"yefim","email":"hi@yef.im"},{"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":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-formfield_0.26.0-canary.69ba13b7.0_1642630999552_0.8060897900000656"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.0af8ade5.0":{"name":"@material/mwc-formfield","version":"0.26.0-canary.0af8ade5.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=14.0.0-canary.c14e977ee.0","@material/mwc-base":"0.26.0-canary.0af8ade5.0","lit":"^2.0.0","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-checkbox":"0.26.0-canary.0af8ade5.0","@material/mwc-radio":"0.26.0-canary.0af8ade5.0","@material/mwc-switch":"0.26.0-canary.0af8ade5.0","@material/rtl":"=14.0.0-canary.c14e977ee.0","@material/theme":"=14.0.0-canary.c14e977ee.0","@material/typography":"=14.0.0-canary.c14e977ee.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-formfield.scss"},"publishConfig":{"access":"public"},"gitHead":"64bb121cb77aee6a854395ad838fce32a6051337","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-web/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-web/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-web/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-web/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/64bb121cb77aee6a854395ad838fce32a6051337/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/64bb121cb77aee6a854395ad838fce32a6051337/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/64bb121cb77aee6a854395ad838fce32a6051337/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/64bb121cb77aee6a854395ad838fce32a6051337/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n|----  | -----------\n| `--mdc-typography-body2-<PROPERTY>` | Styles the typography of the formfield.\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.26.0-canary.0af8ade5.0","_nodeVersion":"14.18.3","_npmVersion":"lerna/3.22.1/node@v14.18.3+x64 (linux)","dist":{"integrity":"sha512-+yj5/i710sjLVP9vGgLGd9pucj7+PkZH7JeDP7XoOo8LcPhrrn0f67YcCJkw61spZpcFwFbg0m0dvbJPpaOS3Q==","shasum":"3aba958a7e4dfdb67e5256a39f5f16614228d8e0","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.26.0-canary.0af8ade5.0.tgz","fileCount":13,"unpackedSize":36190,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJiAZd0CRA9TVsSAnZWagAA6ZoP/j056USIDWmF56JAHx0H\npPq/WAmGb11NMbep0WTx1QxudsfF/+mYx8dx6z/rbcMSLc7qnotSXFHwBCTQ\n1iu93z5jWM0nDFPCNHYJn20Vj5kabWKMnotvljLWSkzHCHmpWnGiqZ2m7ldl\nyIj65r1MYZr+zztNvWN9N6oM7LvnMmg6DgpfGMCynnFgVxeK394J3noYGaWz\nxZOh7cUEB+KJSBE5V6K2UtDVu6//Hk0nyxApET0IFZTWycaPYQ9SaPKrlt7T\n95zrCbuOwnFkbuXw95GUgMpXlRJOuT9VofqXw9bouyNk3UUw8wfgOJSNjUkA\n4lDqRsUzdpFT+uq5p3Pgxpz9aFGhpFul+o3Skdy62W7d1yuBj30+v1SihbdY\nkq0Fpg7447E1aqlBYbitHNmdhagR2VV207TLNU76BcCuev67tFYQ43+49AVf\nBIw1iVQO3/BtrcfbmHQtWtInf8OGVwOCY6lTDEoj7MNe//vnFEZPehq3iIYZ\no9Hy20e3KJkJEXQbtt3Xi1UXR2HZXUgcF81Gj21qfS8EYyRhGBvuE/e4H/UO\noMcqPz44jWyPW25ZgVur/d2yPpvNKCfb+ub0r8KnjAthmR4UJiZH/00PbSs0\nB58YQRzriVR98++ZlHt64yQAB17S98CKFu/0EAQCcUWxAsitVbRg9esgiZwn\njfIK\r\n=Dg2u\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFBo1FjOQq9j3BXrBIbOMCq1EYUIwQ3zFQkrYg57Ix2EAiBDUTSNC8VI0W8YhKxtt7NV2njT23myVDlnKTY4AO/fYQ=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"yefim","email":"hi@yef.im"},{"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":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-formfield_0.26.0-canary.0af8ade5.0_1644271476721_0.8578790357039143"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0":{"name":"@material/mwc-formfield","version":"0.26.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=14.0.0","@material/mwc-base":"^0.26.0","lit":"^2.0.0","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-checkbox":"^0.26.0","@material/mwc-radio":"^0.26.0","@material/mwc-switch":"^0.26.0","@material/rtl":"=14.0.0","@material/theme":"=14.0.0","@material/typography":"=14.0.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-formfield.scss"},"publishConfig":{"access":"public"},"gitHead":"056b3ceffbe2fe3408dbdbb319932da85637e779","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.26.0","_nodeVersion":"16.14.2","_npmVersion":"lerna/3.22.1/node@v16.14.2+x64 (darwin)","dist":{"integrity":"sha512-ewINAB4d6yjasiWO9J80OmWNxlm3wuxeYMtlk1n+9/nP5f5TF3OwsuByFudZDIzTs+cLdgZOurFOQWTRBYDsXQ==","shasum":"d78d21c5ba4e72eb6bf0140341e03b4c1970856d","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.26.0.tgz","fileCount":13,"unpackedSize":36010,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDxIW4ygS8X8sPLlpVONx+FAaUqAW7axayuw2C7krgATQIgAeAoae9EEH4JOWIrzWjinRys4Abt/5BrvCW2Mu8r7KM="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJicWa0ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmraqw//R+1+QdzzM0LETvU6FfHYFcLQWWZKO6kinDkSQBvEn06W8++b\r\nvjlHA5KdUbbbBWpLr8RGKd8ssWuvsc6z/2Qn0hp1KACLghIfskDDqxlwZbzB\r\ndwScKrqp3dnKnxnFqoUG5pT0+nTDJ6GxQSp/UefAsOF/fV1se7NCHUNFIa9Q\r\n7XFDjKxPzlx72rbdB/2rjFxL8svgCUcHQkw1edWD/0kdbTlpm/65vrJbj66n\r\nwva4FZLVgr7DNufLqCY8bdHD49kLlGXqJThSk3ahaxmyv1KMDORXq4DmuQdZ\r\nJwzjsFX4lxjaB6bVt9qMrFR5YKniUaAM9eDVgXHqS55Dg+kQjJTlwsk7Y5t6\r\nKb6J8fOP4T6BGAS9qmJwR4DUflYPqhiAJ20I5cbtcA9YbZCIdONVi00ET5EA\r\nBMfNkLpKbJKiQ87UcfHSwPtg4QyVNLY2UWQ/q4sXveqKDjKgLOOZCGAD+P1x\r\n80kxoM0ZspBzC6jEbRAIbbSHyrrz5Md/K2IAhq9G6h6d34SR85SLWCXo4Avq\r\nowhys7sxiJhwGbqm9Qwji904H+/QTWIs3MYtq1ItO7QiatpDxCA96AbC+Ee8\r\nNfTKtcnv2BV6YVBQIKt1V4kvK3sc05RSIIxJlesADofr+y1UCTmv8aE5CjfF\r\nvP0OX/gfEKoUG/PlHjxqaFa71g2Kx4CR4xE=\r\n=hkkt\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"asyncliz","email":"asyncliz@gmail.com"},"directories":{},"maintainers":[{"name":"yefim","email":"hi@yef.im"},{"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":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-formfield_0.26.0_1651599028669_0.21123203763023102"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.1":{"name":"@material/mwc-formfield","version":"0.26.1","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=14.0.0-canary.53b3cad2f.0","@material/mwc-base":"^0.26.1","lit":"^2.0.0","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-checkbox":"^0.26.1","@material/mwc-radio":"^0.26.1","@material/mwc-switch":"^0.26.1","@material/rtl":"=14.0.0-canary.53b3cad2f.0","@material/theme":"=14.0.0-canary.53b3cad2f.0","@material/typography":"=14.0.0-canary.53b3cad2f.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-formfield.scss"},"publishConfig":{"access":"public"},"gitHead":"06b516b7f91867acd0cbe5676767aea8f490cbee","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.26.1","_nodeVersion":"16.14.2","_npmVersion":"lerna/3.22.1/node@v16.14.2+x64 (darwin)","dist":{"integrity":"sha512-0aFrTpZMR3+z/W67KGIy2CgYPhknoA0VD6CIephpDRbeTScAdtYXmAmtB7wm3lKHRVejdmXb8qIhq1mJoyG7Uw==","shasum":"6e4880a3f65bec6968535ce1510e4d3c5503d2cc","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.26.1.tgz","fileCount":13,"unpackedSize":36282,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD73/lkryMNHlKIrVD+s0w0X4MDHTAmVLQFLy6wtVp7rQIgJ6SJ701JD+dkAnMtC98sJsbQtoe4JoPUzXsXLVRuydY="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJieXoxACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpxMA//V1T2TmWGCqm8NRHTEiXs9+gb0TNSz+1GmNXO2seiilpcKuQp\r\ntfWQHReCKCwWi2rci1Twg6yjMPMndlE1yN51sINIydu4eQ1mK5RhN4S1uwau\r\nytgFnFTCrs3rSvsut95hQydCrpqhovjuIh69m28fUbWVBR9jl/8J24Cjw1f1\r\nKls5B1qkGmqrVKuRaXJkUDlQKMGGLoV+O4jP2Q4J1wLTsQJaI/UnNoIFaesO\r\nDp4rgsFOiZYCGHvN11ML8gPpz6h6FsCPMOoLMskleWhQ1d+eX68a+mZnrUGS\r\nLDSYUE11YhFz3bj2WL+Libds4/TC+jKpdiBI5U2Iq/mI2v+JavsncFbkLISB\r\nPz/Vc3kP0tzrwS9Xe2SGjOsoq5GnDh0WSBagk/SL2QWesEyfOYo80PAKYrT1\r\nE72q0AGUoywfFFe5Ge1pb9QrvAeoQpa79mrVxsuhO75V9i1gkn6r3epieJW+\r\nMeh8FK9S/BKrI7z7WK5Q50RE/TXyGiENnUb28sHV705D4u+HwAYlpDCQGwCN\r\n2UXiBxkDz4Roh5AArj7uisC7cJORjPIuAvkdc0+kjxEznrdDO7YDkdPi6YlN\r\nq14vgP7vYGn2Z/TNoew0vL6uN52gGRUMeJaCM75GY4hCt+YutkUnx7uaU0Ed\r\ne1q1mMh5PbbPERqMCH8tMQwehpPl9tgnaDQ=\r\n=CS0F\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"asyncliz","email":"asyncliz@gmail.com"},"directories":{},"maintainers":[{"name":"yefim","email":"hi@yef.im"},{"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":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-formfield_0.26.1_1652128305567_0.43004331068630197"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.27.0":{"name":"@material/mwc-formfield","version":"0.27.0","description":"Material Design formfield web component","keywords":["material design","web components","formfield"],"main":"mwc-formfield.js","module":"mwc-formfield.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"license":"Apache-2.0","dependencies":{"@material/form-field":"=14.0.0-canary.53b3cad2f.0","@material/mwc-base":"^0.27.0","lit":"^2.0.0","tslib":"^2.0.1"},"devDependencies":{"@material/mwc-checkbox":"^0.27.0","@material/mwc-radio":"^0.27.0","@material/mwc-switch":"^0.27.0","@material/rtl":"=14.0.0-canary.53b3cad2f.0","@material/theme":"=14.0.0-canary.53b3cad2f.0","@material/typography":"=14.0.0-canary.53b3cad2f.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-formfield.scss"},"publishConfig":{"access":"public"},"gitHead":"c1e876a15bc028034781984538ea803ba67dbed3","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-formfield@0.27.0","_nodeVersion":"18.6.0","_npmVersion":"lerna/3.22.1/node@v18.6.0+arm64 (darwin)","dist":{"integrity":"sha512-XGZtC1MTyGQ8b2osnaygGzS3qe2QvlWfXZepcFs9i6MW+b6VimQQ4c/KsKIF7dHmeY6N0o4k9pAZ086EGesXOQ==","shasum":"2a6d60f4324b4928ffbaccfe54086a48283d299e","tarball":"https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.27.0.tgz","fileCount":13,"unpackedSize":36282,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD9j2UJGG3JMDOwuGmXytSquauAhiZzf9EiK7JzsoGrAAIgG4LNJNC3tgNyHOnrzF+04UhS96QA6a0HxSwStNDCLEc="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi9qYAACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpefA/8CIvAb3twM1YIx0NkjMBlPRAW2PaxHkb503V9L5ke3Fe+I1t8\r\nhfix4bU21n7iMUA8cOb0DUcEjCIJRRvtLXLXi4ut9AD5S3QAao9Gz0JLJklU\r\nuaPp9PONpIYOyud4sjwmMNHK7aPK81S+f9htqzub6xtYdEHiEiQ5DRBWxEpE\r\n85KNK3WeKNubRu7fNwxjDDw6M9sCMYE2VGOJGLaahF4Dy/PTEKDnhc1TD/5N\r\nZJnzIv0x8vdsw8T35eADsggb5e9VrvFNxrYreSsuSmowCSvZwhS+4YEwzPEr\r\nW9d6ABJ1P6an/w73O9Utmt8eCshmRMlJ1qe1Almhmm5wgC6b398U9ew4sXtN\r\nVV8IikwUNsfpeE1fFVAGHi5If8SvocZxhiE+1bHqzCVXJZDZMuGJ45sjn7Kz\r\nDsZ8TXZTppFMSWrSxB0bIOWz/ExztQ4gVmyBdytPh512xgxggUhEOSP7XXdZ\r\nRMetktY34b6/YfUb/Ui8ib+55GQksD7SWVIshZMdHPhK0pihOvFUUcvEmkQ9\r\n7UMIjXRWzi0+S5tnKWofM7mApxGMT6wJO4ymfJrbQrNRJdT5Zaa/9VvnsvpW\r\n9+SiJtMjVNxqY+FDp4m/V1CUw3nJ9DTKVv+W5s9moimrav0ukP83VyeD9Wbo\r\nm6u7qrtWcvw97ZTVNvt48Hjnlvd/+Dkj02g=\r\n=lyDh\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"emarquez","email":"emarquez@google.com"},"directories":{},"maintainers":[{"name":"yefim","email":"hi@yef.im"},{"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":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-formfield_0.27.0_1660331520334_0.7994247108081238"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"}},"time":{"created":"2018-06-14T22:51:00.845Z","0.1.2":"2018-06-14T22:51:00.946Z","modified":"2024-04-04T18:49:45.781Z","0.2.0":"2018-09-14T00:36:31.058Z","0.2.1":"2018-09-22T01:00:21.517Z","0.3.0":"2018-10-04T23:25:51.656Z","0.3.1":"2018-10-08T19:20:36.597Z","0.3.2":"2018-11-17T02:05:56.021Z","0.3.3":"2018-12-04T00:57:59.987Z","0.3.4":"2018-12-13T20:39:13.351Z","0.3.5":"2019-01-11T22:16:40.399Z","0.3.6":"2019-02-05T20:18:33.271Z","0.4.0":"2019-03-12T00:01:20.812Z","0.5.0":"2019-03-26T22:38:45.077Z","0.6.0":"2019-06-05T22:20:07.905Z","0.7.0":"2019-08-27T21:23:38.008Z","0.7.1":"2019-08-28T02:54:16.775Z","0.8.0":"2019-09-04T00:04:19.821Z","0.9.0":"2019-09-27T01:36:08.255Z","0.9.1":"2019-09-30T21:04:52.977Z","0.10.0":"2019-10-11T23:28:11.356Z","0.11.0":"2019-11-26T21:49:27.100Z","0.11.1":"2019-11-27T00:26:30.039Z","0.12.0":"2019-12-17T23:47:47.174Z","0.13.0":"2020-02-04T04:46:28.354Z","0.14.0-canary.f790f713.0":"2020-02-28T02:27:57.766Z","0.14.0-canary.c759cfbc.0":"2020-02-29T00:04:34.225Z","0.14.0-canary.97ef53d8.0":"2020-02-29T00:18:03.675Z","0.14.0-canary.24f5fa6e.0":"2020-02-29T01:08:28.648Z","0.14.0-canary.960e214f.0":"2020-02-29T03:08:47.189Z","0.14.0-canary.a2f046f5.0":"2020-03-03T00:56:20.933Z","0.14.0-canary.024f371a.0":"2020-03-03T01:28:38.898Z","0.14.0-canary.2f164110.0":"2020-03-03T21:33:32.485Z","0.14.0-canary.edd465cd.0":"2020-03-04T00:10:27.983Z","0.14.0-canary.2b02d017.0":"2020-03-04T20:18:51.920Z","0.14.0-canary.cbdfe453.0":"2020-03-04T21:44:15.899Z","0.14.0-canary.02aa8a98.0":"2020-03-06T22:53:06.028Z","0.14.0-canary.7cd5aad6.0":"2020-03-09T23:19:53.395Z","0.14.0-canary.3a79dfa6.0":"2020-03-10T02:55:53.459Z","0.14.0-canary.22e0f5c9.0":"2020-03-10T02:59:56.289Z","0.14.0-canary.f23a1d1b.0":"2020-03-10T20:56:14.807Z","0.14.0-canary.34b2d69a.0":"2020-03-10T21:14:29.278Z","0.14.0-canary.dc04abe1.0":"2020-03-10T22:01:59.891Z","0.14.0-canary.04ccbc88.0":"2020-03-11T00:34:40.420Z","0.14.0-canary.55338c25.0":"2020-03-11T06:31:10.686Z","0.14.0-canary.b7e388f3.0":"2020-03-11T20:19:27.977Z","0.14.0-canary.b3211481.0":"2020-03-11T20:23:38.731Z","0.14.0-canary.0b5c7f23.0":"2020-03-11T21:53:29.486Z","0.14.0-canary.6c0f0b27.0":"2020-03-12T21:16:46.364Z","0.14.0-canary.b6c53425.0":"2020-03-13T16:55:03.985Z","0.14.0-canary.306cabed.0":"2020-03-17T21:17:26.897Z","0.14.0-canary.4e250cbc.0":"2020-03-17T21:23:32.006Z","0.14.0-canary.ff82d9ec.0":"2020-03-18T18:19:20.986Z","0.14.0-canary.f50f48ef.0":"2020-03-19T18:55:01.878Z","0.14.0-canary.134cf877.0":"2020-03-19T20:38:56.923Z","0.14.0":"2020-03-19T21:28:26.022Z","0.15.0-canary.2c1a4913.0":"2020-03-19T23:00:36.423Z","0.15.0-canary.3a6e481a.0":"2020-03-20T18:12:42.655Z","0.15.0-canary.603d6eb3.0":"2020-03-20T21:35:31.220Z","0.15.0-canary.05c6a93c.0":"2020-03-23T16:36:07.948Z","0.14.1":"2020-03-23T17:57:24.741Z","0.15.0-canary.4e6be3f4.0":"2020-03-24T20:58:27.528Z","0.15.0-canary.c29a683d.0":"2020-03-24T21:16:17.911Z","0.15.0-canary.fca3dd9d.0":"2020-03-24T23:42:48.462Z","0.15.0-canary.1e73da49.0":"2020-03-25T21:29:35.787Z","0.15.0-canary.bb6dfc5a.0":"2020-03-27T01:22:44.106Z","0.15.0-canary.1884603d.0":"2020-03-27T19:55:05.508Z","0.15.0-canary.aff73cab.0":"2020-03-27T21:14:01.289Z","0.15.0-canary.63168f61.0":"2020-03-31T18:12:05.473Z","0.15.0-canary.9fb79b3e.0":"2020-03-31T21:19:52.001Z","0.15.0-canary.9bd3e9e2.0":"2020-04-01T00:15:16.117Z","0.15.0-canary.072084ab.0":"2020-04-01T18:39:20.766Z","0.15.0-canary.4dec04af.0":"2020-04-03T20:29:20.009Z","0.15.0-canary.9b676354.0":"2020-04-03T20:29:37.405Z","0.15.0-canary.6b946095.0":"2020-04-03T21:23:48.103Z","0.15.0-canary.5ccbfaa2.0":"2020-04-03T21:29:15.185Z","0.15.0-canary.a0ab8772.0":"2020-04-07T20:08:31.259Z","0.15.0-canary.8d352305.0":"2020-04-07T21:41:28.393Z","0.15.0-canary.31eac79f.0":"2020-04-07T21:57:04.407Z","0.15.0-canary.ba05565e.0":"2020-04-08T17:32:08.032Z","0.15.0-canary.25099f79.0":"2020-04-08T21:30:21.471Z","0.15.0-canary.447e31c6.0":"2020-04-09T01:16:02.909Z","0.15.0-canary.d6dd84f7.0":"2020-04-09T01:24:42.663Z","0.15.0-canary.9b03ee68.0":"2020-04-09T20:02:29.962Z","0.15.0-canary.bbc25b10.0":"2020-04-10T22:45:06.108Z","0.15.0-canary.339cbfd4.0":"2020-04-15T17:38:19.255Z","0.15.0-canary.b74ff19f.0":"2020-04-15T20:03:47.751Z","0.15.0-canary.aaa16853.0":"2020-04-15T22:40:41.489Z","0.15.0-canary.826b23e7.0":"2020-04-16T18:56:36.285Z","0.15.0-canary.e1ad2b2f.0":"2020-04-17T23:01:01.534Z","0.15.0-canary.bade5580.0":"2020-04-17T23:18:53.174Z","0.15.0-canary.dae38247.0":"2020-04-18T00:15:49.730Z","0.15.0-canary.a04c0b82.0":"2020-04-18T00:33:58.685Z","0.15.0-canary.715decfe.0":"2020-04-20T18:34:53.909Z","0.15.0-canary.c862cd04.0":"2020-04-20T21:33:43.559Z","0.15.0-canary.e9b01b35.0":"2020-04-20T23:29:05.979Z","0.15.0-canary.ee7e8989.0":"2020-04-21T00:50:54.696Z","0.15.0-canary.9bf47ffa.0":"2020-04-21T18:37:29.428Z","0.15.0-canary.078dbd98.0":"2020-04-21T21:11:47.992Z","0.15.0-canary.953015d6.0":"2020-04-21T21:35:13.938Z","0.15.0-canary.c360ec63.0":"2020-04-21T21:58:31.081Z","0.15.0-canary.d71b65aa.0":"2020-04-21T22:37:19.998Z","0.15.0-canary.58d51135.0":"2020-04-23T00:44:30.874Z","0.15.0-canary.d0af8ba3.0":"2020-04-23T18:09:32.563Z","0.15.0-canary.8872b17b.0":"2020-04-23T20:40:40.022Z","0.15.0-canary.eca1a610.0":"2020-04-23T21:42:38.583Z","0.15.0-canary.baaf529e.0":"2020-04-23T22:43:48.495Z","0.15.0-canary.7a7992a8.0":"2020-04-23T23:13:44.358Z","0.15.0-canary.1150d64d.0":"2020-04-24T00:18:17.902Z","0.15.0-canary.dad3f828.0":"2020-04-25T00:42:22.019Z","0.15.0-canary.1bcdb47e.0":"2020-04-28T01:12:22.106Z","0.15.0-canary.86ff1b9f.0":"2020-04-28T02:55:19.564Z","0.15.0-canary.54a86b20.0":"2020-04-28T03:17:37.893Z","0.15.0-canary.938fd24b.0":"2020-04-30T01:26:50.824Z","0.15.0-canary.39e9a008.0":"2020-04-30T02:13:02.054Z","0.15.0-canary.f3b365de.0":"2020-04-30T08:26:46.364Z","0.15.0-canary.cdbdf807.0":"2020-05-01T00:14:20.455Z","0.15.0-canary.9995ae17.0":"2020-05-01T18:44:38.642Z","0.15.0-canary.457bf035.0":"2020-05-01T20:50:27.160Z","0.15.0-canary.2381fd02.0":"2020-05-01T21:25:02.694Z","0.15.0-canary.b2ca9b57.0":"2020-05-01T21:35:32.014Z","0.15.0-canary.b2b088e7.0":"2020-05-01T22:33:10.960Z","0.15.0-canary.fdd8f69e.0":"2020-05-02T00:16:08.340Z","0.15.0-canary.730f45a8.0":"2020-05-03T20:44:31.287Z","0.15.0-canary.4219bd20.0":"2020-05-04T23:31:31.753Z","0.15.0-canary.1d83cf6d.0":"2020-05-05T17:11:44.020Z","0.15.0-canary.3bfc63aa.0":"2020-05-05T18:13:19.759Z","0.15.0":"2020-05-05T22:36:03.643Z","0.16.0-canary.1f4e3d1c.0":"2020-05-06T22:04:04.260Z","0.16.0-canary.bc8759d5.0":"2020-05-07T23:14:18.343Z","0.16.0-canary.d1379acf.0":"2020-05-08T17:40:49.244Z","0.16.0-canary.58d51fc0.0":"2020-05-08T19:17:07.204Z","0.16.0-canary.588062d7.0":"2020-05-08T21:23:11.181Z","0.16.0-canary.fa21f639.0":"2020-05-11T17:29:35.381Z","0.16.0-canary.2772c509.0":"2020-05-11T18:36:15.407Z","0.16.0-canary.fc4796d5.0":"2020-05-11T20:04:34.493Z","0.16.0-canary.0d1c5f2c.0":"2020-05-11T21:19:22.161Z","0.16.0-canary.d083d93a.0":"2020-05-12T00:17:52.330Z","0.16.0-canary.c95d429c.0":"2020-05-12T21:36:28.479Z","0.16.0-canary.0c1ad726.0":"2020-05-13T00:33:49.279Z","0.16.0-canary.8b6a4700.0":"2020-05-13T17:18:50.631Z","0.16.0-canary.3270effb.0":"2020-05-13T21:24:13.285Z","0.16.0-canary.832e64f7.0":"2020-05-14T00:51:49.102Z","0.16.0-canary.472fc4fc.0":"2020-05-14T03:36:01.130Z","0.16.0-canary.4dcd7dd5.0":"2020-05-14T16:24:13.941Z","0.16.0-canary.bcd3400d.0":"2020-05-15T22:49:23.866Z","0.16.0-canary.91f63179.0":"2020-05-16T00:34:09.494Z","0.16.0-canary.b8aafb56.0":"2020-05-18T18:31:11.265Z","0.16.0-canary.a564b194.0":"2020-05-18T23:03:09.011Z","0.16.0-canary.ef56465b.0":"2020-05-19T03:47:27.552Z","0.16.0-canary.c22dcd71.0":"2020-05-19T17:23:53.569Z","0.16.0-canary.6eb62388.0":"2020-05-19T20:38:00.484Z","0.16.0-canary.9bc3230c.0":"2020-05-19T21:37:49.523Z","0.16.0-canary.421a6856.0":"2020-05-20T05:23:50.150Z","0.16.0-canary.761aa6f2.0":"2020-05-20T21:30:22.867Z","0.16.0-canary.f8654c40.0":"2020-05-20T21:40:00.684Z","0.16.0-canary.05f3853e.0":"2020-05-21T17:32:53.376Z","0.16.0-canary.5fe61f4e.0":"2020-05-21T23:06:27.440Z","0.16.0-canary.17d33745.0":"2020-05-26T16:13:23.208Z","0.16.0-canary.e8b52f5b.0":"2020-05-26T18:42:04.368Z","0.16.0-canary.09afa0a9.0":"2020-05-26T21:43:38.574Z","0.16.0-canary.58bc9166.0":"2020-05-27T00:29:49.766Z","0.16.0-canary.43bde144.0":"2020-05-27T18:28:48.310Z","0.16.0-canary.51067bbc.0":"2020-05-27T20:02:46.326Z","0.16.0-canary.92751ffa.0":"2020-05-27T21:36:06.430Z","0.16.0-canary.aa2b40bb.0":"2020-05-28T19:14:24.713Z","0.16.0-canary.1a870a01.0":"2020-05-28T21:18:12.179Z","0.16.0-canary.ad57d086.0":"2020-05-29T23:48:48.535Z","0.16.0-canary.3bf2b4d5.0":"2020-05-30T00:36:13.419Z","0.16.0-canary.ac05f090.0":"2020-05-30T02:49:26.020Z","0.16.0-canary.0ba7b095.0":"2020-05-30T02:56:07.170Z","0.16.0-canary.5eaa9bac.0":"2020-06-01T23:28:22.459Z","0.16.0-canary.5677ac20.0":"2020-06-01T23:56:42.407Z","0.16.0-canary.7ac6bff4.0":"2020-06-02T00:15:14.761Z","0.16.0-canary.d45622aa.0":"2020-06-02T23:45:27.659Z","0.16.0-canary.dc26c709.0":"2020-06-05T20:20:32.676Z","0.16.0-canary.b9baf6db.0":"2020-06-05T20:22:04.478Z","0.16.0-canary.e0b8c9d0.0":"2020-06-05T23:04:16.546Z","0.16.0-canary.51552859.0":"2020-06-10T00:07:37.256Z","0.16.0-canary.2e269285.0":"2020-06-10T01:35:17.756Z","0.16.0-canary.be138b01.0":"2020-06-10T20:48:44.895Z","0.16.0-canary.04bccf5a.0":"2020-06-16T00:57:33.674Z","0.16.0-canary.b44dea36.0":"2020-06-16T20:57:19.150Z","0.16.0-canary.e2577e87.0":"2020-06-16T21:08:19.104Z","0.16.0-canary.58b73343.0":"2020-06-16T21:23:20.450Z","0.16.0-canary.f155c058.0":"2020-06-18T18:07:29.341Z","0.16.0-canary.309779d2.0":"2020-06-18T23:58:11.890Z","0.16.0-canary.e7649968.0":"2020-06-19T21:40:23.942Z","0.16.0-canary.8e21c78b.0":"2020-06-22T10:37:23.345Z","0.16.0-canary.6db76faf.0":"2020-06-22T21:12:20.818Z","0.16.0-canary.c4dd9684.0":"2020-06-23T15:14:28.819Z","0.16.0-canary.b3e53981.0":"2020-06-24T00:38:40.171Z","0.16.0-canary.b9468f77.0":"2020-06-24T21:54:00.503Z","0.16.0-canary.eb790e49.0":"2020-06-25T21:18:33.191Z","0.16.0-canary.9aa1a5c5.0":"2020-06-26T17:04:52.055Z","0.16.0-canary.d36e9861.0":"2020-06-26T17:35:59.698Z","0.16.0-canary.155c2f85.0":"2020-06-26T23:28:36.137Z","0.16.0-canary.340c9c40.0":"2020-06-26T23:37:52.275Z","0.16.0-canary.a3384d2d.0":"2020-06-30T20:59:59.502Z","0.17.0-canary.6d056c96.0":"2020-06-30T21:09:26.096Z","0.16.1":"2020-06-30T21:14:38.313Z","0.17.0-canary.f7e37607.0":"2020-06-30T21:43:47.881Z","0.18.0-canary.0afbfef2.0":"2020-07-01T19:43:31.862Z","0.17.0":"2020-07-01T19:43:58.962Z","0.18.0-canary.fd970958.0":"2020-07-01T23:33:02.367Z","0.18.0-canary.fd44be19.0":"2020-07-02T05:48:08.989Z","0.17.2":"2020-07-02T05:58:09.970Z","0.18.0-canary.ca6fc6de.0":"2020-07-02T05:58:58.038Z","0.18.0-canary.79f1ec2a.0":"2020-07-07T17:32:07.811Z","0.18.0-canary.a7bc45ae.0":"2020-07-09T17:22:48.821Z","0.18.0-canary.b184bc1c.0":"2020-07-09T17:32:00.134Z","0.18.0-canary.b39fde62.0":"2020-07-09T17:37:14.244Z","0.18.0-canary.dfdd8d6c.0":"2020-07-09T18:25:25.136Z","0.18.0-canary.11cf2694.0":"2020-07-09T20:43:09.184Z","0.18.0-canary.436d66e9.0":"2020-07-09T20:47:55.518Z","0.18.0-canary.3a44d36b.0":"2020-07-10T00:36:59.320Z","0.18.0-canary.ec11ae6e.0":"2020-07-10T17:52:35.334Z","0.18.0-canary.17f6cf27.0":"2020-07-10T18:32:25.130Z","0.18.0-canary.efdfbc21.0":"2020-07-10T18:44:07.639Z","0.18.0-canary.bae4339a.0":"2020-07-14T16:41:20.217Z","0.18.0-canary.28eac13b.0":"2020-07-14T22:23:02.015Z","0.18.0-canary.44966b65.0":"2020-07-15T18:04:28.239Z","0.18.0-canary.3ef0ef60.0":"2020-07-16T16:54:07.865Z","0.18.0-canary.fcebf9e6.0":"2020-07-20T18:45:43.032Z","0.18.0-canary.b6a772df.0":"2020-07-20T22:46:06.141Z","0.18.0-canary.f6a6ca38.0":"2020-07-21T16:40:32.753Z","0.18.0-canary.647dd6b7.0":"2020-07-21T18:41:45.407Z","0.18.0-canary.3cb7406f.0":"2020-07-22T18:57:01.815Z","0.18.0-canary.5717a5a1.0":"2020-07-22T21:39:36.545Z","0.18.0-canary.d84cd4b2.0":"2020-07-22T21:41:31.088Z","0.18.0-canary.f279e7fc.0":"2020-07-22T22:00:19.853Z","0.18.0-canary.f181e3bc.0":"2020-07-22T22:02:18.940Z","0.18.0-canary.346a622a.0":"2020-07-22T23:39:36.740Z","0.18.0-canary.c9e8a848.0":"2020-07-23T01:09:57.467Z","0.18.0-canary.718c385c.0":"2020-07-23T20:05:57.630Z","0.18.0-canary.cd516a27.0":"2020-07-24T19:10:23.756Z","0.18.0-canary.1f082191.0":"2020-07-24T19:15:46.518Z","0.18.0-canary.ea3e82dc.0":"2020-07-24T19:20:59.866Z","0.18.0-canary.94987b64.0":"2020-07-24T20:26:08.917Z","0.18.0-canary.ff49b7e2.0":"2020-07-27T19:04:26.557Z","0.18.0-canary.3d334ccc.0":"2020-07-28T16:14:43.537Z","0.18.0-canary.82ac569e.0":"2020-07-28T18:42:02.537Z","0.18.0-canary.99df7397.0":"2020-07-29T02:40:05.731Z","0.18.0-canary.45493e05.0":"2020-07-29T17:16:13.080Z","0.18.0-canary.f2ab0a95.0":"2020-07-29T17:20:57.176Z","0.18.0-canary.45f9eddc.0":"2020-07-30T00:54:30.665Z","0.18.0-canary.b64663ea.0":"2020-07-30T17:42:49.063Z","0.18.0-canary.9a1a4d2d.0":"2020-07-30T21:03:47.400Z","0.18.0-canary.887c2848.0":"2020-07-30T22:05:14.512Z","0.18.0-canary.354eb695.0":"2020-07-30T23:57:28.985Z","0.18.0-canary.7beb236c.0":"2020-07-31T17:40:07.123Z","0.18.0-canary.c44acc0c.0":"2020-07-31T21:10:41.149Z","0.18.0-canary.779853ff.0":"2020-08-03T17:22:50.531Z","0.18.0-canary.8aaf270b.0":"2020-08-03T18:40:18.696Z","0.18.0-canary.5cde9f12.0":"2020-08-03T19:00:38.928Z","0.18.0-canary.1607ec53.0":"2020-08-03T19:46:16.923Z","0.18.0-canary.678b30e3.0":"2020-08-03T19:50:09.184Z","0.18.0-canary.21c55569.0":"2020-08-03T19:56:13.727Z","0.19.0-canary.907d4d7d.0":"2020-08-03T21:21:54.827Z","0.18.0":"2020-08-03T21:24:13.093Z","0.19.0-canary.f7958e4a.0":"2020-08-04T02:06:21.990Z","0.19.0-canary.f8ceaf79.0":"2020-08-04T19:17:37.819Z","0.19.0-canary.6b9e385a.0":"2020-08-04T21:29:19.584Z","0.19.0-canary.9a7e6d2a.0":"2020-08-05T03:45:31.461Z","0.19.0-canary.188f3f1c.0":"2020-08-05T18:12:55.197Z","0.19.0-canary.b6106add.0":"2020-08-05T20:48:55.470Z","0.19.0-canary.ebb4c667.0":"2020-08-06T00:18:23.281Z","0.19.0-canary.aa44289e.0":"2020-08-06T18:26:58.166Z","0.19.0-canary.e6b0816b.0":"2020-08-07T18:43:15.187Z","0.19.0-canary.96d15938.0":"2020-08-07T20:28:23.209Z","0.19.0-canary.9d991c8c.0":"2020-08-07T22:08:02.343Z","0.19.0-canary.13bfbd72.0":"2020-08-10T19:27:01.591Z","0.19.0-canary.30b1b258.0":"2020-08-10T20:06:31.105Z","0.19.0-canary.1583e263.0":"2020-08-11T23:10:18.940Z","0.19.0-canary.fefb1a93.0":"2020-08-12T00:24:44.954Z","0.19.0-canary.1ac5b9d4.0":"2020-08-12T18:26:56.503Z","0.19.0-canary.f17f5052.0":"2020-08-13T17:14:07.585Z","0.19.0-canary.80b5d20d.0":"2020-08-13T18:16:51.604Z","0.19.0-canary.758635ed.0":"2020-08-14T17:16:08.624Z","0.19.0-canary.18d6b808.0":"2020-08-14T23:07:40.305Z","0.19.0-canary.5f8ffbd1.0":"2020-08-17T22:15:05.250Z","0.19.0-canary.8604d59e.0":"2020-08-18T01:01:52.785Z","0.19.0-canary.1d7d5e34.0":"2020-08-18T01:08:32.687Z","0.19.0-canary.9cc95c07.0":"2020-08-18T01:16:10.712Z","0.19.0-canary.9f65ced3.0":"2020-08-18T20:15:39.914Z","0.19.0-canary.5962b365.0":"2020-08-19T20:28:19.067Z","0.19.0-canary.9c9ec756.0":"2020-08-20T18:55:27.330Z","0.19.0-canary.fa0ad66a.0":"2020-08-20T20:34:36.681Z","0.19.0-canary.06ecdd6b.0":"2020-08-20T21:33:34.197Z","0.19.0-canary.2bca2318.0":"2020-08-21T17:51:59.286Z","0.19.0-canary.6aa47265.0":"2020-08-21T18:15:41.295Z","0.19.0-canary.e7202a07.0":"2020-08-21T19:23:06.439Z","0.19.0-canary.f208201e.0":"2020-08-24T19:02:47.351Z","0.19.0-canary.14a172db.0":"2020-08-25T19:47:20.406Z","0.19.0-canary.e6c1038d.0":"2020-08-27T19:36:38.515Z","0.19.0-canary.34012082.0":"2020-08-27T19:47:45.562Z","0.19.0-canary.c073f7b8.0":"2020-08-28T17:11:46.842Z","0.19.0-canary.b7ae68ff.0":"2020-08-29T01:26:42.457Z","0.19.0-canary.697e3879.0":"2020-09-02T00:12:41.960Z","0.19.0-canary.eafb7991.0":"2020-09-02T02:17:50.281Z","0.19.0-canary.606642ec.0":"2020-09-02T21:35:06.787Z","0.19.0-canary.ddf05c42.0":"2020-09-03T13:52:38.907Z","0.19.0-canary.b889e6dc.0":"2020-09-03T14:10:44.328Z","0.19.0-canary.aabeceb0.0":"2020-09-03T19:57:04.106Z","0.19.0-canary.d8cca3a6.0":"2020-09-03T21:31:03.010Z","0.19.0-canary.26d34b2e.0":"2020-09-03T21:56:24.893Z","0.19.0-canary.a1c44494.0":"2020-09-09T22:06:53.691Z","0.19.0-canary.be1cd1e9.0":"2020-09-10T16:40:33.677Z","0.19.0-canary.f094c0ce.0":"2020-09-10T17:35:48.241Z","0.19.0-canary.c1261e7d.0":"2020-09-11T02:25:53.639Z","0.19.0-canary.9b39ed1e.0":"2020-09-11T02:26:44.701Z","0.19.0-canary.e67214b3.0":"2020-09-11T02:31:05.713Z","0.19.0-canary.36f5da28.0":"2020-09-11T02:33:45.365Z","0.19.0-canary.3babab12.0":"2020-09-11T02:36:35.581Z","0.19.0-canary.a4481e6f.0":"2020-09-11T02:48:49.904Z","0.19.0-canary.a9177836.0":"2020-09-11T17:47:01.301Z","0.19.0-canary.b102a3c8.0":"2020-09-14T20:12:49.802Z","0.19.0-canary.a7fbc707.0":"2020-09-15T16:05:03.822Z","0.19.0-canary.ed6b8660.0":"2020-09-15T17:24:22.276Z","0.19.0-canary.9c2331f5.0":"2020-09-15T17:48:51.303Z","0.19.0-canary.63a5f088.0":"2020-09-16T21:37:23.261Z","0.19.0-canary.b7995e49.0":"2020-09-16T23:26:06.275Z","0.19.0-canary.0da3ec97.0":"2020-09-21T22:08:10.773Z","0.19.0-canary.a0793c96.0":"2020-09-22T17:04:01.245Z","0.19.0-canary.06998a3e.0":"2020-09-22T18:25:17.371Z","0.19.0-canary.3484a90d.0":"2020-09-22T22:03:44.189Z","0.19.0-canary.3f99af40.0":"2020-09-24T23:20:50.961Z","0.19.0-canary.72aa1129.0":"2020-09-25T21:06:49.020Z","0.19.0-canary.394fd3f6.0":"2020-09-28T14:11:56.928Z","0.19.0-canary.347110f1.0":"2020-09-28T16:49:45.303Z","0.19.0-canary.5e330bb9.0":"2020-09-30T22:00:47.329Z","0.19.0-canary.30b9e3a9.0":"2020-09-30T22:37:44.374Z","0.19.0-canary.7bb04b9a.0":"2020-10-01T23:22:25.521Z","0.19.0-canary.615d861d.0":"2020-10-02T01:33:01.333Z","0.19.0-canary.af110e86.0":"2020-10-02T23:49:29.579Z","0.19.0-canary.89d27ca5.0":"2020-10-06T01:26:42.577Z","0.19.0-canary.9ef2e7c2.0":"2020-10-07T00:14:00.912Z","0.19.0-canary.96c8bdc1.0":"2020-10-07T20:07:18.118Z","0.20.0-canary.6c21f034.0":"2020-10-07T22:30:08.912Z","0.19.0":"2020-10-07T22:33:13.692Z","0.20.0-canary.1f026aaa.0":"2020-10-08T22:53:19.915Z","0.19.1":"2020-10-08T23:05:42.430Z","0.20.0-canary.5f6894b1.0":"2020-10-08T23:06:34.631Z","0.20.0-canary.f6260d06.0":"2020-10-12T22:33:57.441Z","0.20.0-canary.2d1b08aa.0":"2020-10-13T19:21:45.564Z","0.20.0-canary.5bd58844.0":"2020-10-13T23:45:55.690Z","0.20.0-canary.bc846b29.0":"2020-10-14T18:15:27.318Z","0.20.0-canary.3280b686.0":"2020-10-16T00:04:02.092Z","0.20.0-canary.9e94cd38.0":"2020-10-16T21:14:03.678Z","0.20.0-canary.4773c773.0":"2020-10-16T22:33:47.763Z","0.20.0-canary.65787913.0":"2020-10-19T18:50:33.011Z","0.20.0-canary.5485fba3.0":"2020-10-19T21:23:49.708Z","0.20.0-canary.a39d0a92.0":"2020-10-23T21:23:25.261Z","0.20.0-canary.4eafcbc1.0":"2020-10-27T01:20:38.662Z","0.20.0-canary.32961593.0":"2020-10-28T00:38:34.147Z","0.20.0-canary.8e3a0601.0":"2020-10-29T21:36:34.249Z","0.20.0-canary.178c25b4.0":"2020-10-29T21:50:04.808Z","0.20.0-canary.124beb49.0":"2020-10-31T00:06:12.080Z","0.20.0-canary.5937f468.0":"2020-11-04T21:05:07.818Z","0.20.0-canary.a9bafaee.0":"2020-11-05T22:30:25.144Z","0.20.0-canary.184861ee.0":"2020-11-07T00:37:21.375Z","0.20.0-canary.6c6ae2d6.0":"2020-11-09T13:05:22.689Z","0.20.0-canary.ea2aa477.0":"2020-11-09T23:57:24.371Z","0.20.0-canary.a2c088dc.0":"2020-11-10T14:23:37.253Z","0.20.0-canary.b04d71d4.0":"2020-11-12T10:41:39.706Z","0.20.0-canary.2c553352.0":"2020-11-12T22:42:20.048Z","0.20.0-canary.6560d19a.0":"2020-11-13T20:48:03.014Z","0.20.0-canary.a28d5ec3.0":"2020-11-17T15:23:31.976Z","0.20.0-canary.03e7e778.0":"2020-11-17T19:25:07.001Z","0.20.0-canary.ac8ed597.0":"2020-11-17T22:11:21.455Z","0.20.0-canary.b6a60f60.0":"2020-11-17T22:51:43.322Z","0.20.0-canary.71cc24fb.0":"2020-11-17T23:16:17.312Z","0.20.0-canary.761027ff.0":"2020-11-18T22:13:30.224Z","0.20.0-canary.dc93d04c.0":"2020-11-18T22:19:25.701Z","0.20.0-canary.4a5d4eeb.0":"2020-11-19T11:30:11.390Z","0.20.0-canary.bd176a15.0":"2020-11-19T19:09:45.280Z","0.20.0-canary.e85aa60d.0":"2020-11-23T22:24:10.600Z","0.20.0-canary.72092360.0":"2020-11-24T04:17:44.513Z","0.20.0-canary.baf9d39f.0":"2020-11-25T21:47:55.808Z","0.20.0-canary.51aab0ad.0":"2020-12-01T01:04:49.011Z","0.20.0-canary.8fd4af5b.0":"2020-12-03T00:26:40.704Z","0.20.0-canary.26d14d2f.0":"2020-12-03T00:55:20.340Z","0.20.0-canary.1663d7e4.0":"2020-12-03T01:15:57.382Z","0.20.0-canary.cbe9fc12.0":"2020-12-03T19:06:42.021Z","0.20.0-canary.9755be10.0":"2020-12-03T19:24:53.045Z","0.20.0-canary.3f64270c.0":"2020-12-03T21:49:17.108Z","0.21.0-canary.d893b14a.0":"2020-12-03T22:25:25.059Z","0.20.0":"2020-12-03T22:28:38.777Z","0.21.0-canary.47c7d7e5.0":"2020-12-11T19:56:24.589Z","0.21.0-canary.b304a78b.0":"2020-12-15T20:03:23.469Z","0.21.0-canary.777c5fa4.0":"2020-12-16T21:53:34.835Z","0.21.0-canary.635c7996.0":"2020-12-17T23:31:13.085Z","0.21.0-canary.20b0045f.0":"2020-12-17T23:48:10.828Z","0.21.0-canary.41f77000.0":"2020-12-18T00:34:41.389Z","0.21.0-canary.afe4079a.0":"2020-12-22T17:39:15.977Z","0.21.0-canary.407ef8f9.0":"2020-12-30T23:02:13.960Z","0.21.0-canary.2e26e137.0":"2021-01-05T18:49:06.823Z","0.21.0-canary.9009f6c1.0":"2021-01-08T19:53:48.657Z","0.21.0-canary.ee99b646.0":"2021-01-11T23:07:36.853Z","0.21.0-canary.740ed33b.0":"2021-01-12T18:03:34.607Z","0.21.0-canary.c5c541b1.0":"2021-01-12T18:45:02.530Z","0.21.0-canary.06fe9d90.0":"2021-01-12T20:54:31.535Z","0.21.0-canary.269eed01.0":"2021-01-13T21:44:46.584Z","0.21.0-canary.8c075f35.0":"2021-01-13T23:06:21.844Z","0.21.0-canary.3cda381b.0":"2021-01-14T00:04:03.417Z","0.21.0-canary.bc113605.0":"2021-01-14T00:44:50.129Z","0.21.0-canary.0c1d6ff9.0":"2021-01-15T20:08:46.753Z","0.21.0-canary.b4332e00.0":"2021-01-15T22:07:02.843Z","0.21.0-canary.2899691d.0":"2021-01-16T01:44:05.247Z","0.21.0-canary.fe73953b.0":"2021-01-19T19:20:53.933Z","0.21.0-canary.d3a16455.0":"2021-01-19T19:51:48.016Z","0.21.0-canary.597ca1b6.0":"2021-01-20T00:59:22.224Z","0.21.0-canary.3c195efe.0":"2021-01-20T02:01:00.826Z","0.21.0-canary.f7b8755f.0":"2021-01-20T20:37:09.659Z","0.21.0-canary.f60de7df.0":"2021-01-20T23:36:12.943Z","0.21.0-canary.664a2927.0":"2021-01-21T19:18:07.702Z","0.21.0-canary.a6d312e5.0":"2021-01-21T21:47:03.787Z","0.21.0-canary.027365eb.0":"2021-01-22T21:07:01.692Z","0.21.0-canary.7e72b66d.0":"2021-01-22T23:25:59.472Z","0.21.0-canary.a6d6a1e7.0":"2021-01-22T23:32:19.730Z","0.21.0-canary.b95fe100.0":"2021-01-22T23:51:27.869Z","0.21.0-canary.c8797192.0":"2021-01-23T00:06:50.426Z","0.21.0-canary.946f5563.0":"2021-01-23T00:43:00.354Z","0.21.0-canary.43664f0e.0":"2021-01-25T22:39:31.498Z","0.21.0-canary.2e769e3c.0":"2021-01-26T00:05:46.821Z","0.21.0-canary.14e01610.0":"2021-01-27T19:51:00.149Z","0.21.0-canary.5de00c1b.0":"2021-01-27T20:16:40.445Z","0.21.0-canary.5a328336.0":"2021-01-28T19:54:11.903Z","0.21.0-canary.533b1251.0":"2021-01-29T15:11:10.348Z","0.21.0-canary.ab5c0a10.0":"2021-02-02T20:17:00.209Z","0.21.0-canary.b7a40b27.0":"2021-02-03T15:03:08.769Z","0.21.0-canary.0fdee204.0":"2021-02-03T18:33:33.433Z","0.21.0-canary.5160e548.0":"2021-02-05T23:50:50.147Z","0.21.0-canary.4fa2daec.0":"2021-02-09T00:18:05.908Z","0.21.0-canary.67f285fb.0":"2021-02-09T00:50:33.858Z","0.21.0-canary.58cd5a70.0":"2021-02-11T20:43:55.072Z","0.21.0-canary.8107ca43.0":"2021-02-11T23:28:28.429Z","0.21.0-canary.d35d64ef.0":"2021-02-11T23:42:35.465Z","0.21.0-canary.78bcf058.0":"2021-02-12T00:47:54.997Z","0.21.0-canary.0c6908fd.0":"2021-02-12T01:24:23.659Z","0.21.0-canary.f1f34ee0.0":"2021-02-12T20:17:35.938Z","0.21.0-canary.d84df029.0":"2021-02-16T19:07:12.116Z","0.21.0-canary.c525f471.0":"2021-02-17T20:53:00.944Z","0.21.0-canary.ba7a1b35.0":"2021-02-19T00:13:29.353Z","0.21.0-canary.9a566dda.0":"2021-02-19T18:37:19.414Z","0.21.0-canary.55addb8c.0":"2021-02-19T22:01:51.082Z","0.21.0-canary.85dd5e9b.0":"2021-02-23T02:18:48.536Z","0.21.0-canary.aa3e078e.0":"2021-02-23T17:14:21.733Z","0.21.0-canary.dccd254e.0":"2021-02-26T21:09:43.787Z","0.21.0-canary.7dd1a27d.0":"2021-03-01T22:00:42.477Z","0.21.0-canary.12574572.0":"2021-03-02T20:28:58.815Z","0.21.0-canary.1109a3d3.0":"2021-03-02T20:33:57.009Z","0.21.0-canary.b9cd8739.0":"2021-03-03T17:46:20.970Z","0.21.0-canary.71ee796a.0":"2021-03-03T20:10:26.312Z","0.21.0-canary.2be191ed.0":"2021-03-03T21:50:58.961Z","0.21.0-canary.6dc7b06f.0":"2021-03-05T00:21:43.435Z","0.21.0-canary.24fe7ba6.0":"2021-03-05T17:26:41.411Z","0.21.0-canary.12c477d1.0":"2021-03-08T22:23:07.117Z","0.21.0-canary.4c38f801.0":"2021-03-08T23:24:06.183Z","0.21.0-canary.8795b83f.0":"2021-03-09T18:27:04.621Z","0.21.0-canary.12b84cb7.0":"2021-03-10T00:40:42.638Z","0.21.0-canary.6ac6784b.0":"2021-03-10T00:50:43.259Z","0.21.0-canary.b6d92934.0":"2021-03-10T22:00:26.876Z","0.21.0-canary.99a55b9e.0":"2021-03-10T22:51:17.470Z","0.21.0-canary.bb14efb7.0":"2021-03-10T23:36:49.922Z","0.21.0-canary.9ecf3bdd.0":"2021-03-11T00:22:51.099Z","0.21.0-canary.7c0e02fd.0":"2021-03-11T01:46:16.284Z","0.21.0-canary.2d6d59cc.0":"2021-03-11T18:28:50.323Z","0.21.0-canary.0138863c.0":"2021-03-11T18:36:19.649Z","0.21.0-canary.926f5bad.0":"2021-03-11T20:18:20.944Z","0.21.0-canary.520290a9.0":"2021-03-11T22:27:33.916Z","0.21.0-canary.9ec431d1.0":"2021-03-11T22:31:51.216Z","0.21.0-canary.4246c082.0":"2021-03-11T22:38:57.726Z","0.21.0-canary.2d736253.0":"2021-03-15T22:35:22.167Z","0.21.0-canary.7033124d.0":"2021-03-16T18:37:06.740Z","0.21.0-canary.6c0ee901.0":"2021-03-16T22:38:33.331Z","0.21.0-canary.7f0d605e.0":"2021-03-17T18:04:08.117Z","0.21.0-canary.572107b5.0":"2021-03-18T23:53:53.013Z","0.21.0-canary.b7b220b1.0":"2021-03-19T00:19:36.490Z","0.21.0-canary.233b2de7.0":"2021-03-19T18:29:27.605Z","0.21.0-canary.0c1a2d97.0":"2021-03-19T21:20:48.669Z","0.21.0-canary.57ca2e73.0":"2021-03-19T22:40:26.156Z","0.21.0-canary.5c058f4b.0":"2021-03-23T23:08:06.766Z","0.21.0-canary.e27ef7cd.0":"2021-03-30T20:10:57.569Z","0.21.0-canary.15c09e74.0":"2021-03-31T16:47:13.405Z","0.21.0-canary.4dc32be3.0":"2021-03-31T23:47:49.661Z","0.21.0-canary.4b717f65.0":"2021-04-01T18:13:48.711Z","0.21.0-canary.c6870f20.0":"2021-04-01T23:41:40.192Z","0.21.0-canary.852f873c.0":"2021-04-02T05:21:46.615Z","0.21.0-canary.4a674a1d.0":"2021-04-02T14:44:00.973Z","0.21.0-canary.c5b29ff1.0":"2021-04-05T17:49:37.187Z","0.21.0-canary.583644a6.0":"2021-04-05T17:50:38.868Z","0.21.0-canary.02ac1e6b.0":"2021-04-06T18:35:57.237Z","0.21.0-canary.5ac5856e.0":"2021-04-06T18:42:16.780Z","0.21.0-canary.bb23dbc4.0":"2021-04-07T21:23:22.311Z","0.21.0-canary.e539904c.0":"2021-04-08T18:01:40.395Z","0.21.0-canary.a93ae333.0":"2021-04-09T20:10:54.615Z","0.21.0-canary.e142c144.0":"2021-04-12T14:50:10.794Z","0.21.0-canary.382d7eb0.0":"2021-04-12T22:05:02.078Z","0.21.0-canary.b16c7885.0":"2021-04-12T22:38:47.244Z","0.21.0-canary.0e92782b.0":"2021-04-13T14:41:24.938Z","0.21.0-canary.70b3a072.0":"2021-04-14T22:25:52.542Z","0.21.0-canary.ff79b092.0":"2021-04-15T18:59:24.359Z","0.21.0-canary.f35b2fd7.0":"2021-04-15T19:09:56.814Z","0.21.0-canary.11977cac.0":"2021-04-16T00:57:41.157Z","0.21.0-canary.018ff45e.0":"2021-04-22T22:50:36.171Z","0.21.0-canary.c99d1fa5.0":"2021-04-26T19:46:11.991Z","0.21.0-canary.eea9b304.0":"2021-04-27T22:52:45.040Z","0.21.0-canary.5dd85d0c.0":"2021-04-28T00:08:58.734Z","0.21.0-canary.cc813cff.0":"2021-04-30T21:18:55.300Z","0.21.0-canary.0875e898.0":"2021-04-30T21:27:00.971Z","0.21.0":"2021-04-30T23:58:02.695Z","0.22.0-canary.8f1e7e1b.0":"2021-05-01T00:04:52.652Z","0.22.0-canary.deb0e792.0":"2021-05-03T21:33:45.030Z","0.22.0-canary.a3ff615f.0":"2021-05-03T22:33:11.980Z","0.22.0-canary.948ccfb5.0":"2021-05-04T00:10:13.061Z","0.22.0-canary.9f8337d7.0":"2021-05-04T18:36:30.432Z","0.22.0-canary.5813480a.0":"2021-05-05T18:24:54.813Z","0.22.0-canary.ab7fc1bf.0":"2021-05-06T17:58:41.176Z","0.22.0-canary.25693d60.0":"2021-05-07T21:55:29.515Z","0.22.0-canary.c497962b.0":"2021-05-07T22:19:25.137Z","0.22.0-canary.e300688e.0":"2021-05-07T22:23:53.604Z","0.22.0-canary.d70287f2.0":"2021-05-10T19:28:45.924Z","0.22.0-canary.02e841b2.0":"2021-05-10T20:34:02.840Z","0.22.0-canary.badda2f0.0":"2021-05-11T00:34:09.417Z","0.22.0-canary.004aca62.0":"2021-05-11T18:05:50.263Z","0.22.0-canary.4af17446.0":"2021-05-11T18:45:37.375Z","0.22.0-canary.b94d7187.0":"2021-05-11T18:51:12.444Z","0.22.0-canary.4021b2f9.0":"2021-05-12T22:00:04.189Z","0.22.0-canary.6a5956a3.0":"2021-05-12T22:16:57.631Z","0.22.0-canary.b6e8a74b.0":"2021-05-12T23:02:57.606Z","0.22.0-canary.c94e1030.0":"2021-05-12T23:08:48.166Z","0.22.0-canary.40a34e35.0":"2021-05-12T23:57:56.379Z","0.22.0-canary.1be14d2c.0":"2021-05-13T17:49:25.235Z","0.22.0-canary.87dbd64f.0":"2021-05-14T20:58:03.143Z","0.22.0-canary.c452e4da.0":"2021-05-17T23:31:37.381Z","0.22.0-canary.2212691a.0":"2021-05-17T23:52:13.499Z","0.22.0-canary.f748ff2f.0":"2021-05-18T00:21:58.347Z","0.22.0-canary.cc04657a.0":"2021-05-18T01:20:32.608Z","0.22.0-canary.3a3114fa.0":"2021-05-19T23:39:46.913Z","0.22.0-canary.b46bdf83.0":"2021-05-20T01:50:30.738Z","0.22.0-canary.b401a081.0":"2021-05-21T23:22:31.383Z","0.22.0-canary.012c8dc0.0":"2021-05-22T00:16:02.374Z","0.22.0-canary.e01a1731.0":"2021-05-24T16:02:15.587Z","0.22.0-canary.59174b9f.0":"2021-05-25T18:01:42.270Z","0.22.0-canary.c96cb2e0.0":"2021-05-25T19:11:56.396Z","0.22.0-canary.b9b0e330.0":"2021-05-25T20:59:58.168Z","0.22.0-canary.ea2a8063.0":"2021-05-25T21:05:00.456Z","0.22.0-canary.60cd9178.0":"2021-05-25T23:13:38.993Z","0.22.0-canary.2e2c75f2.0":"2021-05-26T00:10:32.516Z","0.22.0-canary.b99c77d5.0":"2021-05-26T19:12:53.517Z","0.22.0-canary.0de82c12.0":"2021-05-26T21:30:40.670Z","0.22.0-canary.227a4614.0":"2021-05-27T16:02:42.155Z","0.22.0-canary.b3d21d31.0":"2021-05-27T18:44:44.343Z","0.22.0-canary.288c33ec.0":"2021-06-02T19:32:39.372Z","0.22.0-canary.7eb7ccb0.0":"2021-06-03T19:54:36.584Z","0.22.0-canary.7fcc0726.0":"2021-06-08T00:45:04.285Z","0.22.0-canary.220a4e5e.0":"2021-06-08T17:49:45.293Z","0.22.0-canary.6b2d6ab0.0":"2021-06-08T18:36:12.248Z","0.22.0-canary.2b20825e.0":"2021-06-11T23:48:41.628Z","0.22.0-canary.e1511867.0":"2021-06-12T00:56:56.106Z","0.22.0-canary.ef4a0c0d.0":"2021-06-15T19:51:25.580Z","0.22.0-canary.573d8913.0":"2021-06-18T23:26:17.098Z","0.22.0-canary.21dba001.0":"2021-06-21T21:40:04.438Z","0.22.0-canary.6f5bfd0f.0":"2021-06-24T22:55:36.831Z","0.22.0-canary.fd8360b4.0":"2021-06-25T19:08:36.200Z","0.22.0-canary.6f74432f.0":"2021-06-25T20:46:28.737Z","0.22.0-canary.b62f901d.0":"2021-06-25T22:16:46.324Z","0.22.0-canary.73122cba.0":"2021-06-30T19:36:08.015Z","0.22.0-canary.a6912af5.0":"2021-07-01T21:33:33.994Z","0.22.0-canary.134f24bf.0":"2021-07-01T22:31:51.216Z","0.22.0-canary.1debb78f.0":"2021-07-07T00:45:46.104Z","0.22.0-canary.d53edeb6.0":"2021-07-07T16:59:41.091Z","0.22.0-canary.2226489a.0":"2021-07-08T18:01:00.617Z","0.22.0-canary.d4801c11.0":"2021-07-08T20:02:15.771Z","0.22.0-canary.7ec5f2d6.0":"2021-07-12T17:16:17.906Z","0.22.0-canary.86cb4ca7.0":"2021-07-13T17:37:02.390Z","0.22.0-canary.cb42f5bd.0":"2021-07-13T18:19:23.412Z","0.22.0-canary.bc9a724e.0":"2021-07-13T18:41:35.310Z","0.22.0-canary.7847b83a.0":"2021-07-14T17:18:09.668Z","0.22.0-canary.8cba18fa.0":"2021-07-14T20:26:05.708Z","0.22.0":"2021-07-14T22:31:54.024Z","0.22.1":"2021-07-14T22:52:45.364Z","0.23.0-canary.fbc09b4e.0":"2021-07-14T22:53:33.269Z","0.23.0-canary.73e9f83c.0":"2021-07-15T20:39:07.515Z","0.23.0-canary.cc0aa7a9.0":"2021-07-15T21:03:11.523Z","0.23.0-canary.a8fcac45.0":"2021-07-15T21:22:08.296Z","0.23.0-canary.3ca580d1.0":"2021-07-15T22:03:34.312Z","0.23.0-canary.9e41cb2e.0":"2021-07-15T23:08:14.846Z","0.23.0-canary.c180db74.0":"2021-07-16T17:24:33.697Z","0.23.0-canary.0d0a9267.0":"2021-07-16T17:56:47.785Z","0.23.0-canary.d234ec3f.0":"2021-07-16T18:07:22.364Z","0.23.0-canary.5cd4bcdb.0":"2021-07-16T21:11:37.838Z","0.23.0-canary.2b133cb2.0":"2021-07-16T22:06:06.287Z","0.23.0-canary.ae4f422b.0":"2021-07-16T23:53:35.266Z","0.23.0-canary.90ff8057.0":"2021-07-19T14:07:03.737Z","0.23.0-canary.dd7b75d1.0":"2021-07-19T17:50:05.640Z","0.23.0-canary.104debd5.0":"2021-07-19T22:53:06.606Z","0.23.0-canary.4612705d.0":"2021-07-20T16:04:11.878Z","0.23.0-canary.b36502a2.0":"2021-07-21T22:34:06.003Z","0.23.0-canary.2c392ab3.0":"2021-07-22T14:52:28.239Z","0.23.0-canary.e8bac95a.0":"2021-07-22T18:52:29.037Z","0.23.0-canary.38f29f8f.0":"2021-07-23T18:15:37.685Z","0.23.0-canary.e0693475.0":"2021-07-23T18:55:43.836Z","0.23.0-canary.d595e030.0":"2021-07-23T20:52:46.917Z","0.23.0-canary.fe7cca31.0":"2021-07-23T21:56:22.469Z","0.23.0-canary.fd9da483.0":"2021-07-26T21:24:22.514Z","0.23.0-canary.8a4c7e06.0":"2021-07-26T22:43:40.767Z","0.23.0-canary.5b395fd1.0":"2021-07-27T22:52:41.637Z","0.23.0-canary.e5efdcc0.0":"2021-07-28T17:21:53.225Z","0.23.0-canary.ab310900.0":"2021-07-28T20:20:59.844Z","0.23.0-canary.21dc9bc5.0":"2021-07-28T20:25:41.965Z","0.23.0-canary.68c7fe5c.0":"2021-07-29T18:31:13.514Z","0.23.0-canary.aebe39e8.0":"2021-07-30T19:13:18.379Z","0.23.0-canary.ea889c69.0":"2021-08-03T18:47:22.551Z","0.23.0-canary.21918905.0":"2021-08-03T21:14:01.113Z","0.23.0-canary.193c87be.0":"2021-08-04T18:07:11.400Z","0.23.0-canary.6fc52d8b.0":"2021-08-05T18:10:28.273Z","0.23.0-canary.e2e9777d.0":"2021-08-05T22:47:02.214Z","0.23.0-canary.72ff1e68.0":"2021-08-06T20:48:25.884Z","0.23.0-canary.c527e93b.0":"2021-08-06T21:10:01.494Z","0.23.0-canary.78b1eaac.0":"2021-08-09T18:03:25.711Z","0.23.0-canary.a8a4ddc9.0":"2021-08-10T18:46:35.334Z","0.23.0-canary.99fc0632.0":"2021-08-11T22:21:16.351Z","0.23.0-canary.3f47ae57.0":"2021-08-12T17:59:38.231Z","0.23.0-canary.6b9bfc32.0":"2021-08-12T18:23:49.877Z","0.23.0-canary.c89ecc63.0":"2021-08-16T17:16:34.921Z","0.23.0-canary.59de86bd.0":"2021-08-18T01:37:58.649Z","0.23.0-canary.dcda879b.0":"2021-08-18T22:22:55.457Z","0.23.0-canary.dbb8b366.0":"2021-08-19T22:59:59.251Z","0.23.0-canary.c6e3060c.0":"2021-08-19T23:01:50.848Z","0.23.0-canary.03120b7d.0":"2021-08-20T00:26:55.443Z","0.23.0-canary.d75a5f74.0":"2021-08-20T07:55:52.243Z","0.23.0-canary.3d79ffe7.0":"2021-08-20T17:21:05.626Z","0.23.0-canary.02213ebe.0":"2021-08-20T17:25:48.287Z","0.23.0-canary.90a999b9.0":"2021-08-20T18:42:17.694Z","0.23.0-canary.6db58716.0":"2021-08-23T09:07:23.449Z","0.23.0-canary.9fb5bc35.0":"2021-08-23T22:49:47.432Z","0.23.0-canary.ddaa5d8e.0":"2021-08-24T18:49:27.209Z","0.23.0-canary.756208fb.0":"2021-08-25T19:50:13.836Z","0.23.0-canary.9576dcd9.0":"2021-08-25T21:43:37.458Z","0.23.0-canary.7531cf97.0":"2021-08-26T17:25:49.123Z","0.23.0-canary.3bab26b4.0":"2021-08-26T21:44:30.081Z","0.23.0-canary.fab48bee.0":"2021-08-26T22:07:21.566Z","0.23.0-canary.dec18df7.0":"2021-08-30T08:28:27.799Z","0.23.0-canary.61fe5b17.0":"2021-08-30T19:28:19.918Z","0.23.0-canary.a8c31f54.0":"2021-08-30T20:31:10.251Z","0.23.0-canary.a096dba8.0":"2021-08-31T22:18:31.956Z","0.23.0-canary.7ec04d47.0":"2021-09-02T23:25:06.652Z","0.23.0-canary.d00b098d.0":"2021-09-03T21:26:21.175Z","0.23.0-canary.f29b3352.0":"2021-09-07T18:15:45.817Z","0.23.0-canary.4962a163.0":"2021-09-07T23:53:00.966Z","0.23.0-canary.33102bf4.0":"2021-09-08T00:13:08.033Z","0.23.0-canary.76c68381.0":"2021-09-08T20:13:24.256Z","0.23.0-canary.17d51f76.0":"2021-09-08T23:25:58.794Z","0.23.0-canary.3fae6c2d.0":"2021-09-10T18:32:31.966Z","0.23.0-canary.f1958c4b.0":"2021-09-13T19:20:17.168Z","0.23.0-canary.78abbd59.0":"2021-09-13T21:25:54.454Z","0.23.0":"2021-09-13T21:35:40.740Z","0.24.0-canary.9830d665.0":"2021-09-13T21:36:44.377Z","0.24.0-canary.20e2081c.0":"2021-09-13T23:31:46.614Z","0.24.0-canary.583613a9.0":"2021-09-14T16:54:51.986Z","0.24.0-canary.0e1bd56f.0":"2021-09-14T17:31:49.396Z","0.24.0-canary.7bb1818e.0":"2021-09-15T00:35:27.918Z","0.24.0-canary.b5e665a9.0":"2021-09-15T18:12:47.694Z","0.24.0-canary.ab1e177c.0":"2021-09-15T18:44:24.181Z","0.24.0-canary.8dff8894.0":"2021-09-15T19:08:11.138Z","0.24.0-canary.9cd7e927.0":"2021-09-15T20:31:47.749Z","0.24.0-canary.a7132082.0":"2021-09-15T21:45:16.674Z","0.24.0-canary.cd9110cd.0":"2021-09-16T17:45:12.304Z","0.24.0-canary.1e5a9883.0":"2021-09-17T20:38:51.901Z","0.24.0-canary.32c830ee.0":"2021-09-17T23:08:28.172Z","0.24.0-canary.1de87bb7.0":"2021-09-18T18:51:54.413Z","0.24.0-canary.f2ea80c4.0":"2021-09-20T17:54:39.026Z","0.24.0-canary.569d739f.0":"2021-09-20T21:23:22.748Z","0.24.0-canary.5a434a50.0":"2021-09-21T02:00:21.478Z","0.26.0-canary.6be1a13e.0":"2021-09-21T02:52:58.854Z","0.26.0-canary.b1c1ab52.0":"2021-09-21T03:11:56.204Z","0.25.1":"2021-09-21T03:12:38.779Z","0.26.0-canary.ae060177.0":"2021-09-21T14:37:51.139Z","0.26.0-canary.b6fe2a12.0":"2021-09-22T20:16:01.030Z","0.26.0-canary.07e91417.0":"2021-09-22T21:05:28.340Z","0.26.0-canary.e2203ffa.0":"2021-09-23T18:27:20.131Z","0.26.0-canary.4abe237e.0":"2021-09-24T17:30:50.989Z","0.26.0-canary.6278ee5d.0":"2021-09-27T18:31:06.350Z","0.26.0-canary.3a5d5f34.0":"2021-09-27T22:41:15.884Z","0.26.0-canary.143ed3c8.0":"2021-09-29T01:50:34.308Z","0.26.0-canary.e5923d68.0":"2021-09-30T00:05:32.860Z","0.26.0-canary.d8ed5109.0":"2021-09-30T23:33:37.389Z","0.26.0-canary.0efb9c2c.0":"2021-10-02T02:07:59.257Z","0.26.0-canary.1c9adcb3.0":"2021-10-04T17:33:17.330Z","0.26.0-canary.dfc00d60.0":"2021-10-09T00:56:59.796Z","0.26.0-canary.c3aa844c.0":"2021-10-11T23:14:06.066Z","0.25.2":"2021-10-11T23:18:29.238Z","0.26.0-canary.406d6fe1.0":"2021-10-13T20:59:11.390Z","0.26.0-canary.ca0a674f.0":"2021-10-18T21:36:35.810Z","0.26.0-canary.eefcf660.0":"2021-10-20T21:23:21.531Z","0.26.0-canary.d21acc8f.0":"2021-10-20T22:32:13.746Z","0.25.3":"2021-10-21T17:55:39.317Z","0.26.0-canary.60449b7b.0":"2021-10-21T18:17:06.905Z","0.26.0-canary.0d8084ed.0":"2021-10-28T17:44:38.612Z","0.26.0-canary.232327ee.0":"2021-11-01T20:15:29.265Z","0.26.0-canary.0a492ae8.0":"2021-11-02T10:00:09.694Z","0.26.0-canary.0aa18745.0":"2021-11-02T18:07:33.959Z","0.26.0-canary.f3e28323.0":"2021-11-02T18:59:12.986Z","0.26.0-canary.27e05c5d.0":"2021-11-03T18:44:42.940Z","0.26.0-canary.b9e44af7.0":"2021-11-03T19:03:46.496Z","0.26.0-canary.448f6cb9.0":"2021-11-04T18:07:39.749Z","0.26.0-canary.8067ce28.0":"2021-11-04T22:22:10.727Z","0.26.0-canary.345c2bb9.0":"2021-12-02T17:09:41.223Z","0.26.0-canary.0547aeeb.0":"2021-12-06T16:35:34.194Z","0.26.0-canary.3b2452cc.0":"2021-12-09T00:05:14.451Z","0.26.0-canary.cf7ba5a9.0":"2021-12-10T19:06:28.734Z","0.26.0-canary.e1bcf14e.0":"2021-12-28T20:45:12.426Z","0.26.0-canary.b9d35b69.0":"2022-01-05T18:26:26.441Z","0.26.0-canary.2afff08e.0":"2022-01-06T22:22:25.610Z","0.26.0-canary.893fc857.0":"2022-01-07T18:53:16.562Z","0.26.0-canary.69ba13b7.0":"2022-01-19T22:23:19.708Z","0.26.0-canary.0af8ade5.0":"2022-02-07T22:04:36.835Z","0.26.0":"2022-05-03T17:30:28.867Z","0.26.1":"2022-05-09T20:31:45.716Z","0.27.0":"2022-08-12T19:12:00.591Z"},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"aomarks@gmail.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":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"brian.t.vann@gmail.com","name":"taylorv"},{"email":"hi@yef.im","name":"yefim"}],"description":"Material Design formfield web component","license":"Apache-2.0","readme":"# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA form field is a text caption for MWC input elements including\n[`<mwc-checkbox>`](https://github.com/material-components/material-web/tree/master/packages/checkbox),\n[`<mwc-radio>`](https://github.com/material-components/material-web/tree/master/packages/radio),\nand\n[`<mwc-switch>`](https://github.com/material-components/material-web/tree/master/packages/switch).\n\nIt is equivalent to the native\n[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)\nelement in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.\n\n[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)\n\n[Demo](https://material-components.github.io/material-web/demos/formfield/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-formfield\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### With checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6347c3e1b0264cc34cad24e4e52a23e2100a4926/packages/formfield/images/with_checkbox.png\" width=\"105px\" height=\"40px\">\n\n```html\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox/mwc-checkbox.js';\n  import '@material/mwc-formfield/mwc-formfield.js';\n</script>\n```\n\n### nowrap label with checkbox\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6347c3e1b0264cc34cad24e4e52a23e2100a4926/packages/formfield/images/nowrap.png\" width=\"150px\" height=\"40px\">\n\n```html\n<style>\n  mwc-formfield[nowrap] {\n    width: 150px;\n  }\n</style>\n<mwc-formfield label=\"really really long label\" nowrap>\n  <mwc-checkbox></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox/mwc-checkbox.js';\n  import '@material/mwc-formfield/mwc-formfield.js';\n</script>\n```\n\n### With Radio\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6347c3e1b0264cc34cad24e4e52a23e2100a4926/packages/formfield/images/with_radio.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\" checked></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio/mwc-radio.js';\n  import '@material/mwc-formfield/mwc-formfield.js';\n</script>\n```\n\n### With Switch\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6347c3e1b0264cc34cad24e4e52a23e2100a4926/packages/formfield/images/with_switch.png\" width=\"160px\" height=\"48px\">\n\n```html\n<mwc-formfield label=\"Airplane mode\">\n  <mwc-switch checked></mwc-switch>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-switch/mwc-switch.js';\n  import '@material/mwc-formfield/mwc-formfield.js';\n</script>\n```\n\n## API\n\n### Slots\n\nName      | Description\n--------- | -----------\n*default* | The input element that this form field provides a label for.\n\n\n### Properties/Attributes\n\nName    | Type     | Description\n------- | -------- | ----------------------------------\n`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)\n`alignEnd` | `boolean` | Align the component at the end of the label.\n`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.\n`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.\n\n### Methods\n\n*None*\n\n### Events\n\n*None*\n\n### CSS Custom Properties\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Description\n|----  | -----------\n| `--mdc-typography-body2-<PROPERTY>` | Styles the typography of the formfield.\n\n## Additional references\n\n-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)\n","readmeFilename":"README.md","homepage":"https://github.com/material-components/material-components-web-components#readme","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/formfield"},"bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"keywords":["material design","web components","formfield"]}